0054 CSS 내용(content)영역 설정하기-width와 height
CSS의 height와 width 속성(property)으로 HTML 요소의 높이와 너비를 설정할 수 있다. 이 때, height와 width 속성(property)이 설정하는 것은 정확히는 박스 모델에서 내용(content) 영역의 높이와 너비를 결정하는 것이다.
즉, 아래의 그림처럼 박스 모델에서 내용(content) 영역의 크기를 결정한다.
height 속성(property)은 내용(content) 영역의 높이(height)를 설정한다.
width 속성(property)은 내용(content) 영역의 너비(width)를 설정한다.
보통, height와 width의 기본값(default)은 auto로 설정되어 있어, height와 width 속성을 설정하지 않으면 브라우저가 자동으로 설정한다.
다음과 같이 
0054.html파일을 작성하여 실행해보자.
<!DOCTYPE html>
<html>
<head>
<title>내용영역 너비와 높이</title>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<div> 요소의 내용(content) 영역을 너비(width) 100px, 높이(height) 50px 로 설정하고 배경색(background-color)을 빨간색으로 설정했다.
다시 강조하지만 height와 width 속성(property)이 설정하는 것은 정확히는 박스 모델에서 내용(content) 영역의 높이와 너비다. 따라서 요소의 마진(margin), 패딩(padding), 테두리(border)의 두께와는 전혀 상관없다.
이미 앞에서 <img /> 요소의 크기를 결정할 때 style 속성으로 height와 width를 다루는 것을 0017강에서 이미 언급했다.
이를 박스 모델 입장에서 본다면 <img /> 요소에서 이미지가 들어갈 내용(content) 영역의 높이와 너비를 결정한 것이다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0054 CSS 내용(content)영역 설정하기-width와 height.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0056 HTML 요소(element)의 크기 계산하기 (0) | 2019.02.11 |
|---|---|
| 0055 CSS의 마진(Margin)과 패딩(Padding) 영역 설정하기 (0) | 2019.02.04 |
| 0053 테두리 각각의 방향에서 설정하기 및 단축 속성(shorthand property) (0) | 2019.01.30 |
| 0052 CSS 테두리 두께와 색 설정하기 (0) | 2019.01.28 |
| 0051 CSS 테두리 스타일 설정하기 (0) | 2019.01.26 |