AI와 데이터 사이언스의 이론과 실전
CSS - 수평 배치(float, flex), 겹쳐서 출력 본문
오늘은 요소들을 수평으로 배치하거나 겹쳐서 출력하는 방법에 대해 알아보겠습니다.
1. z-index
- html 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index 사용
- 순서는 숫자의 크기가 클수록 위에 위치 작을수록 아래에 위치
- 당연히 요소들이 겹치지 않는 정적 위치 지정 방식은 안됨으로 지정방식 변경 필요
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index</title>
<style>
div#wrapper{position: relative;} /*겹치게만들기위해*/
div.box {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 25px;
}
#b1 {
left: 50px;
top: 50px;
background-color: deeppink;
z-index: 100;
}
#b2 {
left: 120px;
top: 90px;
background-color: gold;
z-index: 0;
}
#b3 {
left: 70px;
top: 130px;
background-color: dodgerblue;
z-index: 10;
}
</style>
</head>
<body>
<h2>z-index</h2>
<div id="wrapper">
<div id="b1" class="box">1번째 idv</div>
<div id="b2" class="box">2번째 idv</div>
<div id="b3" class="box">3번째 idv</div>
</div>
</body>
</html>< 결과 >
z - index 값이 제일 작은 1번째 div가 가장 밑이고 z-index값이 가장 큰 3번째 div가 가장 위인 상태로 겹쳐진 것을 알 수 있습니다.
2. 수평정렬 - float
- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦
- float를 적용한 요소 다음에 나오는 모든 요소들이 끌어올려 수평나열됨, 줄바꿈이 됨으로 애매하게 올려짐
- float를 적용받은 요소의 다음 요소의 정렬 방향 결정(left, right)
- 컨텐츠 크기만큼만 영역을 설정하게 됨(블록)
- float를 적용받은 요소는 다른 요소보다 위쪽(배경보다 위)에 위치
- 과거에 많이 쓰이던 수평 정렬 방법으로 현재는 display : flex로 주로 쓰이나 아직도 사용하는 사이트나 기업이 많음
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
img {
float: left;/*img다음에 나열되는 애들을 왼쪽에 붙여서 float적용한다는 의미*/
margin-right: 20px;
}
</style>
</head>
<body>
<h2>float</h2>
<img src="./images/birthday.png" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ab modi repellat quisquam optio nesciunt minus magnam fugiat, recusandae unde dolores magni id quidem rerum deserunt sint illo iste odio.Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ab modi repellat quisquam optio nesciunt minus magnam fugiat, recusandae unde dolores magni id quidem rerum deserunt sint illo iste odio.
</body>
</html>< 결과 >
케이크 이미지와 문장이 수평정렬 된것을 알 수 있습니다.
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float2</title>
<style>
#box1 {
padding: 20px;
background-color: gold;
float: left;
margin-right: 20px;
}
#box2 {
padding: 20px;
background-color: deepskyblue;
float: left;
margin-right: 20px;
}
#box3 {
padding: 20px;
background-color: coral;
float: left;
margin-right: 20px;
}
#box4 {
padding: 20px;
background-color: palevioletred;
float: left;
}
</style>
</head>
<body>
<h2>float2</h2>
<div id="box1">박스-1</div>
<div id="box2">박스-2</div>
<div id="box3">박스-3</div>
<div id="box4">박스-4</div>
</body>
</html>< 결과 >
2.1. clear
- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
- float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듦
- clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both)
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clear</title>
<style>
body {
margin: 20px 30px;
max-width: 800px;
}
h2 {text-align: center;}
p {
padding: 10px;
text-align: center;
font-size: 20px;
}
#p1 { float: left; width: 38%; background-color: gold;margin-bottom: 20px;}
#p2 { float: right; width: 54%; background-color: deepskyblue;}
#p3 { clear: both; background-color: deeppink;}
</style>
</head>
<body>
<h2>clear</h2>
<div id="p1">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit aperiam et nobis laboriosam itaque porro consequuntur, delectus enim necessitatibus repudiandae culpa eum sint soluta sed. Doloribus ea quos fugit cumque.</p>
</div>
<div id="p2">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, tenetur placeat non rerum voluptates deleniti dolores architecto sapiente illo repellat voluptatem molestiae modi necessitatibus, aspernatur illum. Rem veniam autem esse.</p>
</div>
<div id="p3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero repellat nam eos exercitationem nostrum quae perferendis tenetur porro earum voluptatibus harum repudiandae neque, accusantium incidunt velit voluptas, hic esse rerum.</p>
</div>
</body>
</html>< 결과 >
3. 수평 정렬 - flex
display: flex는 CSS에서 사용되는 속성으로, 플렉스 박스(Flexbox)를 생성하는 데 사용됩니다. Flexbox는 요소의 레이아웃을 수평 또는 수직으로 배치하는 데 매우 효과적이고 강력한 방법을 제공합니다. Flexbox는 주로 웹 페이지의 레이아웃을 구성하고 요소를 배치하는 데 사용됩니다. display: flex를 사용하면 요소의 부모 컨테이너를 플렉스 컨테이너로 설정하고, 그 안에 있는 자식 요소들을 플렉스 아이템으로 정의합니다.
display:flex
3.1. flex 속성
- flex-wrap: 플렉스 라인에 여유가 없을때 요소를 정리할 방법(요소의 위치를 결정)
- nowrap: default, 플렉스요소가 다음줄로 넘어가지 않고 요소의 너비를 알맞게 줄여한줄에 배치
- wrap : flex공간에 여유공간이 없다면 다음줄로 넘김
- wrap-reverse: wrap과 비슷한데 여유공간 없을시 위로 넘김
- flex-direction: 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
- row(default) : 가로로 배치
- row-reverse : 가로로 배치(반대로)
- column : 세로로 배치
- column-reverse : 세로로 배치(반대로)
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스레이아웃</title>
<style>
#container{
width: 1000px;
height: 500px;
margin: 0 auto;
border: 3px solid red;
display: flex;
flex-wrap: nowrap; /* 기본값, height는 알아서 맞워서 늘어남 */
/* flex-wrap: wrap; width가 모자르기 때문에 밑으로 내려감 */
/* flex-wrap: wrap-reverse; 위로 올라감(reverse) */
flex-direction:row-reverse;
/* flex-flow: row-reverse nowrap; */
}
#container > div{
width: 400px;
background-color: gold;
border: 1px solid black;
}
span {
font-size: 50px;
font-weight: bold;
padding: 20px;
}
</style>
</head>
<body>
<h2>플렉스레이아웃</h2>
<div id="container">
<div id="box1"><span>1</span></div>
<div id="box2"><span>2</span></div>
<div id="box3"><span>3</span></div>
</div>
</body>
</html>< 결과 >
- flex-flow: flex-wrap과 flex-direction을 한꺼번에 지정할 수 있는 속성
예) flex-flow : row nowrap - justify-content : 플렉스 요소의 수평 방향 정렬 방식을 설정
- flex-start: 기본값. 앞쪽에서부터 배치
- flex-end: 뒤쪽에서부터 배치
- center : 가운데
- space-between : 요소들 사이에 여유공간을 두고 배치(앞뒤양쪽에 여백없이)
- space-around : 요소들 사이에 여유공간을 두고 배치(앞뒤에 여백두고 배치)
- space-evenly : 요소들 사이에 여유공간을 두고 배치(앞뒤 여백두는데 요소사이간 여백과 같은 크기의 여백)
- align-items: 플렉스 요소의 수직방향 정렬 방식을 설정
- stretch(default) : 아이템들이 수직축 방향으로 height가 늘어남
- flex-start : 요소들이 시작점으로 정렬
- flex-end:요소들이 끝으로 정렬
- center : 요소들이 가운데로 정렬
- baseline : 요소들이 텍스트 베이스라인(글자끝부분) 기준으로 정렬
- align-self: 플렉스 요소에 수직축으로 다른 align 속성값을 설정
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스레이아웃2</title>
<style>
.wrapper {
width: 500px;
height: 200px;
margin: 0 auto;
border: 3px solid red;
}
.wrapper div{
width: 50px;
border: 2px solid black;
background-color: gold;
}
#container {
display: flex;
justify-content: space-around;
/* align-items: stretch; */
align-items: flex-start; /*시작줄기준으로본인height만큼늘어남*/
align-items: flex-end;
align-items: center;
align-items: baseline;
}
#box3 {
align-self: flex-end;
}
#box1 { order: 4;}
#box2 { order: 1;}
#box3 { order: 5;}
#box4 { order: 2;}
#box5 { order: 3;}
</style>
</head>
<body>
<h2>플렉스레이아웃2</h2>
<div id="container" class="wrapper">
<div id="box1">
<p>1</p>
</div>
<div id="box2">
<p>2</p>
</div>
<div id="box3">
<p>3</p>
</div>
<div id="box4">
<p style="font-size: 50px;">4</p>
</div>
<div id="box5">
<p>5</p>
</div>
</div>
</body>
</html>< 결과 >
- order: 플렉스 요소의 순서를 설정
- align-content:플렉스 요소가 설정된 상태에서 요소들이 2줄 이상 되었을때 수직방향 정렬방식을 설정(flex-wrap의 설정값이 wrap으로 설정해야함)
- stretch(default): 위아래로 늘어남
- flex-start: 요소들이 시작점부터 정렬
- flex-end: 요소들이 끝점부터 정렬
- center : 요소들이 가운데로 정렬
- space-between : 요소들 사이에 여유공간을 두고 배치(위아래엔 여백없이)
- space-around : 요소들 사이에 여유공간을 두고 배치(위아래에 여백두고 배치)
- space-evenly : 요소들 사이에 여유공간을 두고 배치(위아래 여백두는데 요소사이간 여백과 같은 크기의 여백)
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스레이아웃3</title>
<style>
.wrapper{
width: 500px;
height: 200px;
margin: 0 auto;
border: 3px solid red;
}
.wrapper > div {
width: 150px;
border: 2px solid black;
background-color: gold;
}
#container{
display: flex;
flex-wrap: wrap;
/* align-content: stretch; 기본값 */
align-content: flex-start; /*컨텐츠 크기만큼 차지하면 위로 딱 붙음*/
align-content: flex-end; /*컨텐츠 크기만큼 차지하면 아래로 딱 붙음*/
align-content: center;
align-content: space-between; /*두줄이니 줄사이에 여백생성*/
align-content: space-around; /*두줄이니 줄사이에 여백생성(위아래도여백생성)*/
}
</style>
</head>
<body>
<h2>플렉스레이아웃3</h2>
<div id="container" class="wrapper">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
</div>
</body>
</html>< 결과 >
'HTML과 CSS > CSS' 카테고리의 다른 글
| CSS - 우선순위 (0) | 2023.10.24 |
|---|---|
| CSS - 반응형 웹, 미디어 쿼리(모바일 버전, 태블릿 버전, pc버전) (0) | 2023.10.23 |
| CSS - 위치지정(static, relative, fixed, sticky, absolute) (1) | 2023.10.21 |
| CSS - display 속성, 폼 태그 (1) | 2023.10.20 |
| CSS - 박스 모델(내용, 패딩, 마진, 테두리) , 박스 사이징 (0) | 2023.10.19 |
'HTML과 CSS/CSS' Related Articles
more
