CSS요소2 - 단위와 값

MDN을 참고하면 CSS마다 허용하는 단위값이 따로 있다 따라서 MDN을 참고 해서 허용되는 범위, 단위를 알고 사용해야 한다!

단위

1. 상대길이 단위: 기준점이 있는 상태에서 기준점의 배율
   • em, rem, vw, vh
2. 절대길이 단위: 고정적인 값
   • px

▶️ px

• px을 굉장히 많이 사용한다
• 모니터는 점으로 이루어져 있는데 px은 점 하나를 뜻함(근래에는 아닌 경우가 있음)
• 보통의 브라우저에서는 기본값이 16px이다

▶️ em

상대적인 단위로 부모의 font-size를 기준으로 지정된다

• %와 동일하다
• 부모가 font-size:20px이면, 해당 요소가 font-size: 2em인 경우 40px이 된다

▶️ rem

상대적인 단위로 root(브라우저)의 font-size(보통 16px)를 기준으로 지정된다

• %와 동일하다
• 만약 해당 요소가 font-zise: 2rem인 경우 32px이 된다

▶️ vw

viewport(브라우저의 크기)의 너비를 기준으로 한다(뷰포트 백분율)

• 너비를 100vw로 두고 지정한다
• 50vw → 보여지는 브라우저 너비의 50%

▶️ vh

viewport(브라우저의 크기)의 높이를 기준으로 한다(뷰포트 백분율)

• 높이를 100vh로 두고 지정한다
• 50vh → 보여지는 브라우저 높이의 50%

▶️ vmin, vmax

가로 세로에 따라서 100vw, 100vh중 큰것이 vmax, 작은것이 vmin이다

• 반응형에서 사용된다

▶️ %

부모요소를 100%로 두고 계산한다

.container {
  width: 100px;
}
.container .box {
  width: 50%
}

.box의 width는 50px이 되고 .container의 width가 변경될때마다 값이 바뀔 것이다

▶️ 함수표기법

값을 계산해서 표현할 수 있다

• calc()
  • 값을 계산해서 넣을 수 있다.
  • 사칙연산(+, -, /, *)이 가능하다
  • 연산자 좌우에는 공백을 줘야 한다
  • 브라우저가 자동으로 계산한다
• min()
  • 더 작은 값을 자동으로 선택한다
• max()
  • 더 큰 값을 자동으로 선택한다

min()과 max()는 IE에서는 지원하지 않는다

.box1s {
  /* 전체 너비에서 100px을 뺀 값 */
  width: calc(100% - 100px);
}
.box2 {
  /* 전체 너비와 100px 중에서 더 작은 값 */
  width: min(100%, 100px);
}ß
.box3 {
  /* 전체 너비와 100px 중에서 더 큰 값 */
  width: max(100%, 100px);
}