CSS의 기본 단위 - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • CSS의 기본 단위
    learn
    Practice
    learn
    09 CSS 기초
    CSS의 기본 단위

    CSS에서 프로퍼티(속성, property)가 다양한 만큼 값(밸류, value) 또한 매우 다양합니다. 각 프로퍼티에 따라 쓸 수 있는 값이 정해져있기 때문에 각 프로퍼티에 맞는 값을 알고 있어야 합니다. 지금부터 CSS 학습이 종료될 때까지 다양한 프로퍼티과 그에 맞는 값을 학습하려 합니다.

    CSS에서 값 자리에는 다양한 것들이 들어갈 수 있습니다. 그 중 대표적으로 크기 단위가 가능합니다. 글자 사이즈, 높이나 너비를 정하는 등 크기와 관련된 값을 조정할 때, 크기 단위를 이용하여 그 수치를 조정합니다.

    이러한 크기단위는 크게 고정 크기 단위와 가변 크기 단위 둘로 나눌 수 있습니다. 고정된 값과 변하는 값(상대적인 값)으로 생각하시면 됩니다.


    고정 크기 단위


    고정 크기 단위는 아래와 같이 다양합니다. 이 중 px(픽셀)은 웹에서 대표적으로 쓰이는 고정 크기 단위입니다.

    단위설명
    px픽셀(화소)
    pt포인트
    in인치
    cm, mm센티미터, 밀리미터


    px

    px은 pixel이라는 단위입니다. 보통 픽셀, 화소는 디스플레이를 구성하는 최소 단위를 뜻합니다. 그리고 px은 이 화소 1개의 크기를 뜻합니다.

    우리가 보통 모니터 해상도라고 알고 있는 1920X1080가 바로 픽셀 수입니다. 가로로 1920개의 픽셀과 세로로 1080개의 픽셀을 곱해서 총 2,073,600개의 픽셀로 이루어진 모니터 입니다.

    그래서 px는 얼마 정도의 크기를 가지는 건가요? 라는 생각이 들 겁니다. 이해를 돕기 위해, 12인치와 24인치 모니터 두 개가 있다고 한 번 가정해 보겠습니다. 둘 다 1920X1080의 해상도를 가지고 있습니다.

    두 모니터의 가로 세로 길이는 다르지만 둘 다 200만개가 넘는 픽셀을 각 모니터에 채워 넣어야 합니다.

    따라서, 각 모니터의 픽셀 1개를 동일하게 1px라고 부르더라도 1px의 크기가 서로 다릅니다.

    이렇게 픽셀은 장치의 해상도에 따라 다른 크기를 갖기 때문에, 브라우저에서의 1px을 1인치의 1/96인 1/96 inch로 고정해두었습니다. 정확한 수치에 집중하기보다 우리가 CSS에서 쓰는 1px은 정해진 절대 길이로 쓰인다는 점을 주목하시기 바랍니다.

    간단한 예시와 함께 보겠습니다. 각 px 수치를 조정하면서 그 변화를 직접 살펴봅시다. 실습창에 아래 코드를 작성한 뒤 실행 버튼을 클릭해봅시다.


    가변 크기 단위


    가변 크기 단위는 아래와 같이 다양합니다. 이 중 em과 rem은 같은 방식으로 동작하지만 분명한 차이점이 존재합니다. 두 용어의 비교와 함께 다른 단위 또한 살펴보겠습니다.

    단위설명
    em

    배수 단위
    (부모의 글자크기에 따라 기준점이 달라진다.)

    %백분율 단위
    remroot me
    (최상위 요소의 글자크기에 따라 달라진다.)
    vw화면비 백분율 단위
    vh화면비 백분율 단위
    vmin화면비 최솟값
    vmax화면비 최댓값
    ex현재 폰트의 x-height 값


    em과 rem

    먼저 emrem은 모두 상대적인 길이를 가집니다. 여기서 무엇을 기준으로 하느냐에 따라 차이가 생깁니다. 결론부터 말씀드리면 em은 현재 스타일이 지정되는 요소의 폰트 크기를 기준으로, rem은 최상위 요소의 폰트 크기를 기준으로 합니다. 예시를 통해 바로 살펴보겠습니다. 실습창에 아래 코드를 작성해봅시다.

    위의 예제를 실행해보면, #px, #em, #rem 세 사각형 모두 동일한 크기를 가지고 있습니다. 우리가 보는 웹 브라우저는 기본적으로 16px을 기본 font-size로 갖습니다. 그렇기 때문에 1em과 1rem모두 16px이 되는 것 입니다. (항상 16px은 아닙니다. 브라우저마다 설정을 통해 변경할 수 있습니다.)

    먼저, rem에 대해 살펴보기 위해 아래와 같이 html의 font-size를 바꿔 보겠습니다. 실습창에서 또한 변경해봅시다.

    HTML 문서에서 최상위 요소는 <html> 태그입니다. 따라서, <html> 태그에 font-size: 32px을 적용할 경우 #px은 변화가 없지만 #rem은 사각형 사이즈가 커졌음을 확인할 수 있습니다. 또한, #em도 함께 커졌습니다. 이는 html에 지정된 폰트가 상속을 통해 아래의 요소들의 폰트 크기가 바뀌었기 때문입니다. 우선은 #rem이 변했다는 사실에 집중합시다. (상속에 관한 내용은 이후 강의에서 따로 다루겠습니다) 이처럼, rem은 최상위 요소의 폰트 크기를 기준으로 사이즈가 정해집니다.

    em은 스타일을 지정한 요소의 상위 요소 font-size에 영향을 받습니다. 따라서 #mian에 24px을 주게 될 경우 이번에는 #em의 사각형 크기가 변합니다. 이처럼, em은 상위 요소의 폰트 크기를 기준으로 사이즈가 정해집니다. 

     정리하자면, emrem은 다음과 같은 계산방식으로 계산됩니다. 차이를 꼭 기억하여 적절한 상황에 써야합니다.

    이런 emrem은 대체 왜 사용할까요? 그냥 편하고 간단한 px를 사용하면 되지 않을까요?
    우리들의 일상생활을 떠올려봅시다. 우리는 pc를 통해 웹 브라우저를 사용하기도 하지만, 스마트폰이나 태블릿의 인터넷 애플리케이션으로 또한 웹 브라우저를 사용할 수 있습니다. 이렇게 다양한 사이즈의 기기, 즉 브라우저 환경이 하나로 정형화되지 않거나 웹 페이지를 확대 및 축소해야 할 때, 이에 반응하는 웹을 만드려면 절대 길이보다는 상대 길이를 사용해야 합니다.

    추가로, 기기에 따라 반응하는 웹을 반응형 웹(Responsive Web)이라고 합니다. (나중에 따로 배울 내용입니다.) 이렇게 반응형 웹 등으로 만들기 위해 보통 상대 길이인 emrem을 권장합니다. 하지만 em은 CSS에서 상속으로 인해 복잡함이 발생하여 쓰는 걸 권장하지 않습니다. 관련 내용은 천천히 살펴보겠습니다. 우선 습관적으로 rem을 사용하시길 권장드립니다.


    %(퍼센트)

    마지막으로 % 또한 단위로 사용 가능합니다. % 역시 상대 길이입니다. 보통 이미지나 레이아웃의 너비나 높이를 지정할 때 자주 쓰입니다.

    예제를 통해 한 번 간단히 사용해보겠습니다. 새로운 예제를 위해 이제까지 작성한 HTML 코드와 CSS 코드를 지우고 아래 코드를 작성해봅시다.

    #main의 경우 html50% 너비만큼 가지고, 다시 #per의 경우 #main을 기준으로 50%를 가집니다. %는 기준이 되는 상위 요소의 font-size를 기준으로 하지 않고 너비, 높이, 폰트 크기 등 각각의 프로퍼티 값의 상대적인 값을 가집니다.

    상위 font-size18px 이고 해당 요소의 font-size50%면, 해당 요소의 font-size9px이 됩니다.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)