안녕하세요. 오늘은 CSS Layout (display / float / clear)에 알아볼게요.
display 속성
배치 방법 결정으로 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용이 가능해요.
그리고 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치 시 이미지를 표 형태로 배치 가능해요.
| 종류 | 설명 |
| block | 인라인 레벨 요소를 블록 레벨 요소로 전환 |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 전환 |
| inline-block | 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지는 속성 / 마진과 패딩 지정 가능 |
| none | 해당 요소를 화면에 표시하지 않는 속성 |
다음은 display 속성예제 (수평 내비게이션)이에요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS display 속성</title>
<style>
* {
box-sizing: border-box;
}
nav ul {
list-style:none;
}
nav ul li {
display:inline-block; /* 인라인 레벨 요소와 블록 레벨 요소 모두 지정 */
padding:20px;
margin:0 20px;
border:1px solid #222;
}
</style>
</head>
<body>
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</nav>
</body>
</html>
float 속성
왼쪽이나 오른쪽으로 배치하는 속성으로
<p> 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우 사용해요.
<p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치하지 않고 float 속성을 사용해요.
웹 요소를 문서 위에 떠 있게 만들어 주는 속성이고 ('떠 있다': 요소가 왼쪽 or 오른쪽 구석에 배치)
가로로 배치될 때 요소에 기본 마진과 패딩과 같지 않아요.( ≠ display: inline-block)
| left | 해당 요소를 문서의 왼쪽에 배치 |
| right | 해당 요소를 문서의 오른쪽에 배치 |
| none | 좌우 어느 쪽에도 배치하지 않는 속성 : 기본 |
다음은 float 속성 예제(텍스트 왼쪽에 이미지 배치) 에요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS float 속성</title>
<style>
body {
width: 600px;
height: 600px;
}
img {
width: 300px;
height: 300px;
float:left; /* 왼쪽에 떠 있게 */
margin-right:40px;
}
</style>
</head>
<body>
<img src="./lotte-white.jpg">
<p>롯데 자이언츠(Lotte Giants)는 대한민국 부산광역시를 연고지로 하는 KBO 소속 프로 야구 팀이다. 사직야구장을 홈구장으로 사용하고 있으며, 울산문수야구장을 제2홈구장으로 사용하고 있다.</p>
<p>1975년에 실업 야구단으로 창단되어 역대 KBO구단중 가장 오래된 구단이다. 1982년에 프로 야구단으로 전환했다. 1984년과 1992년 두 차례 한국시리즈 우승을 차지했고, 2008년부터 2012년까지 5년연속 포스트시즌 진출을 이루어냈다.</p>
<p>롯데 자이언츠의 별명은 부산광역시의 상징 새가 갈매기이고, 구단의 대표적 응원가도 〈부산갈매기〉라서 “부산 갈매기"라고 부른다. 롯데 자이언츠의 2023시즌 우승을 응원합니다!</p>
</body>
</html>
clear 속성
float 속성을 해제하는 속성으로
float 속성을 사용해 웹의 요소를 왼쪽 or 오른쪽에 배치 시 그다음에 넣는 다른 요소에도 똑같이 속성에 전달해요.
그리고 float 속성이 더 이상 유용하지 않다고 알려주는 속성이에요.
| 종류 | 설명 |
| left | float : left 해제 |
| right | float : right 해제 |
| both | float : left와 float : right 해제 |
여기까지 CSS Layout (display / float / clear)에 알아봤는데요.
layout을 잘 사용한다면 웹페이지를 보기 좋게 정리하고 깔끔하게 만들 수 있을 것 같아요.
'Frontend > CSS' 카테고리의 다른 글
| CSS background (0) | 2025.10.28 |
|---|---|
| CSS position (0) | 2025.10.26 |
| CSS margin & padding (0) | 2025.10.22 |
| CSS border (0) | 2025.10.20 |
| CSS Box-Model (0) | 2025.10.18 |