CSS 기초 레이아웃 완전 정리

 

 

Web Development · CSS

CSS 기초 레이아웃

display, float, ul/li, table, hover 선택자를 정리합니다.

시작 오늘 분석할 코드

이 폴더는 JavaScript 앞뒤에서 함께 쓰이는 CSS 기본 레이아웃과 움직임 효과를 정리합니다. display, float, hover, table 스타일, keyframes, animation, transition의 역할을 나누어 봅니다.

div { border: 2px solid yellowgreen; width: 200px; display: inline-block; } #floatimg { float: left; border: 1px solid yellowgreen; padding: 5px; margin: 10px; } ul { background: aliceblue; list-style-type: square; } li:hover { background: yellowgreen; } button:hover { color: magenta; }

display요소의 배치 방식을 정합니다.

inline-block한 줄 배치와 박스 크기 적용을 함께 지원합니다.

float요소를 좌우로 띄워 텍스트가 감싸게 합니다.

padding테두리 안쪽 여백입니다.

margin요소 바깥 여백입니다.

:hover마우스가 올라간 상태 선택자입니다.

---

1 display inline과 inline-block

DIV 예제는 같은 div를 inline-block과 inline으로 바꾸어 차이를 보여줍니다. inline-block은 한 줄에 배치되면서 width, border 같은 박스 속성이 잘 보입니다.

display	줄 배치	width 적용
block	새 줄 차지	적용
inline	문장 흐름 안에 배치	제한적
inline-block	한 줄 배치 가능	적용
none	보이지 않고 공간 없음	해당 없음

---

2 border와 width

div에 border와 width를 주면 문단이 박스처럼 보입니다. inline-block에서는 세 div가 같은 너비 박스로 나란히 배치될 수 있습니다.

border

요소의 테두리를 표시해 박스 범위를 눈으로 확인합니다.

width

콘텐츠 영역의 너비를 고정해 줄바꿈과 배치를 제어합니다.

---

3 float 이미지 배치

float 예제는 이미지를 왼쪽에 띄우고, 뒤따르는 문단이 이미지 옆으로 흐르게 만듭니다. 과거 기사형 레이아웃에서 자주 쓰던 방식입니다.

img float:left

→

문단 흐름

→

이미지 옆 텍스트

속성	역할	예제 값
float	요소를 왼쪽/오른쪽에 띄움	left
padding	테두리 안쪽 여백	5px
margin	요소 바깥 여백	10px
border	이미지 테두리	1px solid

---

 

반응형

 

4 float 주의점

float는 문서 흐름에 영향을 주기 때문에 뒤 요소가 예상과 다르게 올라올 수 있습니다. 현대 레이아웃에서는 flex나 grid를 더 자주 사용하지만, 텍스트가 이미지 옆으로 감싸는 효과에는 여전히 이해할 가치가 있습니다.

float 뒤에 새 섹션을 분리해야 할 때는 clear 또는 새로운 레이아웃 컨테이너를 검토합니다.

---

5 ul과 li 스타일

리스트 예제는 ul 배경색과 list-style-type, li margin, li:hover 배경색을 다룹니다.

선택자	속성	효과
ul	background	목록 전체 배경
ul	list-style-type	글머리 모양
li	margin-right	목록 항목 여백
li:hover	background	마우스 올렸을 때 배경

---

6 table과 button hover

오디오 재생 리스트 예제는 td.index, th, button:hover처럼 선택자를 나누어 테이블 모양을 다듬습니다.

선택자	역할	효과
td.index	번호 칸	테두리와 좌우 여백
th	제목 칸	너비, 왼쪽 정렬, 아래 테두리
button:hover	버튼 hover	글자색 magenta
table	행 구조	오디오 목록 표시

---

7 hover 가상 클래스

:hover는 사용자가 요소 위에 마우스를 올렸을 때만 적용됩니다. 리스트 항목이나 버튼처럼 상호작용이 필요한 요소에 많이 씁니다.

li

평소 목록 항목 스타일입니다.

li:hover

마우스가 올라간 순간의 스타일입니다.

---

8 자주 하는 실수

실수	증상	해결
inline에 width 기대	너비가 기대대로 안 보입니다.	inline-block을 사용합니다.
float 후 정리 누락	다음 요소가 말려 올라옵니다.	clear 또는 flex를 검토합니다.
선택자 오타	스타일이 적용되지 않습니다.	class와 태그명을 확인합니다.
hover를 모바일 기준으로 과신	터치 환경에서 다르게 동작합니다.	클릭 상태도 고려합니다.
table 태그 닫힘 누락	표 구조가 깨집니다.	tr, td, th 닫힘을 확인합니다.

---

9 복습 체크리스트

체크	통과 기준
display	inline과 inline-block 차이를 설명합니다.
float	이미지 옆 텍스트 흐름을 이해합니다.
padding/margin	안쪽/바깥 여백을 구분합니다.
list-style	목록 글머리 모양을 바꿉니다.
hover	마우스 오버 상태 스타일을 설명합니다.
table	td.index와 th 선택자를 구분합니다.

