2. DIV 디자인(Bloock, Inline, Inline-block)

박은서

Jan 07, 2026

2. DIV 디자인(Bloock, Inline, Inline-block)

Contents

1. DIV 디자인 1️⃣ div는 무엇인가?2️⃣ div 디자인의 핵심 개념 5가지 ⭐⭐⭐3️⃣ display 4️⃣ 가장 기본적인 div 디자인 예제 5️⃣ 실습

1. DIV 디자인

1️⃣ div는 무엇인가?

div는 의미 없는 블록 컨테이너


<div>내용</div>

기본 성질 : block 요소

한 줄 전체 차지

레이아웃과 디자인용으로 사용

👉 CSS 디자인의 출발점 = div

2️⃣ div 디자인의 핵심 개념 5가지 ⭐⭐⭐

1) 크기 (width / height)


div {
	width:300px;
	height:200px;
}

px, %, vw, vh 사용

height는 내용 없으면 안 보일 수 있음

2) 여백 (margin / padding)


div {
	margin:20px;    /* 바깥 여백 */
	padding:16px;   /* 안쪽 여백 */
}

구분	설명
margin	div 바깥 공간
padding	div 안쪽 공간

👉 디자인 여유감의 핵심

3) 테두리 & 배경


div {
	border:1px solid#333;
	background-color:#f5f5f5;
}

border-radius로 둥글게


border-radius:12px;

4) 박스 모델 (Box Model) ⭐⭐


div {
	box-sizing: border-box;
}

값	의미
content-box	기본값 (계산 어려움)
border-box	실무 표준 👍

➡️ width 안에 padding+border 포함

5) 정렬 & 배치 (Flex / Grid)


.container {
	display: flex;
	justify-content: center;
	align-items: center;
}

➡️ div 디자인의 완성은 정렬

3️⃣ `display`

요소가 줄을 차지하는 방식 + 크기/정렬이 어떻게 되느냐를 결정

1) `display: inline`

글자처럼 동작하는 요소

대표 태그

span

strong


span {
	display: inline;
}

특징

줄바꿈 ❌

내용 크기만큼만 차지

width, height ❌

margin-top/bottom ❌


<span>hello</span>
<span>world</span>

➡️ 같은 줄에 나옴

2) `display: block`

박스처럼 동작하는 요소

대표 태그

div

h1 ~ h6


div {
	display: block;
}

특징

항상 새 줄 시작

가로 한 줄 전체 차지

width, height ⭕

margin, padding 전부 ⭕


<div>box1</div>
<div>box2</div>

➡️ 세로로 쌓임

3) display: inline-block ⭐⭐⭐

inline + block의 장점 결합


.box {
	display: inline-block;
	width:120px;
	height:80px;
}

특징

같은 줄에 배치 ⭕

width, height ⭕

margin, padding 전부 ⭕


<div class="box"></div>
<div class="box"></div>

➡️ 가로로 나란히 박스 배치

4) 정리

display	줄 차지	width/height	margin/padding
`inline`	❌ (내용만)	❌	좌우만
`block`	⭕ (한 줄 전체)	⭕	전부
`inline-block`	❌ + ⭕	⭕	전부

5) 실무 예제


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .inline {
        display: inline;
        background: yellow;
      }
      .block {
        display: block;
        background: skyblue;
      }
      .inline-block {
        display: inline-block;
        width: 100px;
        height: 50px;
        background: pink;
      }
    </style>
  </head>
  <body>
    <span class="inline">inline</span>
    <span class="inline">inline</span>

    <div class="block">block</div>
    <div class="block">block</div>

    <div class="inline-block">A</div>
    <div class="inline-block">B</div>
  </body>
</html>

6) 언제 무엇을 쓰면 될까? ⭐

텍스트 안 강조 → inline

레이아웃 박스 → block

가로로 나열되는 박스 → inline-block

정렬이 복잡 → flex 사용 (실무)

4️⃣ 가장 기본적인 div 디자인 예제


.card {
	width:300px;
	padding:16px;
	border:1px solid#ddd;
	border-radius:8px;
	background: white;
}


<div class="card">
<h3>제목</h3>
<p>내용입니다</p>
</div>

➡️ 카드 UI의 기본 형태

5️⃣ 실습

1) `display: block`


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      div {
	      display : block;
        border: 1px dashed black;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </body>
</html>

2) `display: inline`


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      div {
        display: inline;
        border: 1px dashed black;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </body>
</html>

➡️ display를 inline으로 바꿔서 height가 안 먹힘(버그 아님)

3) `display: inline-block`


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      div {
        display: inline-block;
        border: 1px dashed black;
        height: 50px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </body>
</html>

모든 태그들은 고유한 속성을 가지고 있다 → 이걸 모르면 디자인 어려움