[웹 개발] css 단위

※ 본 포스팅은 패스트 캠퍼스 강의를 정리한 내용입니다.

---

 

목차

 

px , %

em , rem

vw , vh

vmin , vmax

 

---

 

---

[px , %]

px : 해상도에 따른 상대단위
화면에 정확한 픽셀 단위로 절대적으로 고정하는 개념이다.

 

% : 부모 요소의 가로사이즈영향을 받는다.

부모 요소의 영향을 받아서 단위가 완성이 되는것이다.

---

[em , rem]

css의 상속과 관련있으며 자식들에게 영향이 가게된다.

em : 자기 자신의 폰트 사이즈 크기의 영향을 받는다.

font-size가 10px인 width : 600px;를 em으로 변경한다면 width : 60em이다.

부모 font-size가 10px일 때 자식 font-size : 2em 이란 부모 폰트 사이즈의 2배이다.20px의 크기를 가진다.

조상에서부터 영향을 받아오기때문에 유지보수가 힘들다.

rem : root em의 개념으로 중간 단계를 건너뛰고 최종단계인 가장 조상요소인 HTML태그 에 지정된 폰트 사이즈만에 영향만을 받는다.

html의 font-size : 10px일 때 중간 요소의 영향을 모두 건너뛰고 자식 요소의 width가 20rem이라면 200px의 가로사이즈를 가지게 된다.

만약 html에서 설정한 폰트사이즈가 아닌 html에서 사용하는 기본 font-size:16px를 유지하길 원한다면

body 태그의 font-size를 설정한다.

html에서 상속된 font-size가 덮어씌워지기 때문에 rem 단위에는 전혀 영향을 주지 않는다.

 

 

 

---

[vw , vh]

view port : 보이는 화면 전체가 viewport, 출력하는 화면 전체

vw : viewport width size의 약자. viewport에서 보이는 가로 너비

vh : viewport height size의 약자.viewport에서 보이는 세로 너비

 

- 단위는 기본적으로 백분율이다. 100단위 안에서 설정을 한다.

---

[vmin , vmax]

v : view port의 약어

vmax : view port의 최대 너비

- 현재의 화면 전체에의 가장 넓은 사이즈

- 단위는 기본적으로 백분율이다. 100단위 안에서 설정을 한다.

vmin : view port의 최소 너비

- 현재의 화면 전체에서 가장 짧은 사이즈

- vmax보다 더 짧은 단위로 계산하게 된다.

 

[웹 개발] CSS 띄움(정렬),위치

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]