display란?
display란 간단하게 말해 각 요소를 어떻게 표시할지 정해주는 속성이다.
display 속성 종류
display 종류는 여러가지가 있다.
inline, block, inline-block, flex, list-item, none 등등 많은 속성을 줄 수 있지만 이 글에서는 기본적으로 알아야 될 속성인 inline, block, inline-block, none 속성에 대해 알아 볼 것이다. 이따가 flex와 grid도 알아 볼 것이다.
display: block;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 3rem;
}
div {
background-color: red;
}
span {
background-color: orange;
}
</style>
</head>
<body>
<div>블럭 태그</div>
<span>인라인 태그</span>
</body>
</html>
사진을 보면 알겠지만 각각 크기가 다른걸 볼 수 있다. 왜 그럴까?
바로 div태그는 기본값으로 display: block 속성을 가지고 있기 때문이다.
blcok 속성의 특징을 보자면
1. 따로 값을 안주면 가로 한줄을 다 차지한다.
(가로 한줄을 다 차지한 모습)
2. width와 height 값을 줄 수 있다.
(...)
div {
background-color: red;
width: 400px;
height: 300px;
}
(...)(가로 세로 값을 줬더니 그 값 만큼 커진 모습)
3. 위에서 아래로 쌓이는 block 이라고 생각하면 편하다
(...)
.block1 {
background-color: red;
}
.block2 {
background-color: blue;
width: 300px;
height: 500px;
}
.block3 {
background-color: green;
width: 600px;
height: 300px;
}
(...)
<div class="block1">블럭 태그1</div>
<div class="block2">블럭 태그2</div>
<div class="block3">블럭 태그3</div>
(...)(block 처럼 위에서 아래로 쌓이는 모습)
4. block 태그를 기본적으로 가지고 있는 대표적인 태그는 div, p, h1, section 등이 있다.
(...)
div {
background-color: red;
}
p {
background-color: blue;
}
section {
background-color: green;
}
h1 {
background: purple;
}
(...)
<div>div 태그</div>
<p>p 태그</p>
<section>sectiom 태그</section>
<h1>h1 태그</h1>
(...)(div, p, section, h1 태그가 기본값이 block이라 위에서 쌓이는 모습 + p와h1은 마진이 기본적으로 설정 되어있어서 아까처럼 따닥따닥 안 붙은 모습)
display: inline;
그럼 인라인 태그는 뭘까? inline 태그에 특징을 적어보자면
1. block 속성 처럼 가로 한 줄을 다 차지하는게 아닌 콘텐츠 내용만큼 크기를 가진다.
(콘텐츠 크기 만큼 크기를 가진 모습)
2. width와 height 값을 줄 수 없다.
(inline 태그는 박스형태가 아니다 보니 크기를 줄 수 없다.)
3. 위에서 아래로 쌓이는게 아닌 옆으로 나란히 붙는다 라고 생각하면 편하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 3rem;
}
div {
background-color: red;
}
span {
background-color: orange;
}
</style>
</head>
<body>
<div>블럭 태그</div>
<span>인라인 태그1</span>
<span>인라인 태그2</span>
<span>인라인 태그3</span>
</body>
</html>(inline 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.
이와같은 특징은, 인라인 요소를 가진 태그들이 서로 나열되었을 때, 최소한 같은 줄에 같은 높이로 가지런히 위치하면서, 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 때문이다.)
4. inline 태그를 기본적으로 가지고 있는 대표적인 태그는 span, a, input, button 등이 있다.
(...)
span {
background-color: orange;
}
a {
background-color: aqua;
}
input {
background-color: darkgoldenrod;
}
button {
background-color: papayawhip;
}
(...)
<span>span 태그</span>
<a>a 태그</a>
<input type="text" value="input 태그">
<button>button 태그</button>
(...)(span, a, input, button 태그가 기본값이 inline이라 옆으로 쌓이는 모습)
display: inline-block;
inline-block는 말 그대로 인라인과 블럭 속성이 합쳐진 속성이다.
간단한게 특징만 알아보자면
1. 줄바꿈이 이루어지지 않는다.
2. width와 height를 지정 할 수 있다.
3. 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 크기를 가진다.
display: none;
none은 말 그대로 화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 하는 속성 이다.
float란?
float를 그대로 번역하자면 '띄우다'라는 뜻이다.
float는 css에서 정렬하기 위해 사용되는 속성이다.
예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나
각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다.
! 플롯 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없다.
float 속성 종류
float의 자주 사용하는 속성은
float: none;(기본값)float: left;float: right;
float: none;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 1.5rem;
}
img {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: none;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>float 속성 설명</h1>
<img src="img/intro.png" alt="">
<div>
float는 css에서 정렬하기 위해 사용되는 속성이다.
예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나
각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다.
</div>
</body>
</html>float: left;
(...)
img {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: left;
}
(...)
(왼쪽 방향으로 공중에 띄움)
float: right;
(...)
img {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: right;
}
(...)
(오른쪽 방향으로 공중에 띄움)
floating 모델 살펴보기
(이미지 출처 https://webclub.tistory.com/606)
중요한 사실은 플로팅된 요소는 그 요소의 종류에 상관없이 블럭 박스가 된다는 점이다.
인라인 요소인 링크를 플로팅시키는 경우에 이 요소 특성은 블럭 박스로 변경되고 마치 div 인 것처럼 동작하게 된다.
대신 자신의 영역만을 가지고 있는 인라인 블럭 박스처럼 렌더링되는 것이 특이한 점이다.
다시 말해, 플로팅된 요소는 display: inline-block; 을 선언한 것과 동일해지기 때문에 따로 선언해줄 필요는 없다.
clear란?
clear이란 float 속성을 사용하면 그 박스는 공중에 뜬(부유) 상태이기 때문에 레이아웃이 제대로 작동하지 않을 수 있어서 문서의 흐름을 제거 하기 위해 사용된다.
글로 이해하면 잘 이해가 안될탠데 예제를 보자면 이런거다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
}
body {
font-size: 1.5rem;
}
.cont {
background-color: palegreen;
}
img {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: left;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div class="cont">
<h1>float 속성 설명</h1>
<img src="img/intro.png" alt="">
<div class="main">
float는 css에서 정렬하기 위해 사용되는 속성이다.
예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나
각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다.
</div>
</div>
</body>
</html>
사진을 보면 background-color가 제대로 작동하지 않는걸 볼 수 있다. 왜냐면 지금 img는 float를 적용해 부유한 상태이기 때문에 정상적인 요소로 처리가 안되기 때문이다.
이와 같은 문제를 해결하기 위해 clear를 쓰는것이다.
clear 속성 종류
clear 속성은 총 4가지가 있다.
clear: none;(기본값)clear: left;clear: right;clear: both;
clear: left;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
}
body {
font-size: 1.5rem;
}
.cont {
background-color: palegreen;
}
img {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: left;
}
h1 {
text-align: center;
}
div {
clear: left;
}
</style>
</head>
<body>
<div class="cont">
<h1>float 속성 설명</h1>
<img src="img/intro.png" alt="">
<div class="main">
float는 css에서 정렬하기 위해 사용되는 속성이다.
예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나
각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다.
</div>
</div>
</body>
</html>
(clear: left;를 이용하여 좌측에 부유한 문서의 흐름을 제거한 모습)
clear: right;
(...)
.img1 {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: left;
}
h1 {
text-align: center;
}
div {
clear: right;
}
(...)
<img class="img1" src="img/intro.png" alt="">
(...)
(clear: right;를 이용하여 좌측에 부유한 문서의 흐름을 제거한다고 적용 했지만 좌측에 부유한 문서가 없어서 적용이 안된 모습)
(...)
.img1 {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: left;
}
.img2 {
width: 400px;
height: 200px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: right;
}
h1 {
text-align: center;
}
div {
clear: right;
}
(...)
<img class="img1" src="img/intro.png" alt="">
<img class="img2" src="img/pngwing.com.png" alt="">
(...)
(clear: right;를 이용하여 좌측에 부유한 문서의 흐름만 제거한 모습)
clear: both;
(...)
.img1 {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: left;
}
.img2 {
width: 400px;
height: 200px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: right;
}
h1 {
text-align: center;
}
div {
clear: both;
}
(...)
<img class="img1" src="img/intro.png" alt="">
<img class="img2" src="img/pngwing.com.png" alt="">
(...)
(clear: both;를 이용하여 양쪽에 부유한 문서의 흐름을 모두 제거한 모습)
가상클래스를 이용한 clear
clear를 적용하는 방법은 저렇게 클래스를 넣어서 활용할 수도 있지만 가상클래스를 활용하여 clear를 적용시킬 수 있다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
}
body {
font-size: 1.5rem;
}
.cont {
background-color: palegreen;
}
.cont::after {
content: "";
display: block;
clear: both;
}
.img1 {
width: 700px;
height: 350px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: left;
}
.img2 {
width: 400px;
height: 200px;
border: 5px solid black;
margin: 0 10px;
padding: 10px;
float: right;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div class="cont">
<h1>float 속성 설명</h1>
<img class="img1" src="img/intro.png" alt="">
<img class="img2" src="img/pngwing.com.png" alt="">
<div class="main">
float는 css에서 정렬하기 위해 사용되는 속성이다.
예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나
각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다.
</div>
</div>
</body>
</html>
(가상 클래스를 이용해 clear:both; 속성을 준 모습, 가상클래스 말고도 overflow를 이용한 방법도 있는데 현제 권장하고 있는 방법은 가상클래스를 이용해 clear를 사용하는 것이다.)
position이란?
position이란 요소들을 원하는 위치에 배치하기 위해 사용하는 속성이다.
position 속성 종류
position 속성은 총 5가지가 있다.
static(기본값)relativeabsolutefixedsticky
position: static;
위치를 설정할 수 없고, 요소를 일반적인 흐름에 따라 배치된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cont-1 {
width: 150px;
height: 200px;
background-color: palevioletred;
}
.cont-2 {
width: 200px;
height: 400px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="box">
<div class="cont-1">박스1</div>
<div class="cont-2">박스2</div>
</div>
</body>
</html>
position: relative;
요소를 일반적인 흐름에 따라 배치되고, 자기 자신을 기준으로 top, right, bottom, left 값들을 줄 수 있다.
(...)
.cont-1 {
position: relative;
top: 30px;
left: 40px;
(...)
position: absolute;
요소를 일반적인 흐름에서 제거하고, 부모를 기준으로 top, right, bottom, left 값들을 줄 수 있다.(부모가 없다면 <body>를 기준으로 삼는다, 만약 부모가 position: relative;속성을 가지고 있으면 부모를 기준으로 잡는다.)
(...)
.box {
position: relative;
}
.cont-1 {
position: absolute;
top: 30px;
left: 20PX;
width: 150px;
height: 200px;
background-color: palevioletred;
}
(...)
(박스1의 position이 absolute라서 흐름에서 제거해 박스2가 올라온 모습, .cont-1(자식)을 감싸는 .box(부모)는 position이 relative라.box1을 기준으로 이동한 모습)
(...)
.cont-1 {
position: absolute;
top: 30px;
left: 20PX;
width: 150px;
height: 200px;
background-color: palevioletred;
}
(...)
(.cont-1을 감싸는 .box의 position이 기본값(static)이라 <body>(부모)를 기준으로 잡은 모습)
position: fixed;
요소를 일반적인 흐름에서 제거하고, 스크롤과 상관없이 항상 뷰포트의 특정 좌표에 위치를 고정한다.
(...)
body {
height: 100em;
}
.cont-1 {
position: fixed;
top: 30px;
left: 20PX;
width: 150px;
height: 200px;
background-color: palevioletred;
}
(...)
position: sticky
position: sticky는 static과 fixed속성을 다 가지고 있다고 보면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
height: 100em;
display: flex;
}
.cont-1 {
position: sticky;
top: 0px;
left: 200px;
width: 150px;
height: 200px;
background-color: palevioletred;
}
.cont-2 {
position: fixed;
top: 100px;
left: 0px;
width: 150px;
height: 200px;
background-color: powderblue;
}
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<div class="box">
<div class="cont-1">sticky 박스</div>
<div class="cont-2">fixed 박스</div>
</div>
</body>
</html>
(위치값이 설정한 위치에 도달하기 전까지는 static, 도달 이후에는 fixed처럼 행동하게 된다.)
position: sticky가 동작하지 않는 이유
- 도달 위치 설정이 되어 있는지 확인
sticky요소는top, bottom, left, right속성 중 하나는 반드시 필요하다. 설정 된 위치에서fixed속성처럼 동작해야 하는데 기준 위치가 없기 때문에 동작하지 않는 경우 이다.
- 부모 또는 조상 노드에 overflow 속성이 설정되어 있는지 확인
sticky속성의 경우, 부모 또는 조상 노드에overflow설정이 아래와 같이 설정되어 있으면 동작하지 않는다.
- overflow: hidden
- overflow: scroll
- overflow: auto
- 부모 노드의 height가 설정되어 있는지 확인
sticky속성을 갖는 요소의 부모 노드는 반드시height가 설정되어 있어야한다. 그렇지 않으면sticky속성의 요소는stiatc속성처럼 동작하게 된다.
height: xx%;같이 퍼센트로 설정한 경우에는 동작하지 않는다.올바른 예
height: auto
height: unset
height: 100vh
height: 1000px
height: 5em
display: flex란?
설명을 하기전에 이 글에 나온
flex, gird관련 정보들은https://studiomeal.com/archives/197에 더 자세히 나와 있고 저 블로그에서 참고한 내용이 많습니다. 또한 인프런에 좋은 강의도 있으니 레이아웃을 잡기 어려운 분들은 한번 쯤 보는것도 나쁘지 않을거 같습니다.
display는 많은 속성이 있다. 위에서 본 것처럼 inline, block, lnline-block 등 많은 속성이 있지만 display: flex와 gird는 따로 설명할게 많아 따로 구분을 해놨다.
본론으로 들어가 display: flex란 Flexible Box, Flexbox라고 부르기도 한다. 레이아웃을 만들때 보통 float, position등을 사용하는데 이는 너무 복잡하고, 어려울 때도 있다. 이를 해결하기 위해 CSS3때 flex라는 속성이 생겼다.
Flex 속성 종류
Flex 속성을 알기전에 Flex레이아웃을 만들려면 기본 조건이 필요하다.
Flex레이아웃을 만들려면 기본적으로 부모와 자식들이 필요하다.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것 이라고 생각하면 된다.
Flex의 속성은 두가지로 나뉜다.
- 컨테이너에 적용하는 속성
- 아이템에 적용하는 속성
이중에 먼저 컨테이너에 적용하는 속성을 알아보자.
컨테이너에 적용하는 속성
display: flex;
Flex 레이아웃을 만들기 위해 꼭 필요한 속성이다. 이 속성을 컨테이너에 적용시키면 된다.
일단은 적용전 모습부터 보자.
(Flex적용 전)
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.item1 {
background-color: darkgoldenrod;
}
.item2 {
background-color: orange;
}
.item3 {
background-color: moccasin;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Flex Item1</div>
<div class="item2">Flex Item2 Flex Item2</div>
<div class="item3">Flex Item3 Flex Item3 Flex Item3</div>
</div>
</body>
</html>
(FLex적용 후)
(...)
.container {
display: flex;
padding: 3px;
background-color: black;
}
(...)
Flex 아이템들은 inline요소처럼 가로 방향으로 배치되고, 자신이 가진 width 만큼만 공간을 차지하는걸 볼 수 있다.
height는 컨테이너의 높이만큼 늘어난다.
나중에 정렬 속성을 통해 height를 어떻게 처리할지도 조정할 수 있다.
inline-flex라는 속성도 있는데, 이건 block속성과 inline-block의 관계를 생각하면 된다. inline-flex는 inline-block처럼 동작한다 생각하면 편하다.
(...)
<div class="container">
<div class="item1">Flex Item1</div>
<div class="item2">Flex Item2 Flex Item2</div>
<div class="item3">Flex Item3 Flex Item3 Flex Item3</div>
</div>
<span>ABCDEFG</span>
(...)
(컨테이너에 inline-flex 속성을 줘서 inline-block 처럼 동작해 <span>태그가 컨테이너 옆에 붙은 모습)
(이미지 출처https://studiomeal.com/archives/197)
아이템들이 배치된 방향의 축을 메인축(Main Axis), 메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)이라고 부른다.
뜬금 없지만, 앞으로 메인축을 "오뎅꼬치"라고 생각하자.
오뎅(Flex 아이템)들이 꼬치(메인축)을 따라 쭉 꽂혀서 정렬된 상태를 생각하면 된다.
flex-direction
아이템들이 배치되는 축의 방향을 결정하는 속성이다. 즉 "메인축(오뎅꼬치)의 방향을 가로로 할거냐 세로로 할거냐를 정해주는 속성이다.
flex-direction의 속성은 총 4가지가 있다.
- row (기본값)
- row-reverse
- column
- column-reverse
flex-direction: row;
기본값이다.
(...)
.container {
display: flex;
flex-direction: row;
padding: 3px;
background-color: black;
}
(...)
flex-direction: row-reverse;
아이템들이 역순으로 가로 배치된다.
(...)
flex-direction: row;
(...)
flex-direction: column;
아이템들이 blcok요소처럼 세로 방향으로 배치된다.
(...)
flex-direction: column;
(...)
flex-direction: column-reverse;
아이템들이 역순으로 세로 방향으로 배치된다.
flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.
flex-wrap의 속성은 총 3가지가 있다.
- nowrap (기본값)
- wrap
- wrap-reverse
flex-wrap: nowrap
기본값이다.
(...)
.container {
display: flex;
flex-wrap: nowrap;
border: 3px solid black;
}
(...)
flex-wrap: wrap
컨테이너의 여유 공간이 없을 때 줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작한다.
(...)
flex-wrap: wrap;
(...)
flex-wrap: wrap-reverse;
여유 공간이 없으면 줄바꿈을 하는데, 아이템들을 역순으로 배치한다.
(...)
flex-wrap: wrap-reverse;
(...)
flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
flex-direction, flex-wrap의 순으로 한 칸 떼고 쓰면 된다.
(...)
.container {
display: flex;
flex-flow: row wrap;
border: 3px solid black;
}
(...)
(flex-flow속성을 사용하여flex-direction: row와 flex-wrap: wrap 속성을 동시에 준 모습)
justify-content
이제 정렬 대해 알아볼건데 그전에 밑에 사진을 봐보자
이건 나중에 display: grid;까지 이어지니까 지금 알아 두는게 좋다.
justify는 메인축(오뎅꼬치) 방향으로 정렬align은 수직축(오뎅을 뜯어내는) 방향으로 정렬
(이미지 출처https://studiomeal.com/archives/197)
본론으로 들어가
justify-content의 속성은 총 6가지가 있다.
-
flex-start (기본값)
-
flex-end
-
center
-
space-between
-
space-around
-
space-evenly
justify-content: flex-start
기본값이다.
아이템들을 시작점으로 정렬한다.
flex-direction: row(가로 배치)일 때는 왼쪽, flex-direction: column(세로 배치)일 때는 위쪽으로 배치한다.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
justify-content: flex-start;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
justify-content: flex-start;
}
.item1 {
background-color: darkgoldenrod;
}
.item2 {
background-color: orange;
}
.item3 {
background-color: moccasin;
}
</style>
</head>
<body>
<div class="row-container">
<div class="item1">Flex Item1 Flex Item1</div>
<div class="item2">Flex Item2 Flex Item2 Flex Item2</div>
<div class="item3">Flex Item3 Flex Item3 Flex Item3 Flex Item3</div>
</div>
<br>
<div class="column-container">
<div class="item1">Flex Item1 Flex Item1</div>
<div class="item2">Flex Item2 Flex Item2 Flex Item2</div>
<div class="item3">Flex Item3 Flex Item3 Flex Item3 Flex Item3</div>
</div>
</body>
</html>
justify-content: flex-end
아이템들을 끝점으로 정렬한다.
flex-direction: row(가로 배치)일 때는 오른쪽, flex-direction: column(세로 배치)일 때는 아래로 배치한다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
justify-content: flex-end;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
justify-content: flex-end;
height: 100px;
}
(...)
justify-content: center
아이템들을 가운데로 정렬한다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
justify-content: center;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
justify-content: center;
height: 100px;
}
(...)
justify-content: space-between
아이템들의 사이에 균일한 간격을 만들어 준다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
justify-content: space-between
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
justify-content: space-between
height: 100px;
}
(...)
justify-content: space-around
아이템들의 둘레에 균일한 간격을 만들어 준다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
justify-content: space-around;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
justify-content: space-around;
height: 100px;
}
(...)
justify-content: space-evenly
아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.
참고로 IE와 엣지(Edge)에서는 지원이 안된다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
justify-content: space-evenly;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
justify-content: space-evenly;
height: 100px;
}
(...)
align-items
아까 위에서 봤듯이 align은 수직축 방향으로 정렬한다는 뜻이다.
align-items의 속성은 총 5가지가 있다.
-
stretch (기본값)
-
flex-start
-
flex-end
-
center
-
baseline
align-items: stretch
기본값이다.
아이템들이 수직축 방향으로 끝까지 늘어난다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
align-items: stretch;
height: 100px;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
align-items: stretch;
height: 100px;
}
(...)
align-items: flex-start
아이템들을 시작점으로 정렬한다.
flex-direction: row(가로 배치)일 때는 위, flex-direction: column(세로 배치)일 때는 왼쪽으로 배치된다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
align-items: flex-start;
height: 100px;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
align-items: flex-start;
height: 100px;
}
(...)
align-items: flex-end
아이템들을 끝으로 정렬한다다.
flex-direction: row(가로 배치)일 때는 아래, flex-direction: column(세로 배치)일 때는 오른쪽으로 배치된다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
align-items: flex-end;
height: 100px;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
align-items: flex-end;
height: 100px;
}
(...)
align-items: center
아이템들을 가운데로 정렬한다.
(...)
.row-container {
display: flex;
border: 3px solid black;
flex-direction: row;
align-items: center;
height: 100px;
}
.column-container {
display: flex;
border: 3px solid black;
flex-direction: column;
align-items: center;
height: 100px;
}
(...)
align-items: baseline
아이템들을 텍스트 베이스라인 기준으로 정렬하는 속성인데... 별로 쓸일도 없고 활용하는 사례도 거의 없으므로 패스하겠다.
align-content
flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성이다.
align-content의 속성은 총 7개가 있다.
-
stretch (기본값)
-
flex-start
-
flex-end
-
center
-
space-between
-
space-around
align-content: stretch;
기본값이다.
align-items: stetch;처럼 수직축 방향으로 쭉 늘어난다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.row-container {
display: flex;
border: 3px solid black;
height: 100px;
flex-wrap: wrap;
align-content: stretch;
}
.item1 {
background-color: darkgoldenrod;
}
.item2 {
background-color: orange;
}
.item3 {
background-color: moccasin;
}
</style>
</head>
<body>
<div class="row-container">
<div class="item1">Flex Item1 Flex Item1</div>
<div class="item2">Flex Item2 Flex Item2 Flex Item2</div>
<div class="item3">Flex Item3 Flex Item3 Flex Item3 Flex Item3</div>
</div>
</body>
</html>
align-content: flex-start;
아이템들을 시작점으로 정렬한다.
flex-direction: row(가로 배치)일 때는 위, flex-direction: column(세로 배치)일 때는 왼쪽으로 배치된다.
(...)
.row-container {
display: flex;
border: 3px solid black;
height: 100px;
flex-wrap: wrap;
align-content: flex-start;
}
(...) 
align-content: flex-end;
아이템들을 끝으로 정렬한다다.
flex-direction: row(가로 배치)일 때는 아래, flex-direction: column(세로 배치)일 때는 오른쪽으로 배치된다.
(...)
.row-container {
display: flex;
border: 3px solid black;
height: 100px;
flex-wrap: wrap;
align-content: flex-end;
}
(...) 
align-content: center;
아이템들을 가운대로 정렬합니다.
(...)
.row-container {
display: flex;
border: 3px solid black;
height: 100px;
flex-wrap: wrap;
align-content: center;
}
(...) 
align-content: space-between;
아이템들의 사이에 균일한 간격을 만들어 준다.
(...)
.row-container {
display: flex;
border: 3px solid black;
height: 100px;
flex-wrap: wrap;
align-content: space-between;
}
(...) 
align-content: space-between;
아이템들의 둘레에 균일한 간격을 만들어 준다.
(...)
.row-container {
display: flex;
border: 3px solid black;
height: 100px;
flex-wrap: wrap;
align-content: space-around;
}
(...) 
아이템에 적용하는 속성
flex-basis
flex-basis는 Flex 아이템의 기본 크기를 설정하는 속성이다.
flex-direction: row일 때는 너비의 크기,flex-direction: column일 때는 높이의 크기를 설정한다.
속성은 따로 없고 px, em, rem, %같은 단위가 들어갈 수 있다.
기본값인 auto는 해당 아이템의 width값을 사용하고 width값을 따로 설정하지 않으면 컨텐츠의 크기가 된다. flex-basis에는 content라는 값을 넣을 수 있는데 이 값은 콘텐츠의 크기로, width를 따로 설정하지 않은 경우와 같다.
flex-basis와 width의 차이
아래 예제를 잠깐 봐보자
참고로 word-wrap: break-word;이라는 속성이 있는데 이 속성은 간단하게 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하는 속성이다.
flex-basis: 100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
word-wrap: break-word;
}
.row-container {
display: flex;
border: 2px solid black;
flex-direction: row;
}
.item {
border: 1px solid black;
padding: 3px;
flex-basis: 100px;
}
.item:nth-child(1) {
background-color: darkgoldenrod;
}
.item:nth-child(2) {
background-color: orange;
}
.item:nth-child(3) {
background-color: moccasin;
}
</style>
</head>
<body>
<div class="row-container">
<div class="item">AAAAA</div>
<div class="item">B</div>
<div class="item">CCCCCCCCCCCCCCCCCC</div>
</div>
</body>
</html>
flex-basis: 100px;값을 주어서 width가 100px이 안넘는 A와, B는 100px로 늘어나고 100px이 넘는 C는 그대로 유지가 되는걸 볼 수 있다.
width: 100px;
(...)
.item {
border: 1px solid black;
padding: 3px;
width: 100px;
}
(...)
반면 width: 100px;을 주면 100px을 넘는 C는 강제적으로 100px로 맞춰진다.
flex-grow
flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다
flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.
기본값은 0이다.
flex-grow: 0;(...) .item { border: 1px solid black; padding: 3px; flex-grow: 0; } (...)
flex-grow: 1;(...) .item { border: 1px solid black; padding: 3px; flex-grow: 1; } (...)
flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나눠 가진다고 생각하면 된다.
예시를 하나 더 보면 이해가 될 것이다.
(...)
.item {
border: 1px solid black;
padding: 3px;
}
.item:nth-child(1) {
background-color: darkgoldenrod;
flex-grow: 1;
}
.item:nth-child(2) {
background-color: orange;
flex-grow: 0;
}
.item:nth-child(3) {
background-color: moccasin;
flex-grow: 1;
}
(...)
flex-shrink
flex-shrink는 flex-grow와 쌍을 이루는 속성이다. 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자값이 들어가고, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한 박스로 변하고 flex-basis보다 작아진다.
flex-shrink를 0으로 설정하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있다. 고정크기는 width로 설정한다.
기본값은 1이다.
예제를 봐보자
.item:nth-child(1) {
background-color: darkgoldenrod;
flex-shrink: 0;
width: 300px;
}
.item:nth-child(2) {
background-color: orange;
flex-shrink: 0;
width: 300px;
}
첫번째 아이템과, 두번째 아이템 모두 flex-shrink: 0;을 준 모습이다. 둘다 0을 주었기 때문에 아이템들이 유연하게 안 줄어들고 300px로 고정되어 컨테이너의 너비를 넘겨 벗어나는 상황이다.
다른 예시를 봐보자
.item:nth-child(1) {
background-color: darkgoldenrod;
flex-shrink: 0;
width: 150px;
}
.item:nth-child(2) {
background-color: orange;
}
첫번째 아이템에 flex-shrink: 0;을 줘서 150px로 고정이 되게끔 하여 브라우저가 작아져도 150px를 그대로 유지하는 모습이다.
flex
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성이다.
이 세 속성들은 서로 관련이 깊기 때문에, 이 축약형을 쓰는 편이 여러모로 편리하다.
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}주의할 점은, flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 된다.
예시를 더 봐보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
word-wrap: break-word;
}
.row-container {
display: flex;
border: 2px solid black;
flex-wrap: wrap;
}
.item {
border: 1px solid black;
padding: 3px;
flex: 1 1 40%;
}
</style>
</head>
<body>
<div class="row-container">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</body>
</html>
flex-wrap: wrap;를 설정하여 컨테이너에 공간이 부족하면 아이템들을 밑으로 내려가게 설정을 하고, 아이템들의 flex-basis값을 40%를 주어서 한 줄에 2개의 아이템만 들어가게 설정을 해놨다.
만약 여기서 flex-basis값을 30%를 주게되면 아래 사진처럼 3단 컬럼이 된다.
또 여기서 flex-basis: 35%를 주게 된다면 아래 사진처럼 3개가 들어갈 공간이 없기 때문에 나머지 하나는 다음줄로 넘어간다.
align-self
align-items의 아이템 버전이다. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬이다.
align-self의 속성은 총 6개이다.
-
auto (기본값)
-
stretch
-
flex-start
-
flex-end
-
center
-
baseline
align-self는 기본적으로 align-items 설정을 상속 받습니다.
align-self는 align-items보다 우선권이 있다. 전체 설정보다 각각의 개별 설정이 우선한다는 것이다.
auto외의 나머지 값들은 align-items와 동일하므로 따로 설명은 안하겠다.
display: grid란?
grid는 2차원(행과 열)의 레이아웃 시스템을 제공한다.
flex는 한 뱡향 레이아웃 (1차원)gird는 두 뱡항 레이아웃 (2차원)
flex도 쉽게 레이아웃을 만들 수 있지만 비교적 단순한 1차원 레이아웃을 만들 때 사용하며, 좀 더 복잡한 레이아웃을 만들 때 gird를 사용하면 편하다.
grid 속성 종류
grid레이아웃을 만들려면 flex와 똑같이 기본적으로 부모와 자식들이 필요하다.
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>flex와 똑같이 컨테이너가 grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것 이라고 생각하면 된다.
gird의 속성도 두가지로 나뉜다.
- 컨테이너에 적용하는 속성
- 아이템에 적용하는 속성
속성을 알기전에 grid를 알기전에 한번 보면 좋은 사진을 준비했다.
(이미지 출처: https://studiomeal.com/archives/533)
지금은 굳이 다 외울 필요는 없다. 그냥 알고만 있으라는 것
- 그리드 컨테이너 (Grid Container)
display: grid를 적용하는,grid의 전체 영역이다.grid컨테이너 안의 요소들이grid규칙의 영향을 받아 정렬된다고 생각하면 된다. 위 코드<div class=”container”></div>가grid컨테이너 라는 것이다.
- 그리드 아이템 (Grid Item)
grid컨테이너의 자식 요소들이다. 바로 이 아이템들이grid규칙에 의해 배치되는 거다. 위 코드에서<div class=”item”></div>가grid아이템이다.
- 그리드 트랙 (Grid Track)
grid의 행(Row) 또는 열(Column)
- 그리드 셀 (Grid Cell)
grid의 한 칸을 가리키는 말이다.<div>같은 실제 html 요소는 그리드 아이템이고, 이런grid아이템 하나가 들어가는 가상의 칸 이라고 생각하면 편하다.
- 그리드 라인(Grid Line)
grid셀을 구분하는 선이다.
- 그리드 번호(Grid Number)
grid라인의 각 번호이다.
- 그리드 갭(Grid Gap)
grid셀 사이의 간격이다.
- 그리드 영역(Grid Area)
grid라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합이다.
컨테이너에 적용하는 속성
display: grid;
gird 레이아웃을 만들기 위해 꼭 필요한 속성이다. 이 속성을 컨테이너에 적용시키면 된다.
block요소라면 이 한 줄 만으로는 속성을 적용해도 아무 변화가 없다.
.container {
display: grid;
/* display: inline-grid; */
}inline-grid는 inline-flex와 똑같이 작동한다 보면 된다.
grid-template-rows, columns
컨테이너에 grid 트랙의 크기들을 지정해주는 속성이다.
여러가지 단위와 여러 함수를 넣을 수 있고 섞어서 쓸 수도 있다.
grid-template-columns: 100px 200px 300px;<style> .container { padding: 8px; background: gray; display: grid; grid-template-columns: 100px 200px 300px; } .item { padding: 8px; border: 1px solid black; color: black; background: #aaa; } </style> </head> <body> <div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">E</div> <div class="item">F</div> <div class="item">G</div> <div class="item">H</div> <div class="item">I</div> </div> </body>
(grid-template-columns: 100px 200px 300px;를 줘서 첫번째 열에는 100px, 두번째는 200px, 세번째는 300px를 주겠다는 뜻이다.)
grid-template-columns: 1fr 3fr 1fr;(...) .container { padding: 8px; background: gray; display: grid; grid-template-columns: 1fr 3fr 1fr; } (...)
(grid-template-columns: 1fr 3fr 1fr;를 줘서 첫번째 열에는1fr, 두번째는3fr, 세번째는1fr를 줘서 균일하게 1:1:1 비율로column을 만들겠다는 뜻이다.)
물론 고정크기와 가변크기를 이용해 아래 코드처럼 섞어 쓸 수도 있다.
grid-template-columns: 1fr 200px 1fr;
(첫번쨰 열에는 가변크기인 1fr를 주고, 두번째 열에는 고정크기인 200px를 주고, 세번째도 가변크기인 1fr를 줘서 양옆 1fr를 설정한 column은 1:1 비율로 유연하게 움직이고 가운데 200px을 설정한 column은 200px로 고정된다.)
repeat
grid-template-rows, columns에는 repeat라는 반복되는 값을 자동으로 처리할 수 있는 함수를 사용할 수 있다.
사용법은 간단하다 repeat(반복휫수, 반복값)을 적어주면 된다.
예를들어 grid-template-columns을 1fr 1fr 1fr 1fr을 주고 싶으면 grid-template-columns: repeat(4, 1fr);을 주면 된다.
repeat(3, 2fr 1fr 4fr); 같은 패턴도 가능하다.
minmax
최솟값과 최댓값을 지정하는 함수이다.
minmax(100px, auto)의 의미는 최소한 100px, 최대는 auto(자동)로 늘어나게 한다는 뜻이다. 즉, 아무리 내용의 양이 적어도 최소 100px를 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 설정한다는 뜻이다.
아래 예시를 보면 더 쉽게 이해할 수 있다.
(...)
.container {
padding: 8px;
background: gray;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(200px, auto));
}
(...)
(A, B, C와 G,H,I는 안에 내용이 없는데도 최솟값인 200px로 늘어난 모습)
auto-fill, auto-fit
auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.
auto-fill을 먼저 살펴 보자.
(...)
.container {
padding: 8px;
background: gray;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}
(...)
grid-template-columns값을 정하지 않고auto-fill값을 주었기 때문에 설정된 너비인 20% 만큼 최대한 공간을 차지한 모습, 하지만 만약 셀이 5개보다 마자라면 밑에 사진처럼 공간이 남을 것이다.
원래 의도한게 저 사진이라면 괜찮지만 만약 저 남은 컨테이너의 공간을 꽉 채우고 싶다면 auto-fit을 사용하면 된다. 밑에 사진은 auto-fill이 아니라 auto-fit속성을 적용한 사진이다.
row, column-gap
그리드 셀 사이의 간격을 설정하는 속성이다.
row-gap, column-gap속성이 있으며 이 둘을 합친 축양형도 있는데 그건 gap속성이다.
(...)
.container {
padding: 8px;
background: gray;
display: grid;
grid-template-columns: repeat(3, minmax(20%, auto));
gap: 20px 10px
}
(...)
(gap: 20px 10px은 row-gap:20px, column-gap: 10px값과 같은 뜻이다. row와 column을 각각 10px을 주고 싶으면 gap: 10px을 적으면 된다.) `
grid-auto-columns, rows
grid-template-columns, grid-template-rows의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성이다.
예시를 봐보자
<style>
.container {
padding: 8px;
background: gray;
display: grid;
grid-template-columns: repeat(3, minmax(20%, auto));
grid-template-rows: repeat(3, minmax(100px, auto));
gap: 20px 10px;
}
.item {
padding: 8px;
border: 1px solid black;
color: black;
background: #aaa;
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia temporibus necessitatibus
consequatur explicabo at animi ut fugit sit maiores. Nemo mollitia cum, cupiditate possimus voluptate
veritatis veniam? Omnis id maiores mollitia provident numquam exercitationem facilis! In optio quam iusto
architecto</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>
</body>
이런 코드가 있다고 쳐보자
각 셀마다 최소 100px의 높이를 확보하고, 컨텐츠가 높이 100px을 넘어가면 알아서 자동으로 늘어나도록 하려고 저 코드를 썼는데, 우리가 만든 예시가 row가 3개였기 때문에 repeat 횟수를 3으로 지정해 주었다. 근데 만약 아래 코드처럼 row갯수가 늘어나거나 모르는 상태면 어떡해야할까?
(...)
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia temporibus necessitatibus
consequatur explicabo at animi ut fugit sit maiores. Nemo mollitia cum, cupiditate possimus voluptate
veritatis veniam? Omnis id maiores mollitia provident numquam exercitationem facilis! In optio quam iusto
architecto</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
<div class="item">I</div>
<div class="item">I</div>
<div class="item">I</div>
<div class="item">I</div>
<div class="item">I</div>
<div class="item">I</div>
(...)
(grid-template-rows에 repeat값을 3을 주었기 때문에 3줄만 적용된 모습)
이런 문제를 해결하기 위해 grid-auto-rows를 쓴다. 다음 예시 코드는 grid-auto-rows를 쓴 코드이다.
(...)
.container {
padding: 8px;
background: gray;
display: grid;
grid-template-columns: repeat(3, minmax(20%, auto));
grid-auto-rows: minmax(100px, auto);
gap: 20px 10px;
}
(...)
이렇게 grid-auto-rows를 써주면, 굳이 횟수를 지정해서 반복할 필요 없이 알아서 처리된다.
grid-column, grid-row
각 셀의 영역을 지정해주는 속성이다.
grid-column은 grid-column-start, grid-column-end의 축양형이고
grid-row는 grid-row-start, grid-row-end의 축약형이다.
주의할 점은 영역을 지정할때 셀 번호가 아닌 라인 번호를 적어야한다.
grid-column
(...)
<style>
.container {
padding: 8px;
background: gray;
display: grid;
grid-template-columns: repeat(3, minmax(20%, auto));
grid-auto-rows: minmax(100px, auto);
gap: 20px 10px;
}
.item {
padding: 8px;
border: 1px solid black;
color: black;
background: #aaa;
}
.item:nth-child(1) {
grid-column: 1/3;
}
</style>
(...)
(첫번째 아이템에 grid-column: 1/3;을 넣어 첫번째 column라인부터 세번째 column라인까지 영역을 차지한 모습)
grid-row
(...)
<style>
.container {
padding: 8px;
background: gray;
display: grid;
grid-template-columns: repeat(3, minmax(20%, auto));
grid-auto-rows: minmax(100px, auto);
gap: 20px 10px;
}
.item {
padding: 8px;
border: 1px solid black;
color: black;
background: #aaa;
}
.item:nth-child(1) {
grid-column: 1/3;
grid-row: 1/6;
}
</style>
(...)
(첫번째 아이템에 grid-row: 1/6;을 넣어 첫번째 row라인부터 여섯번째 row라인까지 영역을 차지한 모습)
레이아웃을 잡을 때 무조건 flex와 grid 속성을 써야할까?
내가 여러 문서에서 조사한 결과 내린 결론은 '유동적으로 써야한다.' 가 결론이였다.
이유는 각각 장단점이 있고, 각 브라우저마다 flex와 grid라는 속성을 완벽하게 지원하지 않는 브라우저들도 있다.
flex와 grid 기능은 신기술이다. 신기술인 만큼 편하고 유용하지만 아직까지 많이 안 쓰이고 있는 이유는 이러한 크로스브라우징에 관한 문제 때문이다.
참고로 브라우저가 내가 원하는 속성이 지원하는지 알아보는 방법은 밑에 나오는 사이트를 들어가면 알 수 있다.
https://caniuse.com/
- 초록색: 지원함
- 빨간색: 지원 안함
- 노란색: 부분적으로 지원함
- 회색: 지원여부 모름
느낀점
평소에 레이아웃을 만들 때 어떤 속성, 어떤 값을 설정 해야할지 막막하고, 막상 해도 레이아웃이 깨지거나, 속성값이 제대로 안들어가는 경우가 많았는데, 이렇게 벨로그에 공부한 걸 정리하고, 내가 직접 코드를 적어보니까 기본적인 레이아웃은 잡을 수 있을거 같다는 자신감과, 왜 레이아웃이 깨지는지, 왜 속성값이 제대로 안들어가는지 이유를 정확히 알게되었고, 다른 복잡한 레이아웃을 만들고 싶다는 욕구가 생기고 더 깊게 배우고 싶다는 생각이 들었다.
참고 사이트
