CSS의 꽃, Flexbox

마크업/Html & Css

CSS의 꽃, Flexbox

Rainbow🌈Coder 2022. 4. 23. 19:41

728x90

[CSS] 화면 중앙 배치 (Flexbox/Grid) | Engineering Blog by Dale Seo

[CSS] 화면 중앙 배치 (Flexbox/Grid)

Engineering Blog by Dale Seo

www.daleseo.com

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

*엘리님의 무료 유튜브 영상을 보고 배운 것들을 정리한 포스팅입니다!

1. flexbox는 컨테이너 박스에 적용되는 속성값들이 존재하고,

그 컨테이너 박스 안에 있는 아이템들에 적용되는 속성값들도 존재한다.

2. 컨테이너를 꾸며줄 수 있는 속성값들은 위의 캡쳐와 같이 존재한다.

3. 아이템들에 지정할 수 있는 속성값들은 위의 캡처와 같다

아이템들이 왼쪽에서 오른쪽으로 정렬(이 수평축이 메인축,main axis), 이에 수직하는 축이 반대축(cross axis)이 된다.

이건 위에서 아래로 main axis를 타고 아이템들이 정렬되고 있다. 이에 따라 수평축이 cross axis가 된다.

4. flexbox에는 중심축과 반대축이 있다. 중심축을 수평이냐 수직이냐 설정하는 것에 따라 반대축이 결정된다.

<실습>

1. JS Bin - Collaborative JavaScript Debugging 에서 진행

2. 실습을 위해 html을 아래와 같이 세팅

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>
</body>
</html>

꿀팁 : div.contianer>div.item.item${$}*10 까지 작성 후 tab key를 누르면 바로 위와 같이 구성된다.

height: 100vh(viewport height) vs 100%(컨테이너가 들어있는 부모 높이의 100%를 채우겠다)

현재 container의 부모는 BODY인데 이 바디의 부모는 html이다. html의 높이가 100%가 아니라서

자식들 높이가 다 채워지지 않은 것처럼 보이게 된다.(물론 HTML의 HEIGHT을 100%으로 주면 자식들 높이도 다 채워진 것처럼 보이게 된다)

부모의 높이에 상관없이, 보이는 viewport 높이를 100% 지정해주고 싶다면 100vh를 쓰면 된다.

3. 화면 중간에 배치하기

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

728x90