Frontend/CSS

프론트엔드 CSS 속성 - 글꼴, 크기단위, 배경

쏠솔랄라 2023. 2. 11. 13:27

 

 

CSS 속성: 크기(단위)


    px
        절대 크기 지정 방식
        내가 정해준 크기가 무조건 적용

    rem
        문서 요소 최상위 태그 = html의 font-size와의 배율
        1rem = 16px (html font-size default value = 16)
        2rem = 32px

    em
        상위 요소(부모) font-size의 배율
        1.5em = 부모 요소 font-size 1.5배
        * 아주 특별한 경우에만 사용 ; 미디어 쿼리

    %
        부모 요소(상위 요소) 혹은 기준이 되는 요소와의 [비율]
        * 가장 가까운 요인이 되는 요소와의 비율

;    px, rem, em, & 중 px, rem, &을 대부분 많이 사용

    vw(viewpoint width), vh(viewpoint height)

        100vw ; 사용자 해상도의 100% 길이 ; 잘 사용하지 않음
        100vh ; 사용자 해상도의 100% 높이** 아주아주 많이 사용

            * 100vw ; 스크롤의 길이는 포함하지 않음

    calc
        계산 기능 : 특정 높이의 요소를 제하기 위해 사용

            ex.
            height: calc(100vh - 80px)
            * 띄어쓰기 꼭 지켜야 함
        

 

CSS의 배경


    background-color
        : 배경색
    
    background-image
        : 배경 이미지
    
    background-repeat
        : 바둑판 배열(반복) ; 일종의 옵션
    
    background-position
        : 반복되지 않는 배경 이미지의 상대 위치를 설정
    
    background-attachment
        : 위치가 설정된 배경 이미지를 고정 
        스크롤과 무관하게 화면에서 배경이 이동하지 않습니다
    
    background-size
        : 배경의 크기 설정
            cover
                페이지에 가득 차게
                종횡비에 따라 이미지가 잘릴 수 있음
            contain
                원본 종횡비에 맞게 사진이 전체가 보이도록
                사진의 크기에 따라 여백이 생김

    축약
    background
        : 경로, 반복여부, 위치, 속성 / 사이즈
            background: url(이미지경로) no-repeat fixed
            

 

 

 

