풀스택 개발 학습 과정/프론트엔드
[HTML + CSS] CSS 4 - float / flex 를 이용한 콘텐츠 배치
육츠
2024. 2. 25. 03:24
Float 이용 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float을 이용한 Layout-2</title>
<style>
/* 전체 div 태그에 속성 지정 */
div.section{
width : 600px;
padding : 20px;
margin : 20px;
border : 2px solid gray;
}
div.section>div {
width : 100px;
height: 200px;
background-color : orange;
border:1px solid gray;
}
/* parent1에 일반적인 float 속성 적용 */
div.parent1{
/* 이 속성이 없으면 자식태그의 높이를 인식하지 못함. 자식 div가 흘러넘침 */
overflow: hidden;
}
div.parent1 > div {
float: left;
}
/* parent2 : 부모의 폭이 좁으면 자식 요소는 자동으로 밑으로 내려감 */
div.parent2{
width : 500px;
overflow: auto;
}
div.parent2 > div {
float : left;
margin-right : 10px;
}
</style>
</head>
<body>
<h2>Float을 이용한 Layout-2</h2>
<h3>(1) float을 적용한 예</h3>
<div class="parent1 section">
<div>Box-1</div>
<div>Box-2</div>
<div>Box-3</div>
<div>Box-4</div>
<div>Box-5</div>
</div>
<h3>(2) float을 적용한 예2</h3>
<div class="parent2 section">
<div>Box-1</div>
<div>Box-2</div>
<div>Box-3</div>
<div>Box-4</div>
<div>Box-5</div>
</div>
</body>
</html>

Flex 를 이용한 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float을 이용한 Layout-2</title>
<style>
/* 전체 div 태그에 속성 지정 */
div.section{
width : 600px;
padding : 20px;
margin : 20px;
border : 2px solid gray;
}
div.section>div {
width : 100px;
height: 100px;
background-color : orange;
border:1px solid gray;
}
/* flex-container: 부모요소 : float:left 와 유사 */
div.parent1{
display: flex; /* 자식 요소를 flex 하겠다 */
}
/* flex-direction 적용 */
div.parent2{
display: flex;
flex-direction: row-reverse;
}
/* justify-content 적용 */
div.parent3{
display: flex;
justify-content : flex-start;
}
/* align-items 적용 */
div.parent4{
display: flex;
align-items : flex-start;
}
div.parent4>div:nth-child(1) { height: 80px;}
div.parent4>div:nth-child(2) { height: 25px;}
div.parent4>div:nth-child(3) { height: 60px;}
div.parent4>div:nth-child(4) { height: 55px;}
div.parent4>div:nth-child(5) { height: 70px;}
/* flex-wrap 적용 */
div.parent5{
display : flex;
flex-wrap : wrap;
}
</style>
</head>
<body>
<h2>Flex을 이용한 Layout</h2>
<h3>(1) flex을 적용한 예 1</h3>
<div class="parent1 section">
<div>Box-1</div>
<div>Box-2</div>
<div>Box-3</div>
<div>Box-4</div>
<div>Box-5</div>
</div>
<h3>(2) flex-direction : row(default), column, row-reverse, column-reverse</h3>
<div class="parent2 section">
<div>Box-1</div>
<div>Box-2</div>
<div>Box-3</div>
<div>Box-4</div>
<div>Box-5</div>
</div>
<h3>(3) justify-content : 좌우로 정렬방법 지정</h3>
<div class="parent3 section">
<div>Box-1</div>
<div>Box-2</div>
<div>Box-3</div>
<div>Box-4</div>
<div>Box-5</div>
</div>
<h3>(4) align-items : stretch, flex-start, flex-end, center, baseline </h3>
<div class="parent4 section">
<div>Box-1</div>
<div>Box-2</div>
<div>ing-3</div>
<div>Box-4</div>
<div>Box-5</div>
</div>
<h3>(5) flex-wrap: overflow되는 content의 처리 </h3>
<div class="parent5 section">
<div>Box-1</div>
<div>Box-2</div>
<div>ing-3</div>
<div>Box-4</div>
<div>Box-5</div>
<div>Box-6</div>
</div>
</body>
</html>
