들어가기 전에
CSS 속성과 값을 사용할 때 값과 함께 많이 사용되는 것 중의 하나가 단위입니다.
여러 가지의 단위가 있고 각각의 동작 방식이 다르기에 특징을 제대로 알지 못한다면 개발할 때 어려움을 겪을 수도 있습니다.
이번 강의에서는 단위의 종류와 그 특성에 대해서 알아보도록 하겠습니다.
핵심키워드
- 절대 길이
- 상대 길이
학습하기
2) 속성-단위
단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다.
절대 길이
절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다.
- px ( 1px = 1/96th of 1 inch )
절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다.
여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서,
디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다.
- pt ( 1pt - 1/72 of 1 inch )
컴퓨터가 없던 시절부터 있던 단위입니다.
인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다.
웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다.
그러나 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발 시 권장하는 단위가 아닙니다.
예를 들면 Windows에서는 9pt = 12px, Mac에서는 9pt = 9px 로 보이게 됩니다.
상대 길이
상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변합니다.
- %
부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.
- em
font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.
- rem
root의 font-size를 기준으로 값을 환산합니다.
- vw
viewport의 width값을 기준으로 1%의 값으로 계산됩니다.
참고자료
- CSS values and units
https://developer.mozilla.org
- We hope you enjoyed learning about CSS values and units — don't worry if this doesn't all make complete sense right now; you'll get more and more practice with this fundamental part of CSS syntax as you move forward!
- CSS Units
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
comment
0207 font size 에 대해 정말 잘 설명해주셔서 감사합니다. 나중에 하다가 까먹으면, 다시 보러 오겠습니다~ ^^
2023. 02. 05
절대 길이
* px -pixels
=> 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적
**권장
* pt -points
상대 길이
* % -Percentage => 100%는 부모의 값의 1배, 200%는 부모의 값의 2배
* em => 1em은 부모의 값의 1배, 2em은 부모의 값의 2배
* rem
* vw
06:43쯤에 1em이 16px라고 말씀하셨는데 이건 예제 기준인거죠? 1em은 '기준 폰트 사이즈'로 정해지는 것 맞을까요?
* 절대 길이
- px : (pixels) 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적이다.
브라우저 호환성에 유리한 구조라 웹사이티의 경우 픽셀 단위를 사용하는 것을 권장
- pt : (points) 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위
웹화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용, 해상도 따라 차이가 있어 pt는 웹 개발시 권장하지 않는다.
* 상대 길이 : 상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저 등의 크기에 따라 상대적으로 값이 변합니다.
- % : (percentage) 부모의 값에 대해서 백분율로 환산한 크기를 갖게 된다.
- em : (font size of the element) font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능.( 부모의 값에 1em은 100%이고, 2em은 200%인 의미)
<em 환산은 인터넷 사이트 있다>
속성 / 단위
절대 길이
Px (pixels)
: 화면의 1개의 점과 동일하므로, 컴퓨터 해상도에 따른 상대적 단위이지만,
화면에서 고정된 크기 값을 가지기 때문에 절대 길이로 볼 수 있음.
웹 개발 시 여러 환경에서 동일한 디자인 표현 가능,
브라우저 호환성 보장에 유리한 장점을 가짐.
Pt (points)
: 인쇄물, 워드에서 사용된 가장 작은 표준 인쇄 단위.
웹에서 인쇄용 문서 스타일 정의시 유용하게 사용 가능.
Window, Mac에 따라 다르게 표현되기 때문에 웹 개발시 권장 X
상대 길이
% (percentage)
: 상위 요소에 정의된 픽셀을 기준으로 퍼센트를 늘리고 줄일 수 있음.
em (font size of the element)
: 상위 요소를 기준으로 해당 폰트의 대문자 M의 너비를 기준으로 하는 상대적 단위.
1em = 16px;
1.25em = 20px;
rem (font size of the root element)
: root 요소를 기준으로 값 환산
vw (1% of viewports’ width)
: viewport의 width 값을 기준으로 1% 값으로 계산
vh (1% of viewports’ height)
: viewport의 width 값을 기준으로 1% 값으로 계산
절대 길이: 고정된 크기 단위, 다른 요소의 크기에 영향을 받지 않음
- px(pixels): 1px = 1/96th of 1in
- pt(points): 1pt = 1/72 of 1in
px: 웹개발을 할 때 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어있어 디자인 의도가 많이 반ㄴ영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있다.
pt: 인쇄물이나 워드프로세서 프로그램에 사용된 가장 작은 표준 '인쇄'단위. 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발시 권장하는 단위가 아님.
ex) Windows: 9pt = 9px, Mac: 9pt = 9px
상대 길이: 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함
- %: Percentage. 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됨
- em: font size of the element. font-size를 기준으로 값을 환산, 소수점 3자리까지 표현 가능.(1em=16px일 때, 1.25em=20px)
지정된 font-size의 M의 너비를 기준으로 함
- rem: font size of the root element. root의 font-size를 기준으로 값을 환산
- vw: 1% of viewport's width. viewport의 width값을 기준으로 1%의 값으로 계산
수강완료
강의 감사합니다 11-27!일!
강사님 성격이 많이 급하시네요. 줄줄줄 말로 하시는데,,,좀 차분하게 연필로 체크도 하시면서 설명하시면 좋을 것 같아요. 너무 쫓기듯이 하시니 이해가 잘 안 될 것 같아 걱정이네요.
21.08.03.
21.06.24
21.03.27
21.01.09
상대길이에 의해 바뀐 정확한 폰트 사이즈는 우측상단의 computed styled sidebar를 열어 확인한다.
맥과 윈도우, 브라우저 별 차이점을 기억하자!