CSS 살펴보기 (단위)

반응형이나 일반 레이아웃 짤 때 css 단위를 정확히 몰라서 한번 파보도록 해야겠다고 생각을 했습니다.

작업 할 때 의미를 알고 작업 할 수 있도록 짚고 가겠습니다.

 

단위

• px, %
• rem, em
• vw, vh
• vmin, vmax

 

px(픽셀)

.div{
	width : 100px;
    height : 100px;
}

코드블럭이 이상하게 나오네요,,

가장 기본이 되는 단위 픽셀(px) 입니다.

%(퍼센트)

.div{
	width:50%
}

자식은 부모의 넓이만큼을 나눠쓰는 구조,

사진 -> 부모가 width 값을 100%를 쓰고 자식은 그 100%의 50%만 써서 블록이 반만 출력 됨,

 

3. em, rem

.jasic1 {
  width:10em;
  font-size : 10px;
  background-color : red;
}

.jasic2 {
  width:20em;
  font-size : 10px;
  background-color : red;
}

.jasic3 {
  width:30em;
  font-size : 10px;
  background-color : red;
}

em 은 자기 자신의 font-size의 영향을 받습니다.

em 을 "배수" 라고 이해하면 쉬울 것 같네요,

 

예시1) font-size: 10px; width: 10em => width : 100px

예시2) font-size: 10px; width: 20em => width : 200px

예시3) font-size: 10px; width :30em => width : 300px

단점이 있는데, 상속을 받다보니 상속관계가 복잡해질수록 개발자 머리도 복잡해질 수 있는 우려가 있습니다..

 

그래서 다음은 부모요소의 상속을 받지 않는 rem 이 있습니다.

 

사용방법은 동일합니다.

대신 rem은 부모요소가 아니라 HTML의 font-size의 상속을 받습니다.