flexbox는 이름 그대로 유연한 박스를 의미합니다.
flexbox를 사용할때는 지켜야 할 규칙이 있습니다.
첫번째 규칙 : 자식 엘리먼트에 아무것도 적으면 안된다. 부모 엘리먼트에만 명시해야합니다.
<!-- 예를 들면 -->
<body>
<div></div>
<div></div>
<div></div>
</body>
<!-- 여기서 3개의 박스를 움직이고 싶을때 div에는 flexbox에 대한것들을 명시하지 않아도 된다 -->
<!-- div의 부모 엘리먼트인 body에 명시한다는 것이다. -->
위 규칙을 참고하여 flexbox를 만드는법은 간단합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS</title>
<style>
body{
margin: 20px;
<!-- 부모 속성인 body 태그에 display 속성값을 flex로 줬습니다. -->
display: flex;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>display: flex; 코드를 넣어줌으로써 body를 flex컨테이너로 만들어 주는것입니다.
div 태그는 참고로 박스.. 원래의 형태가 블럭의 형태를 띄는 친구들입니다.
(블럭은 블럭 옆에 다른 요소들이 올 수 없습니다.)
하지만 위 코드처럼 flex 속성을 주게되면 여전히 블럭임에도 불구하고 옆에 다른 블럭들이 나란히 놓이게 됩니다. 마치 인라인 처럼요.
우선 이렇게 설정해주게되면 다른 더 많은 속성들을 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS</title>
<style>
body{
margin: 20px;
display: flex;
justify-content: center;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>우선 justify-content: 코드입니다. 위 코드에선 center로 값을 주었죠. 이렇게 실행하면 body의 자식들 (3개의 div) 이 중앙으로 나란히 정렬되게 됩니다. 이외에도
justify-content: flex-start; // 왼쪽으로 정렬
justify-content: flex-end; // 오른쪽 끝으로 정렬
justify-content: space-evenly; // 빈 공간을 같은 크기로 나누어서 배치
justify-content: space-between , justify-content: space-around 등등 많습니다.
즉, 자동으로 공간들의 사이를 계산해서 나눠주는것입니다.
한번 space-evenly를 적용하고 창의 크기를 조절해보세요. 무슨 말인지 알 수 있습니다.
그리고 flexbox 에서는 기본적으로 주축은 수평이고 교차축은 수직인데,
기본적이라함은 나중에 바뀔수도 있다는것을 의미합니다.
justify-content는 주축에 적용되는 속성입니다. (수평이 아닌 주축입니다! )
align-items라는 속성은 교차축에 적용되는 속성입니다. ( 수직이 아닌 교차축입니다 ! )
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS</title>
<style>
body{
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
#second{
background-color: wheat;
}
</style>
</head>
<body>
<div></div>
<div id=second></div>
<div></div>
</body>
</html>align-items 값을 center로 주고 변화를 관찰해봤습니다.
하지만 왠일인지 변화는 일어나지 않았습니다.
그 이유는 F12를 누르면 확인할 수 있습니다.
바로 body의 크기가 박스의 높이만큼이라.. center를 주어도 공간이 없어 티가 안나는 것입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS</title>
<style>
body{
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
#second{
background-color: wheat;
}
</style>
</head>
<body>
<div></div>
<div id=second></div>
<div></div>
</body>
</html>이런식으로 body에 height를 주어 새로고침해서 관찰하면 수직으로 center로 이동한 걸 관찰할 수 있습니다.
주축과 교차축을 바꾸는 방법도 알아보겠습니다.
flex-direction을 이용하여 수정하는 방법입니다.
flex-direction은 column과 row가 있습니다. display를 flex로 했을때, 디폴트는 row입니다.
아래처럼 flex-direction을 column으로 설정하게 된다면,
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS</title>
<style>
body{
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
height: 100vh;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
#second{
background-color: wheat;
}
</style>
</head>
<body>
<div></div>
<div id=second></div>
<div></div>
</body>
</html>위에서 봤던 주축과 수평축이 전환됩니다.
즉 주축이 수직이되고, 교차축이 수평이 되는 형태입니다.
다시 되돌아와서, 우리는 div안에 숫자를 넣고, div도 flex 컨테이너로 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS</title>
<style>
body{
margin: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 100vh;
}
div {
display: flex;
font-size: 28px;
color: white;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background-color: teal;
}
#second{
background-color: wheat;
}
</style>
</head>
<body>
<div>1</div>
<div id=second>2</div>
<div>3</div>
</body>
</html>flex 컨테이너(body) 안에 자식(div)이있고 이 자식엘리먼트도 flex컨테이너인 상태입니다.
기본적으로 flexbox는 이정도 까지만 포스팅해보겠습니다.
flexbox의 다른 흥미로운 속성도 많으니 찾아서 적용 해봐야겠습니다.
'프로그래밍 > HTML&CSS' 카테고리의 다른 글
| [HTML & CSS] position : relative , absolute (0) | 2020.11.08 |
|---|---|
| [HTML & CSS] position : fixed (0) | 2020.11.08 |
| HTML & CSS Class 와 id (0) | 2020.10.18 |
| 블럭과 인라인 (0) | 2020.10.18 |
| 웹페이지 탭창에 아이콘 넣기 (0) | 2020.10.15 |