width, height 속성

width, height 속성

width와 height 속성은 각각 가로 길이, 세로 길이를 의미합니다.

section {
    width: 100px; height: 100px;
}

• auto : 브라우저가 너비와 높이를 계산합니다. 기본값.
• length(길이) : 너비와 높이를 부동 소수점 뒤에 절대 단위 지정자 (cm, mm, in, pt, pc) 또는 상대 단위 지정자 (em, ex, px)가 오는 값을 지정합니다.
• %(퍼센트) : 너비와 높이를 퍼센트로 폭을 적용합니다.
  tip! height를 100%로 설정하는 것은 값을 상대값으로 지정하는 것이기 때문에 부모요소에 대한 명확한 height 값이 정의가 되어야만 가능합니다.그래서 부모가 가진 height 값이 설정되어 있지 않는 경우 부모의 height 값을 설정하는 것이 필수적입니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.
• vh, vw, vmin, vmax : 화면 크기를 기준으로 한 높이입니다.

Viewport를 기준으로 한 단위

• vh : viewport의 높이에 근거합니다. 1vh는 viewport의 높이의 1%와 같습니다.
• vw : viewport의 폭에 근거합니다. 1vw는 viewport의 넓이의 1%와 같습니다.
• vmin : viewport의 (넓이와 너비 중) 작은 쪽의 치수에 기초로 합니다. viewport의 높이가 폭보다 작은 경우, 1vmin은 viewport 1%에 해당합니다. 마찬가지로 viewport의 폭이 높이보다 작은 경우, 1vmin은 viewport의 넓이의 1%와 같습니다.
• vmax : viewport의 (넓이와 너비 중) 큰 쪽의 치수에 기초로 합니다. viewport의 높이가 폭보다 큰 경우, 1vmax은 viewport 1%에 해당합니다. 마찬가지로 viewport의 폭이 높이보다 큰 경우, 1vmax는viewport의 넓이의 1%와 같습니다.

max-height, max-width, min-height, min-width

요소의 최대 혹은 최소 너비/높이를 지정합니다.
요소에 값을 지정하면 지정한 값의 최대 혹은 최소값보다 작아지거나 커지는 것을 방지합니다.