1.1 Display 속성이란?
CSS의 display 속성은 HTML 요소가 화면에 어떻게 표시될지를 결정합니다. 요소의 배치 방식과 동작을 제어하는 핵심 속성입니다.
- block: 요소가 한 줄을 모두 차지하며, 새로운 줄에서 시작합니다. (예: <div>, <h1>, <p>)
- inline: 요소가 한 줄 안에서 다른 요소와 나란히 배치됩니다. (예: <span>, <a>)
- inline-block: inline처럼 한 줄에 나란히 배치되지만, block처럼 width, height, margin, padding을 설정할 수 있습니다.
span {
display: inline;
width: 100px; /* 무시됨 */
height: 50px; /* 무시됨 */
padding: 10px; /* 좌우는 적용, 상하는 제한적 */
margin: 10px; /* 좌우만 적용 */
}- none: 요소를 화면에서 완전히 숨깁니다. (공간도 차지하지 않음)
div { display: block; } /* <div>가 한 줄을 차지하며 새로운 줄에서 시작 */
span { display: inline; } /* <span>이 한 줄에 나란히 배치 */
button { display: inline-block; } /* <button>이 한 줄에 나란히 배치되지만 크기 조정 가능 */
p { display: none; } /* <p>가 화면에서 숨겨지고 공간도 차지하지 않음 */
실습 코드 1 inline 요소에 특징을 잘 이해하자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Inline vs Block vs Inline-Block</title>
<style>
*, *::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
border: 2px solid #333;
background-color: #f0f0f0;
text-align: center;
}
.inline {
display: inline;
width: 100px; /* 적용 안 됨 */
height: 100px; /* 적용 안 됨 */
/* 수직 방향은 적용 안 됨 */
margin: 20px;
/* 수직 방향은 레이아웃에 영향 없음(태그간 겹쳐보일 수 있음) */
/* padding: 20px; */
}
.block {
display: block;
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
}
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h2>Inline vs Block vs Inline-Block 비교</h2>
<h3>1. Inline 요소</h3>
<div class="box inline">Box 1</div>
<div class="box inline">Box 2</div>
<div class="box inline">Box 3</div>
<h3>2. Block 요소</h3>
<div class="box block">Box 1</div>
<div class="box block">Box 2</div>
<div class="box block">Box 3</div>
<h3>3. Inline-Block 요소</h3>
<div class="box inline-block">Box 1</div>
<div class="box inline-block">Box 2</div>
<div class="box inline-block">Box 3</div>
</body>
</html>Inline vs Block 차이점 비교
| 특징 | Inline | Block |
| 배치 방식 | 한 줄에 나란히 배치 | 한 줄을 모두 차지, 새로운 줄에서 시작 |
| width, height 설정 | 불가 (콘텐츠 크기에 따라 결정) | 가능 |
| margin | 수평(left, right)만 적용 가능 | 모든 방향 적용 가능 |
| padding | 수평은 정상 적용, 수직은 레이아웃에 영향 없음 | 모든 방향 정상 적용 |
| 줄 바꿈 | 없음 (같은 줄에 배치) | 있음 (새로운 줄에서 시작) |
| 대표 요소 | <span>, <a>, <strong>, <img> | <div>, <p>, <h1>, <ul> |
1.2 Visibility 속성이란?
visibility 속성은 요소의 가시성을 제어합니다. display: none과 비슷해 보이지만 차이점이 있습니다.
- visible: 요소를 보이게 합니다. (기본값)
- hidden: 요소를 숨기지만, 공간은 차지합니다.
실습예제 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>숨바꼭질 게임</title>
<style>
.card {
border: 2px solid #333;
padding: 10px;
margin: 5px;
text-align: center;
background-color: #f0f0f0;
display: inline-block;
width: 150px;
height: 200px;
}
.hidden {
visibility: hidden;
}
.none {
display: none;
}
</style>
</head>
<body>
<h2>숨바꼭질 게임</h2>
<button onclick="toggleVisibility()">고양이 숨기기/보이기 (visibility)</button>
<button onclick="toggleDisplay()">강아지 숨기기/보이기 (display)</button>
<div class="card" id="cat">🐱 고양이</div>
<div class="card" id="dog">🐶 강아지</div>
<script>
function toggleVisibility() {
const cat = document.getElementById('cat');
cat.classList.toggle('hidden');
}
function toggleDisplay() {
const dog = document.getElementById('dog');
dog.classList.toggle('none');
}
</script>
</body>
</html>1.3 Display와 Visibility의 차이
- display: none: 요소를 숨기고 공간도 제거합니다.
- visibility: hidden: 요소를 숨기지만 공간은 유지합니다.
'HTML CSS JavaScript' 카테고리의 다른 글
| CSS position 관련 속성(Position, Z-Index, Overflow) (3) | 2025.07.18 |
|---|---|
| CSS font 속성 (2) | 2025.07.18 |
| CSS background에 이해 (0) | 2025.07.18 |
| CSS 박스 모델에 이해 (1) | 2025.07.18 |
| CSS 선택자(속성 선택자) (0) | 2025.07.14 |