[CSS] 절대 크기와 상대 크기 알아보기

CSS에서 크기를 지정하는 방법으로 절대 크기와 상대 크기가 있습니다
각각의 장단점을 알고 활용할 수 있어야 합니다

절대 크기와 상대크기

비교	절대 크기	상대크기
정의	지정된 크기	주변 요소에 상대적인 크기
차이점	사이즈가 바뀌지 않는 요소 일 때 유용함 접근성의 문제가 있음	주변 요소에 따라 크기가 달라져 비율을 일정하게 유지 가능 사용자가 직접 읽기 적합한 환경을 설정 가능

 

---

 

절대크기

주변 요소에 영향을 받지 않는 지정된 크기

● px

기본적인 단위

브라우저 기본 글꼴 크기 : 16px

TIP!
px값은 지정된 크기에서 변하지 않아 코딩 시 틀을 잡을 때 유용합니다.
브라우저 확대/축소로 인한 크기 조절은 가능합니다

 

---

 

상대크기

주변 요소에 따라 지정되는 크기

사용자가 브라우저 메뉴에서 크기를 변경할 수 있게 할 때 사용

가변형, 반응형을 작업하기 위해서는 상대 크기를 사용해야 함

●  em

em은 상위 부모 요소의 값을 상속받아 이를 기준으로 상대적인 크기가 결정

TIP!
1em = 16px

 

●  rem

rem은 브라우저의 값을 상속받아 이를 기준으로 상대적인 크기가 결정

 

See the Pen rem ex by seojimin (@haru_day) on CodePen.

 

브라우저 기본 사이즈

아주 작게	작게	중간	크게	아주 크게
10px	12px	16px	20px	24px

TIP!
1rem = 16px
html에서 사이즈를 지정하면 지정한 사이즈가 기준이 됩니다
따로 지정하지 않으면 브라우저의 기본 설정이 기준이 됩니다

 

●  퍼센트 (%)

%는 부모 요소를 기준으로 하여 비율로 크기를 지정

 

See the Pen Untitled by seojimin (@haru_day) on CodePen.

 

●  vw, vh

브라우저 혹은 스크린 사이즈에 따라 크기가 지정

반응형에 사용

 

See the Pen Untitled by seojimin (@haru_day) on CodePen.

 

단위	사이즈 기준
vw	너비 기준으로 크기 지정
vh	높이 기준으로 크기 지정

 

---

 

관련 포스트

폰트 스타일 알아보기 (Fonts)

[CSS] 폰트 스타일 알아보기 (Fonts)