CSS, 비율 단위 (% , em , rem) / : root 를 알아보자.

% / em / rem / root 를 쓰는 이유 ? 

 

사용처에 의해 화면 배율이 달라졌을 경우 px 로 직접 지정한다면 ,

추후 사용처 마다 직접 전부 수정해야 하는 단점이 있음.

하지만 비율로 적용 시키게 되면 , 사용처 마다 자연스럽게 비율로 따라가게 됨.

 

% 단위

부모 요소를 기준으로 적용되는 모든 단위에 대한 상대적 백분율.

부모요소 중첩 , 계층별 부모요소에 % 단위가 각각 적용시 → 누적 비율 적용.

       section:nth-child(1) p {
            background-color: brown;
            font-size: 80%;
            /* 16px * 0.8 = 12.8px */
        }

        section:nth-child(1) p strong {
            color: white;
            font-size: 150%;
            /* 12.8px * 1.5 = 19.2px */
        }

 

em 단위

부모 요소를 기준으로 적용되는 font-size 속성 크기를 기반으로 한 상대적 비율.

부모요소 중첩 , 계층별 부모요소의 em 단위가 각각 적용시 → 누적 비율 적용.

단 , 임의의 부모 계층이나 자기 자신 요소에 대한 폰트사이즈를 px 로 지정한다면,

그 시점부터 다시 초기화 되어 이전에 적용되었던 비율은 무시된다.

 

        section:nth-child(2) p {
            background-color: aquamarine;
            font-size: .8em;
            /* 16px * 0.8 = 12.8px */
        }

        section:nth-child(2) p strong {
            color: red;
            font-size: 1.5em;
            /* 12.8px * 1.5 = 19.2px */
        }

 

 

em 과 %의 차이

결과적으로 값 표현과 단위 명칭만 다를 뿐 동일 적용되는 것 처럼 표현되나,

%는 상속계층 내에서 단위 지정이 가능한 모든 개별 속성간의 누적 배율이 적용되고,

em은 상속계층간 font-size 속성을 기반으로 한 누적 배율이 적용된다.

        aside {
            background-color: bisque;
            width: 20em;
            /* 
        16px * 20 = 320px
      */
        }

        aside h3 {
            background-color: blueviolet;
            width: 80%;
            /* 
        320px * 0.8 = 256px
      */
        }

        aside p {
            background-color: cyan;
            width: 20em;
            /* 
        16px * 20 = 320px   - 상속 계층 내 font-size 속성 크기가 변하지 않는 한 다른 속성에 대한
                              상속 계층간 em 단위 적용은 최상위 부모 계층에 지정된 font-size 속성
                              크기에 대한 배율만 적용.
      */
        }

aside 의 자식요소인 p 에 누적 배율이 적용 될 것 같다고 오류를 범할 수 있는데,

부모 body 의 폰트 사이즈에 기반하였기 때문에 aside 와 aside p의 width 값은 같다.

 

rem (root em)

최상위 부모 요소의 font-size 에 대한 배율만 적용 시킨다.

최상위 부모 요소 , 즉 html 또는 root 에 적용 된 값에 따라 가거나 값이 없다면 기본 디폴트 값으로 적용 받는다.

        footer {
            background-color: blue;
            font-size: 30px;
        }

        footer h4 {
            background-color: silver;
            font-size: 1.3rem;
            width: 20rem;
            /* 
        16px * 1.3 = 20.8px       - font-size
        16px * 20 = 320px         - width
      */
        }

 

 

:root     루트 요소의 속성 지정.

        html {
      font-size:20px;
    }

       * :root {
      font-size:20px;
    }

html 의 태그 선택자 또는 root의 가상 클래스 선택자로 표현이 가능.