지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Inline Block에 대해
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (Inline Block에 대해)
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Class의 사용법을 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tist
tm-csc.tistory.com
이번 글에서는
FLEBOX에 대해
알려드리려고 합니다.
지난 글에서 inlineblock을
알려드리면서 해당 태그를
사용했을 때 생기는
문제점에 대해서도
알려드렸는데요.
실제로 해당 문제가
발견되고 나서 브라우저나
많은 인터넷 커뮤니에서는
이걸 고쳐보려고 했었죠.
그리고 아주 좋은 방법을
생각해냈죠.
그것이 바로 FLEXBOX
라고 불리는 태그입니다.
그럼 일단 VSC를
실행시켜보도록 할게요.
그리고 이렇게
div 박스만 세 개 두고
너비와 높이는 200px로
설정하겠습니다.
width: 200px;
height: 200px;
background-color: coral;
그리고 색상도
coral로 설정할게요.
그리고 확인하면
이렇게 나오게 되겠죠.
이제 FLEXBOX라는 태그를
사용하게 될 텐데요.
FLEXBOX는 아주 유연해서
박스를 어디든 둘 수 있는
태그입니다.
특히 2차원 레이아웃에서
아주 잘 작동하죠.
하지만 세 가지의 규칙을
지켜줘야 하는데요.
1) 자식 엘리먼트에게는
어떠한 것도 적지 말아야
한다는 것입니다.
오직 부모 엘리먼트에만
명시해야 합니다.
이 말의 의미는 3개의
div를 가리키는 자식
엘리먼트들을 움직이게
하고 싶다면 CSS에
div에 적는 것이 아닌
그위의 body에 적어서
움직이게 해야 한다는 것입니다.
그래서 이렇게
body에
display: flex;
적어주셔야 하죠
그리고 확인해보면
박스 옆으로 아무것도
오지 못하는 block과 달리
또 inlineblock처럼 원하지
않는 공간이 생긴 것과 달리
그대로 옆으로 나열되죠.
그리고 이렇게
flex를 사용하게 되면
이런 것도 할 수 있죠.
justify-content: center;
이렇게 적어주시면 되는데요.
이렇게 가운데로
보낼 수 있습니다.
justify-content: flex-end;
라고 적게 되면
오른쪽 끝으로 div박스를
붙일 수도 있죠.
justify-content: space-evenly;
그리고 이렇게 적게 된다면
이렇게 가로의 빈 공간을
같은 크기로 나누어서
배치되도록 설정할 수도 있죠.
즉 inlineblock과 다르게
내가 하나하나 설정해줘야 하고
불편했던 상황과 정말 다르죠.
또한 space-around 또는
space-between과 같은
태그도 사용함으로써
박스의 위치를 변경시킬 수
있는데요.
이 모든 것이 알아서
계산을 다해주고
배치시켜주는 것이죠.
가장 좋은 건 바로
보고 있는 브라우저를
즉 웹페이지의 크기를
변경하면 사이의 공간도
알아서 반응하여
줄어들게 된다는 거죠.
물론 계속 줄여나가면
div끼리 뭉개지는 문제가
있지만 그건 나중에 해결하는
방법에 대해 알려드릴게요.
이번 글에서는 간략하게
FLEXBOX에 대해서
알려드렸고요.
다음 글에 더 자세히
알려드리겠습니다.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
