CSS - div를 가운데 정렬 (float과 overflow)

728x90

div를 사용했는데 내용을 중간으로 옮기고 싶을 경우가 있다. 아래와 같이 적용해보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.wrap{
    background-color: aqua;
    padding: 16px;
}
.wrap > div{ /* >은 wrap의 자식 테이블 선택. */
    background-color: fuchsia;
    border: 1px solid black;
    
}
 
</style>
</head>
<body>
<!-- div는 한줄을 다 차지한다. -->
<!-- 옆으로 두려면 두가지 방법이 있다. -->
<div class="wrap">
    <div>div1</div> <!-- block태그 -->
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
</div>
</body>
</html>
Colored by Color Scripter
cs

.wrap > div { } 태그에 width를 추가해주었다.

.wrap > div{ /* >은 wrap의 자식 테이블 선택. */
	background-color: fuchsia;
	border: 1px solid black;
	width: 20%;
}

.wrap > div { } 태그에 float을 추가해주었다.

.wrap > div{ /* >은 wrap의 자식 테이블 선택. */
	background-color: fuchsia;
	border: 1px solid black;
	width: 20%;
	float:left;
}

float를 적용시키면 인식을 못한다. 이 float을 감싸고 있는 클래스에게 overflow : auto;를 줘보자.

wrap { }태그에 overflow을 추가해주었다.

.wrap{
	background-color: aqua;
	padding: 16px;
	overflow: auto;
}

최종코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.wrap{
    background-color: aqua;
    padding: 16px;
    overflow: auto;
}
.wrap > div{ /* >은 wrap의 자식 테이블 선택. */
    background-color: fuchsia;
    border: 1px solid black;
    width: 20%;
    float:left;
}
 
</style>
</head>
<body>
<!-- div는 한줄을 다 차지한다. -->
<!-- 옆으로 두려면 두가지 방법이 있다. -->
<div class="wrap">
    <div>div1</div> <!-- block태그 -->
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
</div>
</body>
</html>
Colored by Color Scripter
cs

1. width를 줄인다.

2. float : left 을 사용해서 왼쪽으로부터 쌓아가겠다..

3. 부모테이블의 영역을 벗어나기때문에 부모테이블에 overflow : auto 를 써주면 된다.

저작자표시 비영리 변경금지

'✨ Front-end > CSS' 카테고리의 다른 글

CSS - div를 가운데 정렬 (inline-block) (0)	2023.03.07
CSS - 로그인, 게시판, 회원가입 폼 만들어보기 (0)	2023.02.09
CSS - 자식과 자손 선택자 ( > ) (0)	2023.02.09
CSS - style태그와 태그선택자, div와 class 선택자 (0)	2023.02.09