css layout 1탄

참고사이트

• (inflearn) CSS Flex와 Grid 제대로 익히기 - 1분코딩
• (website) 이번에야말로 CSS Flex를 익혀보자 - 1분코딩

본 내용은 위 참고사이트를 통해서 공부한 내용을 왕초보인 저의 입장에 맞춰서 정리했습니다.😉

HTML과 CSS를 배우면서 느낀점이 그래서 웹사이트 구조는 어떻게 구성하지? 하고 찾다가 CSS의 flex와 grid에 대해서 알게 되었다.👍👍

✅ Flex

flex는 레이아웃 배치 전용 기능으로 고안되었다고 한다.

Flex 적용 전

       <div class="flex-container">
           <div class="flex-item">AAAAAAAA</div>
           <div class="flex-item">BBBBBBBBBBBBBBB</div>
           <div class="flex-item">CCCC</div>
       </div>

아래 그림은 위 코드를 작성하고 어떤 css도 추가하지 않은 모습이다.

Flex 적용 후

아래 그림은 display:flex 를 적용한 모습이다.
여기서 조금 더 확인하려면 height 100px을 적용해자!

            .flex-container{
                display: flex;
            }

height 100px를 적용하니까 부모 박스(flex-container)가 늘어난 만큼 개별 박스(flex-items)들의 높이도 늘어난 것을 볼 수 있다.
이러한 이유는 align-items: stretch 가 default로 설정되어 있기 때문이다.
align-items는 밑에서 다시 다루게 된다!

            .flex-container{
                display: flex;
                height: 100px;
            }

✅ Flex-direction(방향 설정)

방향 속성 값은 row, column, row-reverse, column-reverse 가 있다.
이 중 column와 row-reverse만 확인해보자!

row 값이 속성의 default 이다!

column

            .flex-container{
                display: flex;
                height: 200px;
                flex-direction: column;
            }

가로(row) 방향으로 있던 flex 들이 세로(column) 방향으로 펼쳐진 것을 볼 수 있다.

row-reverse

            .flex-container{
                display: flex;
                height: 100px;
                flex-direction: row-reverse;
            }

왼쪽에서 시작하던 flex-item 들이 reverse 적용으로 오른쪽부터 역으로 시작하는 것을 볼 수 있다!!

PS

• 인프런 영상을 두 번 넘게 반복해서 보고 있다.
• 모르는 것을 다시 찾아보는 것도 용기이다!