display 속성: block vs inline
display 속성 --> HTML 요소가 웹페이지에서 어떻게 배치되고 차지하는 공간을 결정.
가장 기본적인 값은 block과 inline.
1. block 요소
-
특징:
- 한 줄을 전체 차지합니다 (다른 요소가 옆에 올 수 없음).
- 항상 새 줄에서 시작합니다.
- 너비와 높이를 설정할 수 있습니다.
-
사용 예:
<div>,<p>,<h1>같은 요소가 기본적으로block요소입니다.
-
예제 코드:
<div style="display: block; background: lightblue; padding: 10px;">Block Element 1</div>
<div style="display: block; background: lightcoral; padding: 10px;">Block Element 2</div>결과:
Block Element 1과Block Element 2는 서로 다른 줄에 배치됩니다.
2. inline 요소
-
특징:
- 콘텐츠 크기만큼의 공간만 차지합니다 (옆에 다른 요소가 올 수 있음).
- 새 줄을 시작하지 않습니다.
- 너비와 높이는 설정할 수 없습니다 (텍스트 크기와 같은 콘텐츠 크기로만 설정됨).
-
사용 예:
<span>,<a>,<strong>같은 요소가 기본적으로inline요소입니다.
-
예제 코드:
<span style="display: inline; background: lightgreen; padding: 5px;">Inline Element 1</span>
<span style="display: inline; background: lightpink; padding: 5px;">Inline Element 2</span>결과:
Inline Element 1과Inline Element 2가 같은 줄에 배치됩니다.
3. block과 inline 차이점 요약
| 속성 | block | inline |
|---|---|---|
| 줄 바꿈 | 항상 새 줄에서 시작 | 같은 줄에 다른 요소와 함께 있음 |
| 차지 공간 | 한 줄 전체 차지 | 콘텐츠 크기만큼만 차지 |
| 너비/높이 설정 | 가능 | 불가능(텍스트 크기 같은 거로만 설정) |
| 예시 태그 | <div>, <p>, <h1> | <span>, <a>, <b> |
4. block과 inline을 둘다 사용한 예제
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.block {
display: block;
background: lightblue;
padding: 10px;
margin-bottom: 10px;
}
.inline {
display: inline;
background: lightpink;
padding: 2px;
margin-right: 5px;
}
</style>
</head>
<body>
<!-- Block 요소 -->
<div class="block">Block Element 1</div>
<div class="block">Block Element 2</div>
<!-- Inline 요소 -->
<span class="inline">Inline Element 1</span>
<span class="inline">Inline Element 2</span>
</body>
</html>코드 결과
Block Element 1
Block Element 2
Inline Element 1
Inline Element 2
요약
- Block: 큰 영역, 새 줄로 내려감. 레이아웃을 나눌 때 사용. (책의 단락처럼,
div). - Inline: 텍스트나 작은 부분을 꾸밀 때 사용. 줄 안에 이어 붙음. (문장 안의 단어처럼,
span).
둘을 섞어서 다양한 레이아웃을 만들 수 있어요! 😊
한양대 학생입니다. 서울캠입니다.