지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Flex Box에 대해
대략적으로
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (Flexbox에 대해) - 1편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Inline Block에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tis
tm-csc.tistory.com
이번 글에서도
이어서 Flex Box에 대해
알려드리겠습니다.
일단 VSC부터
실행해주세요~
그리고 이렇게
가운데 div박스에만
ID를 부여하고
색상을 변경해볼게요.
#second {
background-color: red;
}
이렇게 가운데
박스만 빨간색으로요.
그리고 확인해보면
이렇게 가운데만
색상을 변경할 수 있죠.
하지만 아직은 가로축에서만
공간을 조정할 수 있는데요.
세로축으로도 가능해야겠죠?
이것이 바로 Flexbox에서
기본적으로 가로축, 세로축의
모습입니다.
justify-content가 주축이고
align-items가
교차 측 세로 측입니다.
그럼 입력해볼까요?
div 박스가 세로에서
중심에 있으라고
설정하려면
align-items: center;
이렇게 적어주시면
되는데요.
크롬으로 확인해보면
이렇게 body의 높이가
낮기 때문에 실제로
세로축 가운데 있어도
변화가 없다고 느껴집니다.
그래서 BODY의 높이를
올려주게 되면
height: 100vh;
이렇게 적어주시게 되면
100 viewport height를
뜻하는 약자로
스크린을 100 다
사용한다고 생각하시면 됩니다.
그리고 확인해보면
이렇게 가운데 있다는 것을
확인할 수 있습니다.
당연히 스크린의 크기에
따라 변화한다는 것도
확인할 수 있고요.
그렇다면 가로로
나열하지 않고
세로로 나열하고 싶다면
어떻게 해야 할까요?
바로 이렇게
flex-direction: column;
이라고 적어주시면 됩니다.
기본 주축은 가로인지만
그것을 세로로 변경하는 거죠.
이렇게 되면
세로축으로 변경된
모습을 확인할 수 있습니다.
하지만 주의해야 할 것은
flex-direction: column;
justify-content: center;
align-items: flex-start;
이렇게 주축과 교차 측이
변경된다는 거죠.
확인해보면
이렇게 가로라고
했던 모습이 세로가 됐고
세로라고 생각했던 것이
가로가 되었죠.
그래서 주축과 교차 측을
처음부터 가로 세로로
외우시면 안 되고
주축, 교차 측으로 기억하고
있으셔야 조금 더 편하게
코딩하실 수 있을 겁니다.
물론 확인해보고
틀렸으면 수정하면 되지만요.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
