4-3. 디스플레이 방식
■ 디스플레이 방식
HTML 요소를 브라우저 화면에 표시하는 작업인 디스플레이 방식에는 인라인(Inline)과 블록(Block)이 있습니다.
인라인과 블록의 개념과 CSS의 display 속성을 이용하여 HTML 요소를 화면에 표시하는 방법에 대해 알아봅니다.
디스플레이 방식 : 인라인과 블록
ex4-4.html
<style>
img, span, p, div { border: solid 1px red; }
</style>
<body>
<h2>인라인 방식</h2>
<img src="img/tree.png">
<span>안녕하세요.</span>
<span>안녕하세요.</span>
<h2>블록 방식</h2>
<p>안녕하세요.</p>
<p>안녕하세요.</p>
<div>안녕하세요.</div>
</body>
ex4-4.html의 실행 결과
인라인이란?
인라인 방식에서는 HTML 요소를 브라우저 화면에 수평 방향으로 표시하고 줄 바꿈이 일어나지 않습니다.
블록이란?
블록 방식에서는 HTML 요소가 브라우저 화면에 표시될 때 하나의 요소가 전체 행을 차지하여 앞 뒤로 자동 줄 바꿈이 일어납니다.
HTML 태그 요소들이 기본적인 디스플레이 동작 방식을 표로 정리하면 다음과 같습니다.
다음은 display 속성을 이용하여 인라인 방식의 요소들을 블록으로 변경하고, 블록 방식의 요소들은 인라인으로 변경한 예입니다.
<style>
img, span, p, div { border: solid 1px blue; }
img, span { display: block; }
p, div { display: inline; }
</style>
<body>
<h2>인라인 => 블록</h2>
<img src="img/tree.png">
<span>안녕하세요.</span>
<span>안녕하세요.</span>
<h2>블록 => 인라인</h2>
<p>안녕하세요.</p>
<p>안녕하세요.</p>
<div>안녕하세요.</div>
</body>
ex4-5.html의 실행 결과
■ display 속성 값 : inline
블록 요소의 디스플레이 방식을 인라인으로 변경하는 display 속성의 값 inline에 대해 알아봅니다.
디스플레이 속성 값 : inline
ex4-6.html
<style>
* { margin:0; padding: 0; }
h3 { border: solid 1px red; }
p {
display: inline;
border: solid 1px blue;
width: 100px;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
<body>
<h3>display: inline</h3>
<p>요소 A</p>
<p>요소 B</p>
<p>요소 C</p>
</body>
ex4-6.html의 실행 결과
■ display 속성 값 : block
다음은 인라인 요소의 디스플레이 방식을 블록 방식으로 변경하는 display 속성의 값 block에 대한 예입니다.
디스플레이 속성 값 : block
ex4-7.html
<style>
* { margin:0; padding: 0; }
h3 { border: solid 1px red; }
span {
display: block;
background-color: yellow;
width: 100px;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
<body>
<h3>display: block</h3>
<span>요소 A</span>
<span>요소 B</span>
<span>요소 C</span>
</body>
ex4-7.html의 실행 결과
■ display 속성 값 : inline-block
인라인 또는 블록 요소의 디스플레이 방식을 인라인-블록 방식으로 변경하는 display 속성 값 inline-block에 대해 알아봅니다.
디스플레이 속성 값 : inline-block
ex4-8.html
<style>
* { margin:0; padding: 0; }
h3 { border: solid 1px red; }
span {
display: inline-block;
background-color: skyblue;
width: 100px;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
<body>
<h3>display: inline-block</h3>
<span>요소 A</span>
<span>요소 B</span>
<span>요소 C</span>
</body>
ex4-8.html의 실행 결과
