CSS의 display 속성 다루기

모든 태그가 특정 블록 모델에 속한다는 것을 이미 알고 계실 것입니다. 그러나 원한다면, display 속성을 사용하여 모델을 변경할 수 있습니다. 이 속성의 값 block을 사용하면 요소를 블록 요소로 만들 수 있고, 값 inline을 사용하면 인라인 요소로 만들 수 있습니다.

span 태그가 블록 요소처럼 동작하도록 만들어 봅시다:

<span>text</span>
<span>text</span>
<span>text</span>

span {
	display: block;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-bottom: 20px;
}

이제 div 태그가 인라인 요소처럼 동작하도록 만들어 봅시다:

<div>text</div>
<div>text</div>
<div>text</div>

div {
	display: inline;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

HTML 코드에 여러 개의 단락이 있다고 가정합니다. 그들이 인라인 요소처럼 동작하도록 만드세요.

HTML 코드에 여러 개의 링크가 있다고 가정합니다. 그들이 블록 요소처럼 동작하도록 만드세요. 테두리, 너비 및 높이를 설정하세요.