JunO3O
수평 / 중앙 / one true 레이아웃
수평 / 중앙 / one true 레이아웃
2023. 3. 21. 03:05ㆍCSS
수평 정렬 레이아웃
: 수평으로 요소를 정렬할 때는 "자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden 키워드를 적용합니다."
ㅁ 수평 정렬 레이아웃
: div.item 태그에 float 속성을 left로 적용하고, 부모의 overflow 속성을 hidden으로 적용해 요소를 수평으로 정렬합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div.container {
overflow: hidden;
}
div.item {
float: left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">선택 1</div>
<div class="item">선택 2</div>
<div class="item">선택 3</div>
<div class="item">선택 4</div>
</div>
</body>
</html>
ㅁ 왜 overflow 속성을 지정해야 하는가?
: width 속성과 height 속성을 입력하지 않고 overflow 속성을 적용하면 자손이 차지하는 너비를 모두 감싸는 특성이 있기 때문에 요소 위쪽과 아래쪽에 글자가 출력됩니다.
ㅁ div.container 속성에 overflow : hidden 키워드 적용 여부에 따른 결과 비교
- overflow : hidden 키워드를 적용하지 않았을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div.container {
/* overflow : hidden; 키워드를 적용하지 않음 */
}
div.item {
float: left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>overflow : hidden 속성을 적용시키지 않은 예시입니다.</p>
<div class="container">
<div class="item">선택 1</div>
<div class="item">선택 2</div>
<div class="item">선택 3</div>
<div class="item">선택 4</div>
<div class="item">선택 5</div>
</div>
<p>박스와 글자가 같은 줄에 위치하게 됩니다.</p>
</body>
</html>
- overflow : hidden 키워드를 적용했을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div.container {
overflow: hidden; /* overflow : hidden 키워드를 적용 */
}
div.item {
float: left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>overflow : hidden 속성을 적용시킨 예시입니다.</p>
<div class="container">
<div class="item">선택 1</div>
<div class="item">선택 2</div>
<div class="item">선택 3</div>
<div class="item">선택 4</div>
<div class="item">선택 5</div>
</div>
<p>박스와 글자가 다른 줄로 구분됩니다.</p>
</body>
</html>
ㅁ 중앙 정렬 레이아웃
: 중앙 정렬하고 싶은 태그에 width 속성을 부여하고 margin 속성을 '0 auto'로 입력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 초기화 */
* {
margin: 0;
padding: 0;
}
/* 주제 */
body {
margin: 0 auto;
width: 960px;
}
</style>
</head>
<body>
<h1>중앙 정렬 레이아웃</h1>
<h2>
중앙 정렬하고 싶은 태그에 width 속성을 부여하고 margin 속성을 '0 auto'로
입력합니다.
</h2>
<p>
코드를 실행하면 body 태그에 해당하는 제목과 본분이 중앙에 위치하게 됩니다.
웹 페이지 전체나 제목 요소에 적용할 수 있습니다.
</p>
</body>
</html>
ㅁ one true 레이아웃
: 행과 열로 구성을할 때 one true 레이아웃을 사용합니다.
: 각 공간을 구분할 때는 id나 class를 할당해줍니다.
1) 부모 태그에 고정된 너비를 입력합니다.
2) 수평 정렬하는 부모 태그의 overflow 속성에 hidden을 적용합니다.
3) 자손 태그에 적당한 너비를 입력하고 float 속성을 적용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
width: 500px;
margin: 10px auto;
}
#middle {
overflow: hidden;
}
#left {
float: left;
width: 150px;
background: rgb(201, 151, 151);
}
#right {
float: right;
width: 350px;
background: rgb(217, 221, 157);
}
#top {
background: rgb(137, 225, 137);
}
#bottom {
background: rgb(114, 112, 212);
}
</style>
</head>
<body>
<div id="top">div 태그의 top 부분</div>
<div id="middle">
<div id="left">
float 속성에 left 키워드를 입력하여 왼쪽에 배치합니다.
</div>
<div id="right">
float 속성에 right 키워드를 입력하여 오른쪽에 배치합니다.
</div>
</div>
<div id="bottom">div 태그의 bottom 부분</div>
</body>
</html>