고정 헤더 영역
상세 컨텐츠
본문
반응형
블록 레벨 요소와 인라인 레벨 요소
- 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소다.
- 인라인 레벨(Inline-level) : 줄을 차지하지 않는 요소다.
종류
- 블록 레벨 태그 : <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
- 인라인 레벨 태그 : <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>
박스 모델(box model) - 박스 형태의 콘텐츠
- <p> 태그를 사용하는 텍스트 단락을 블록 레벨 요소인데 단락 앞뒤에 빈 줄이 생기면서 텍스트 단락이 하나의 박스 형태를 가진다.
- 이런 박스 형태를 스타일 요소에서는 '박스 모델(box model) 요소'라고 한다.
- 박스 모델을 잘 알아야 한 줄에 배치할 지, 줄을 바꾸어 배치할 지, 요소와 요소 사이의 간격을 어떻게 조절할 지 결정할 수 있다.
width, height 속성 - 콘텐츠 영역 크기
- 박스의 너비는 width로 지정하고, 높이는 height로 지정한다.
width: <크기> | <백분율> | auto
height: <크기> | <백분율> | auto
속성
- <크기> : 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정한다.
- <백분율> : 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정한다.
- auto : 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정된다. 기본 값이다.
<html>
<head>
<style>
.box1 {
width: 400px;
height: 100px;
background: #ff6a00;
}
.box2 {
width: 50%;
height: 200px;
background: #0094ff;
}
div { margin: 10px; }
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
display 속성 : 화면 배치 방법 결정하기
- display 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있다.
display: none | contents | block | inline | inline-block | table | table-cell 등
- 자주 사용하는 속성은 none, block, inline, inline-block 속성을 자주 사용한다.
<html>
<head>
<meta charset="utf-8">
<style>
.inline {
width: 30px;
height: 30px;
display: inline;
background: #ff6a00;
}
.block {
width: 30px;
height: 30px;
display: block;
background: #0094ff;
}
</style>
</head>
<body>
<div class="inline">개나리</div>
<div class="inline">무궁화</div>
<div class="inline">아카시아</div>
<div class="block">개나리</div>
<div class="block">무궁화</div>
<div class="block">아카시아</div>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 여백을 조절하는 속성들 (0) | 2021.04.28 |
|---|---|
| [CSS 기초] 테두리 관련 속성들 (0) | 2021.04.27 |
| [CSS 기초] 배경 색과 배경 이미지 (0) | 2021.04.24 |
| [CSS 기초] 목록 스타일 (0) | 2021.04.23 |
| [CSS 기초] 문단 스타일 (2) (0) | 2021.04.21 |
댓글 영역