ex.

 

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font</title>
  </head>
  <style>

    /*
    font-family
      폰트 적용 방식
      1. import ; 거의 사용하지 않음
      2. link ; 링크로 가지고 오는 게 제일 빠름
      3. 다운로드 ; 실무

        웹사이트 제작 시 기본 폰트는 굉장히 부자연스럽습니다
        무료 폰트 사이트: 구글폰트, 네이버폰트
    */

    @font-face {
      font-family: "noto";
      src: url("./font.otf") format("opentype");

      /*ttf, otf는
       
        woff
        woff2
       
        */
    }

    * {
      font-family: "Noto Sans KR", sans-serif;
    }
 
      #rem {
        font-size: 10%;
      }
      #em {
        font-size: 2em; /* = 부모 요소의 2배*/
      }
      #progres {
        width: 500px;
        border: 1px solid #999;
      }
      #per {
        width: 70%;
        background-color: #00f;
        color: #fff;
        text-align: center;
        font-size: 16px;
      }
      html {
        font-size: 32px;
      }
      * {
        margin: 0;
        padding: 0;
      }
      header {
        width: 100%;
        height: 100px;
        background-color: yellow;
      }
      nav {
        width: 100%;
        height: 80px;
        background-color: aqua;
      }
      main {
        height: calc(100vh - 100px - 80px); /*띄어쓰기 아주 중요*/
        background-color: rgb(255, 174, 216);
      }
      body {
        background-image: url(./image/1.jpg);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .color {
        background-color: #000;
        color: #fff;
      }
      /*
      패딩, 마진
      박스사이징, 테두리
      플렉시블 레이아웃
      그리드 리에아웃 (모던 CSS 레이아웃)
      미디어쿼리, 트랜스폼, 애니메이션, 트랜지션
      + 퍼블리싱 페이지
     
      */
  </style>

  <body>
    <p>안녕하세요, 바뀐 폰트입니다</p>
    <p style="font-size: 48px">안녕하세요, 바뀐 폰트입니다</p>
    <p style="font-weight: bold">
      안녕하세요, 바뀐 폰트입니다 why not imported!!!!
    </p>
    <!-- font-weight: 100~900 100 ; thin 400 ; regular (기본값 ; 아무것도 지정하지
    않았을 때) 700 ; bold (명령어) 900 ; exttra bold -->
    <p style="font-size: 48px" font-weight:900>안녕하세요, 바뀐 폰트입니다</p>
    <p style="font-weight: 100">안녕하세요, 바뀐 폰트입니다</p>
    <h2>rem</h2>
    <div id="rem">
      <!-- html의 크기에 의존 -->
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ea nihil
      necessitatibus? Doloremque vel excepturi iure esse, inventore et numquam
      suscipit architecto laborum, necessitatibus at explicabo, possimus
      molestias? Consectetur, explicabo.
    </div>
    <h2>em</h2>
    <div style="font-size: 16px">
      <p id="em">
        <!-- 부모 요소에 영향을 받기 때문에 p태그로 적용 -->
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt beatae
        rem expedita consectetur recusandae! Officiis dolorum ex veritatis!
        Facere dolorum nisi ratione? Illum alias nihil ut! Deleniti dolores non
        repudiandae?
      </p>
    </div>
    <h2>per</h2>
    <div id="progress">
      <div id="per">70%</div>
    </div>
    <h2>CSS 배경</h2>
    <div class="color">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam voluptate
      dignissimos dolor quod perspiciatis repellat labore est deserunt corrupti,
      numquam, atque mollitia explicabo quo, earum nulla laudantium iure cumque
      id!
    </div>
    <div class="image-1">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam facilis
      itaque enim voluptate delectus culpa earum quasi similique veritatis eum,
      beatae ipsam laboriosam in. Mollitia nam dolorem esse modi enim.
    </div>
    <div class="image-2">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
      praesentium fugiat sequi accusantium dolore unde necessitatibus sapiente
      nulla accusamus nesciunt iste eum reprehenderit nostrum quis eveniet
      dolorem, odit sunt nobis!
  </body>
</html>
 
 

 

 

HTML 파싱 과정, google.com을 주소창에 입력했을 때 일어나는 일?!
-> cs ; computer science 관련 질문

    1. google.com을 입력했을 때
    2. 도메인(google.com)을 통해 DNS(Domain Name Server)에서 대응하는 ip주소를 찾음
    3. 그리고 해당 주소에 웹 페이지를 그리기 위한 데이터를 요청
    4. WAS(서버의 도우미) ex. tomcat => 데이터 요청, 데이터 응답
    5. 다시 웹 브라우저에 전송, 웹 브라우저는 받아온 데이터를 토대로 페이지를 파싱

    
    6. 웹 브라우저에 전달된 페이지를 브라우저 로더가 분석
    7. HTML, CSS, JS를 분리함
    8. HTML(DOM tree), CSS(CSS OM), js(자바스크립트 엔진)
        * DOM ; 내가 만든 것들 ; 검색이 빠름
    
    9. DOM tree, CSS OM이 합쳐지면서 랜더링 트리(F12)
    10. 랜더링 크리 : DOM tree + CSS 
        랜더링 트리를 토대로 CSS가 정해지는 레이아웃 과정
        -> 크기, 위치 계산
    11. JS로드 (평가와 실행 -> JS 실행 컨텍스트)
    12. 페인트 (사용자 화면에 그려주는 것)

    13. 사용자의 행위에 따라 CSS나 HTML의 구조적 변경이 일어남
        이 경우에는 레이아웃 과정 -> 페인트 과정을 다시 그리는
        리페인트 및 리레이아웃 과정이 존재

 

 

 

'Frontend > CSS' 카테고리의 다른 글

프론트엔드 CSS 요소의 레이아웃[위치, 정렬] - display, position, flexible layout  (0) 2023.02.17
프론트엔드 CSS - padding, margin, box-sizing , 테두리, 레이아웃  (0) 2023.02.11
프론트엔드 Text관련 CSS 속성 - color, text-align, line-height, text-indent, text-decoration, text-shadow  (0) 2023.02.05
프론트엔드 웹 CSS 적용법(스타일링 기법), 선택자  (0) 2023.02.05

'Frontend/CSS'의 다른글

  • 현재글프론트엔드 CSS 속성 - 글꼴, 크기단위, 배경

관련글

티스토리툴바