[CSS] 수치의 절대, 상대 단위

1. 절대 단위(Absolute Units)

절대 단위는 주변 요소에 영향을 받지 않고 고정된 수치를 의미합니다. 주로 픽셀(px) 단위를 사용하며 그 외에도 다양한 절대 단위가 존재합니다.

• px (픽셀): 화면에서 가장 작은 단위로, 보통 컨텐츠의 크기를 나타내는 대표적인 절대 단위입니다.

div {
    width: 200px;
    height: 150px;
    font-size: 16px;
    margin: 10px;
}

• in, cm, mm (인치): 주로 화면이나 인쇄물의 크기를 나타냅니다.

div {
    width: 2in;
    height: 5cm;
    margin: 1cm;
}

• deg (디그리): 컨텐츠의 각도 단위로 회전을 나타냅니다.

div {
    transform: rotate(45deg);
}

• pt(포인트), pc(파이카) : 인쇄에서 사용되는 단위로 크기를 나타냅니다.

p {
    font-size: 12pt;
}
h1 {
    font-size: 2pc;
}

2. 상대 단위(Relative Units)

상대 단위는 화면의 크기에 따라 상대적인 비율로 확대 및 축소되는 단위를 의미하며, 다양한 기기에서 호환이 가능한 반응형 웹디자인이 주를 이루는 프론트엔드 개발 특징상 많이 사용되는 단위입니다.

• % (퍼센트): 부모 요소의 크기에 대한 상대적인 비율을 나타냅니다.

div {
    width: 50%;
    padding: 5%;
    font-size: 120%;
}

• em(emphasis): 요소의 폰트 크기에 대한 상대적인 비율을 나타냅니다. 부모 요소의 폰트 크기를 기준으로 계산됩니다. 예를 들어 부모 요소의 폰트 사이즈가 지정 되어있지 않다면 기본값인 16px을 기준으로 1em은 16px 가 되는 것이고 2em은 *2의 값인 32px이 되는 것입니다. 만약 폰트값을 따로 지정하게 되면 em의 기준은 해당 지정 된 부모의 폰트값이 기준이 됩니다.

p {
    font-size: 1.5em; 
    margin: 1em; 
}

• rem(root emphasis): 루트 요소 (HTML 요소)의 폰트 크기에 대한 상대적인 비율을 나타냅니다. 이 비율은 문서 전체의 기본 font-size 값을 지정하지 않았다면 em과 마찬가지로 16px을 기준으로 지정되고 를 통해 해당 html 태그에 대한 폰트 사이즈 CSS 속성이 따로 설정 되었다면 그 사이즈를 기준으로 rem이 적용 됩니다.

html {
    font-size: 18px; /*루트 요소인 html(최상위 루트)의 기본 폰트의 값은 절대 단위입니다.*/
}
p {
    font-size: 1.5rem; /* 루트 요소인 html의 폰트 크기에 1.5배인 27px 의미합니다. */
}

• vw (뷰포트 너비): 뷰포트 너비에 대한 상대적인 비율을 나타냅니다. 이 단위는 창 크기를 줄이고 늘일때 해당 창의 최종 화면에 따라 비율을 차지하기 때문에 절대적으로는 크기가 바뀌지만 상대적으로 크기가 바뀌지는 않습니다.
• vh (뷰포트 높이): 뷰포트 높이에 대한 상대적인 비율을 나타냅니다. 이하 설명은 vw와 같습니다. 여기서 viewport란 브라우저 안에서 실제로 보여지는 화면 구성의 비율을 의미하며 1부터 100까지 척도 설정이 가능합니다.

div {
    width: 50vw; 
}
div {
    height: 75vh;
}

• vmin (뷰포트 최소 값): 뷰포트의 너비와 높이 중 더 작은 값에 대한 상대적인 비율을 나타냅니다.
• vmax (뷰포트 최대 값): 뷰포트의 너비와 높이 중 더 큰 값에 대한 상대적인 비율을 나타냅니다.

div {
    font-size: 3vmin;  /*뷰포트 너비와 높이 중 작은 값의 3%*/
}
div {
    font-size: 5vmax; /*뷰포트 너비와 높이 중 큰 값의 5%*/
}

⭐ 현업에서는 기기의 종류에 따른 웹페이지 크기에 상관 없이 고정적인 크기를 나타낼 때 픽셀(px)을 사용하며, 반응형 웹디자인을 만들 경우 콘텐츠 크기의 경우 %와 vw,vh를, 폰트는 rem를 주로 사용한다고 합니다.