CSS 에서의 사이즈 단위에 대해 알아보자
CSS 에서의 사이즈 단위에 대해 알아보자
- 픽셀(px):
- 픽셀은 가장 일반적으로 사용되는 사이즈 단위입니다. 고정된 크기를 지정할 때 주로 사용되며, 픽셀 단위로 값을 설정하면 화면에 픽셀 단위로 정확하게 표시됩니다.
- 백분율(%):
- 백분율은 부모 요소의 크기를 기준으로 크기를 지정하는 상대적인 단위입니다. 부모 요소의 크기에 상대적으로 설정되기 때문에 웹사이트의 반응형 디자인에 유용하게 사용될 수 있습니다.
- 뷰포트 단위(VW, VH, vmin, vmax):
- 뷰포트 단위는 현재 보이는 화면의 크기를 기준으로 크기를 지정하는 단위입니다. VW(Viewport Width)는 뷰포트의 너비를 1로 기준으로 설정하며, VH(Viewport Height)는 뷰포트의 높이를 1로 기준으로 설정합니다. vmin은 뷰포트의 너비와 높이 중 작은 값에 상대적으로 설정되고, vmax는 뷰포트의 너비와 높이 중 큰 값에 상대적으로 설정됩니다.
- 상대적인 단위(em, rem):
- em과 rem은 상대적인 단위로, 폰트 크기를 기준으로 크기를 지정합니다. em은 현재 요소의 폰트 크기를 기준으로 설정되며, rem은 최상위 요소(일반적으로 HTML 요소)의 폰트 크기를 기준으로 설정됩니다.
- 기타 단위:
- 다른 사이즈 단위로는 cm(센티미터), mm(밀리미터), in(인치), pt(포인트), pc(파이카) 등이 있습니다. 이러한 단위들은 주로 인쇄용 CSS 스타일링에서 사용될 수 있습니다.
각 사이즈 단위는 다양한 상황에서 활용될 수 있으며, 디자인 요구 사항과 목적에 따라 선택하여 사용할 수 있습니다. 유연한 반응형 디자인을 위해서는 백분율과 뷰포트 단위를 활용하는 것이 좋습니다.
폰트 단위에 대한 추가 설명
rem
em은 현재의 font-size를 정의하며,body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다.
vh와 vw
반응형 웹디자인 기술은 퍼센트 값에 상당히 의존하고 있습니다. 하지만 CSS의 퍼센트 값이 모든 문제를 해결할 좋은 방법은 아니지요. CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받습니다. 만약 너비값과 높이값을 부모 요소의 너비값의 뷰포트에 맞게 사용할 수 있다면 어떨까요? 바로 vh와 vw 단위가 그런 의도에 맞는 단위라는 사실.
vh 요소는 높이값의 100분의 1의 단위입니다. 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다.
vmin과 vmax
vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vmin과 vmax는 너비값과 높이값에따라 최대, 최소값을 지정할 수 있습니다. 예를 들면 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 됩니다. 너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.
어때요, 이 값들을 사용할 수 있나요?
언제나 스크린에 보여지는 요소를 만든다고 상상해보세요. 높이값과 너비값을 vmin을 사용해 100으로 지정합니다. 예를 들어 터치화면 양 변에 가득차는 정사각형 요소를 만들때는 이렇게 정의하면 됩니다.
ex와 ch
ex와 ch 단위는 현태 폰트와 폰트 사이즈에 의존한다는 점에서 em 그리고 rem과 비슷합니다. em과 rem과 다른 점은 이 두 단위가 font-family에 의존한다면 다른 두 단위는 폰트의 특정 수치에 기반한다는 점입니다.
ch 단위, 또는 글꼴 단위는 제로 문자인 0의 너비값의 “고급 척도”로 정의됩니다. 흥미로운 의견은 에릭 마이어의 블로그에서 확인할 수 있습니다. 그러나 기본 컨셉은 monospace 폰트의 N 의 너비값을 부여 받았다는 것이며, width: 40ch;는 40개의 문자열을 포함하고 있다는 뜻입니다. 이 특정 규칙은 점자 레이아웃에 기반하고 있지만, 이 기술의 가능성은 간단한 어플리케이션 그 이상으로 확장할 수 있습니다.
ex 단위의 정의는 “현재 폰트의 x-높이값 또는 em의 절반 값”이라고 할 수 있습니다. x-높이값은 소문자 x의 높이값이기도 합니다. 폰트의 중간 지점을 알아내기 위해 자주 사용하는 방법입니다.
