반응형 웹디자인 | CSS 반응형 유닛 정리 #5

반응형 CSS 단위 총정리 (EM과 REM)

www.youtube.com/watch?v=7Z3t1OWOpHo&feature=youtu.be

CSS 문법

Selector: 요소중 어떤 요소를 선택할지

property: 어떤 속성들을 꾸며줄 건지

values: 속성에 해당값

 

value 중 요소의 크기 결정을 볼것이다

absolute, relative

 

 

절대적인 unit // px (나머지는 신경 쓸 필요 x)

pt는 문서에서 폰트 사이즈 조절할 때 많이 쓰임

브라우저에서 px로 변환되어 스크린에 표기된다

 

px = 모니터 위에서 화면나타낼 수 있는 가장 작은 단위

 

px 사용시 문제점???

컨테이너 사이즈가 변경되어도 컨텐츠가 그대로 고정

사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 전혀 반응하지 x

 

대부분은 고정된 px보다 % (예) 부모의 80%

 

 

---

상대적 유닛

em, rem, vw, vh, %

em : 타이포그래피의 단위 중 하나. 현재 지정된 point size를 나타내는 단위. 지금 폰트 사이즈를 나타내는 단위.

폰트 패밀리에 따라서 사용자에게 보여지는 text 크기 달라질 수 있음. em은 선택된 폰트와 상관없이 항상 고정된 폰트 사이즈를 가지고 있음.

 1em == 16px

 

왜 em이 상대적일까 ??

부모의 폰트 사이즈에 상대적으로 크기가 계산되어진다.

em의 상대성

기본적으로 브라우저에서 html에 할당되는 폰트사이즈 =16px

parent 8em = 16px * 8 =128px ==800%

child 0.5em = 128px *0.5 =64px ==50%

 

---

 

rem : r= root + em , 부모에 따라서 사이즈가 계산되는 것이 아니라 root에 지정된 폰트사이즈에 따라 크기 결정

       root 요소에 상대적으로 크기가 결정됨.

rem

parent 8 rem = 16px *8 = 128px

child 0.5 rem = 16px *0.5 = 8px

 

html이나 body에서 따로 폰트 사이즈를 지정하지 않으면 기본적으로는 100%로 지정

= 브라우저로 지정된 폰트 사이즈를 따라간다.

= em, rem 쓰면 브라우저에서 폰트 사이즈를 변경하면 자동적으로 페이지도 폰트사이즈 변경됨

 

---

vw: view port width 너비의 몇%를 쓰겠다

100 vw = viewport 너비의 100%를 쓰겠다

 vh: view port height

 vmin: 브라우저의 너비와 높이 중에 작은 값의 몇%를 쓰겠다.

 vmax: 브라우저의 너비와 높이 중에 큰 값의 몇%를 쓰겠다.

---

%: 부모 요소의 상대적으로 크기가 결정됨

 

부모 요소 500px, child 50% (부모 요소에 상대적) = 부모요소에 맞게

child 50vw (부모 요소와 상관 x) = 브라우저 너비에 따라 변경됨