---

10 테스트 케이스

테스트	확인 내용
inline-block	div 세 개가 박스처럼 나란히 보이는지 봅니다.
inline	width 적용 차이를 확인합니다.
float	문단이 이미지 옆으로 흐르는지 봅니다.
li hover	목록 항목 배경이 바뀌는지 확인합니다.
button hover	버튼 글자색이 magenta가 되는지 봅니다.

---

11 레이아웃 개선 연습

원본 예제는 CSS 기본 속성의 차이를 확인하기 위한 짧은 코드입니다. 속성값을 조금씩 바꾸면 박스 모델과 배치 흐름이 훨씬 잘 보입니다.

A

display 비교block, inline, inline-block을 번갈아 적용해 줄바꿈과 width 차이를 확인합니다.

B

여백 비교padding과 margin 값을 크게 바꿔 안쪽/바깥 여백 차이를 봅니다.

C

float 방향 변경float:left를 right로 바꿔 문단 흐름을 비교합니다.

D

hover 색상 변경목록과 버튼 hover 색상을 서로 다르게 바꿔봅니다.

연습	목표	힌트
box-sizing 추가	width 계산 방식을 안정화합니다.	box-sizing:border-box
float clear	다음 영역 말림을 막습니다.	clear:both
list marker 제거	글머리 없는 메뉴를 만듭니다.	list-style-type:none
button padding	버튼 클릭 영역을 넓힙니다.	padding:6px 12px
table spacing	표 간격을 조정합니다.	border-collapse

---

12 modern layout와 비교

float는 오래된 레이아웃 방식이고, 현재는 flex나 grid가 더 자주 쓰입니다. 그래도 float는 이미지 옆 텍스트 흐름을 이해하는 데 도움이 됩니다.

방식	장점	어울리는 상황
float	텍스트가 이미지 주변으로 흐름	기사형 이미지 배치
inline-block	간단한 가로 배치	작은 박스 나열
flex	정렬과 간격 제어 쉬움	네비게이션, 카드 행
grid	행/열 구조 강함	복잡한 2차원 레이아웃

이 장의 목표는 최신 레이아웃을 모두 쓰는 것이 아니라, CSS 박스가 문서 흐름에서 어떻게 배치되는지 감각을 잡는 것입니다.

---

13 추가 테스트

테스트	확인 내용
div 내용 증가	긴 문장을 넣었을 때 박스 높이가 늘어나는지 봅니다.
width 제거	inline-block의 기본 너비가 콘텐츠 기준인지 확인합니다.
float margin 제거	이미지와 문단이 너무 붙는지 확인합니다.
li hover 범위	배경색이 li 영역 어디까지 칠해지는지 봅니다.
button hover 해제	마우스를 빼면 원래 색으로 돌아오는지 확인합니다.

---

14 속성별 영향 범위

CSS 속성은 콘텐츠 크기, 박스 여백, 문서 흐름, 상호작용 상태에 각각 다른 영향을 줍니다. 어떤 속성이 무엇을 바꾸는지 나누어 보면 디버깅이 쉽습니다.

속성	영향 범위	확인 방법
display	요소가 배치되는 방식	줄바꿈과 width 적용 확인
width	콘텐츠 박스 너비	텍스트 줄바꿈 확인
border	박스 외곽 시각화	요소 영역 확인
padding	테두리 안쪽 여백	내용과 테두리 사이 거리 확인
margin	요소 바깥 여백	다른 요소와의 거리 확인
float	문서 흐름과 텍스트 감싸기	문단 흐름 확인
:hover	마우스 상태 스타일	마우스 진입/이탈 확인

1

테두리 켜기border로 요소 영역을 먼저 확인합니다.

2

display 확인줄바꿈과 가로 배치가 맞는지 봅니다.

3

여백 조정padding과 margin을 따로 바꿔 차이를 봅니다.

4

상태 확인hover가 적용되고 해제되는지 확인합니다.

마무리 확인	통과 기준
박스 영역	border로 div의 실제 범위가 보입니다.
가로 배치	inline-block에서 세 박스가 나란히 배치됩니다.
문단 감싸기	float 이미지 옆으로 텍스트가 흐릅니다.
목록 상태	li:hover가 마우스 위치에만 적용됩니다.
버튼 상태	button:hover가 해제되면 원래 색으로 돌아옵니다.
표 스타일	td.index와 th 스타일이 서로 다른 영역에 적용됩니다.

---

핵심 한 줄 요약

displayinline과 inline-block은 width 적용과 박스 흐름에서 차이가 납니다.

float이미지를 왼쪽에 띄워 문단이 옆으로 흐르게 합니다.

hoverli와 button의 마우스 오버 스타일을 지정합니다.

Tags

#CSS#display#inline-block#float#hover#table#ul#li#layout#티스토리

▼ 티스토리 태그 입력란 복사용

CSS, display, inline-block, float, hover, table, ul, li, layout, 티스토리