8-4-6. CSS 속성 : Content의 높이(height) {height: auto / px / em / %;}
2021. 8. 31. 20:23ㆍ카테고리 없음
8-4-6. CSS 속성 : Content의 높이(height)
가. height 속성
- Content 영역의 세로 크기인 높이를 지정하는 속성
- '인라인 레벨 요소'를 제외한 모든 요소(블록레벨)에 적용
- 기본값 : 0
나. height 속성값의 종류
▣ 고정값 단위 형태의 속성값 : px / em ...
▣ 상대값 단위 형태의 속성값 : %
- 부모요소 content 영역의 height 기준값에 대한 상대적인 높이를 적용
- 그러나, 만약 height 속성값이 %로 선언된 자식요소의 부모요소가 인라인레벨 요소이면,
그 부모요소를 제외하고 그 자식요소로부터 가장 가까운 블록레벨 조상요소의 height값을 기준으로 함
- 이때 기준이 되는 부모요소의 height 값은 순수 content 영역의 height 값임(아래 다. 참조)
- 단, 부모요소의 height 값이 필히 숫자로 특정하여 명시적으로 선언되어 있어야 함
- 만일 최상단까지 블록레벨 요소가 없다면, <body>를 기준으로 계산하여 높이가 적용됨
▣ auto
- 브라우저에 의해 자동으로 계산한 높이를 적용
다. 요소영역의 높이 계산 방법
- height 속성값을 auto가 아닌 값을 특정하면, 요소 영역의 높이는 박스모델의 content,
padding, border영역의 높이로부터 영향을 받음
- 즉, 요소영역의 높이 = content height값 + (padding height값 * 2) + (border height값 * 2)
| [코드예시] 1 .parent{height: 200px; border: 20px;} 2 .child{height: 50%;} |
| [위 코드 중 2번 child 요소의 총 높이는?] ※ 100px = 부모height 200px * 자식height 50% 위와 같이 자식요소의 height 값이 %로 지정될 때, 그 부모요소의 height 기준 값은 width 와 padding 및 border를 더한 전체 높이가 아닌, content 영역 자체의 순수 height 값이 기준이 되고, 이때 그 값은 숫자 형태의 명시적인 값이 입력되어 있어야 함 |