Web/HTML&CSS
html 요소의 가로 배치
- -
반응형
일반적으로 화면을 구성할 때는 <div>를 이용한다.
block 타입 요소인 <div>는 기본적으로 한 줄을 차지하며 세로 방향으로 쌓인다.
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.box {
box-sizing: border-box;
height: 100px;
border: 1px solid blue;
}
#box1 {
background: skyblue;
width: 20%;
}
#box2 {
background: lime;
width: 80%;
}
#box3 {
width: 100%;
background: yellowgreen;
}
#outer {
overflow: hidden;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box" id="box3">box3</div>
</body>
</html>필요에 따라 요소를 가로 방향으로 배치하기 위해서는 float 속성을 사용한다.
float을 사용하면 해당 요소를 붕~ 띄우게 되고 float 되지 않은 요소 위로 배치된다.
다음은 box1의 float 속성을 left로 처리한 결과이다. float된 요소인 box1이 떠오르면서 box2 위로 표시된다.
box2를 다시 오른쪽으로 float 시키면 box3만 밑으로 들어가게 된다.
#box1 {
float: left;
background: skyblue;
width: 20%;
}
#box2 {
float: right;
background: lime;
width: 80%;
}
float 현상을 중지하기 위해서는 clear 속성을 이용할 수 있는데 clear를 사용하면 새로운 줄에 요소가 배치된다.
#box3 {
clear: both;
width: 100%;
background: yellowgreen;
}
그런데 위와같이 작성하면 float되는 요소와 float을 중지하는 요소가 따로 있다 보니 혼선이 오기도 한다.
float되는 요소들이 float과 중지를 같이 가지는 구조가 훨씬 이해하기가 쉽다. 이를 위해 가로로 배치될 요소들을 별로도 wrapping 해서 조상 레벨에서 처리할 수 있다.
다음은 1줄에 사용될 box1과 box2를 outer로 묶고 box3에서 clear:both를 제거한 형태이다.
#box3 {
/* clear: both; */ /*clear: both를 중지한다.*/
width: 100%;
background: yellowgreen;
}
<div id="outer">
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
</div>
<div class="box" id="box3">box3</div>크게 2가지 방법을 사용할 수 있는데
첫번 째 방법은 부모 태그에서 overflow:hidden 속성을 사용한다.
overflow:hidden을 사용하면 자식 태그들의 영역까지만 크기를 확보하고 넘는 크기는 무시한다.
#outer {
overflow: hidden;
}즉 outer의 크기가 확보되고 outer는 float이 아니기 때문에 box1, box2와 무관하게 box3가 잘 배치될 수 있다.
보다 권장되는 방식을 display:flex 속성을 사용한다.
flex는 가장 나중에 등장한 방식으로 부모의 display 속성으로 flex를 선언하면 자식을 가로로 배치한다.
#box4 {
background: skyblue;
width: 20%;
}
#box5 {
background: lime;
width: 80%;
}
#box6 {
background: yellowgreen;
}
#flex{
display: flex;
}
<div id="flex">
<div class="box" id="box4">box4</div>
<div class="box" id="box5">box5</div>
</div>
<div class="box" id="box6">box6</div>이제 box4,box5에는 float 속성이 없어졌고 이들을 감싸고 있는 flex에서 단지 display 속성을 flex로 하면 끝이다.
반응형
'Web > HTML&CSS' 카테고리의 다른 글
| [SCSS] 03. variable (1) | 2022.09.15 |
|---|---|
| [SCSS] 02. Style Rules (0) | 2022.09.13 |
| [SCSS] 01. SCSS 개요 (0) | 2022.09.13 |
| [CSS]height 100% vs 100vh (1) | 2022.09.05 |
| display:flex (0) | 2020.09.10 |
Contents
소중한 공감 감사합니다