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
a
strong
span {
display: inline;
}특징
- 줄바꿈 ❌
- 내용 크기만큼만 차지
width,height❌
margin-top/bottom❌
<span>hello</span>
<span>world</span>➡️ 같은 줄에 나옴
2) display: block
박스처럼 동작하는 요소
대표 태그
div
p
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>
모든 태그들은 고유한 속성을 가지고 있다 → 이걸 모르면 디자인 어려움
Share article