지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Flex Box에 대해
주축과 교차 측을
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (Flexbox에 대해) - 2편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Flex Box에 대해 대략적으로 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요
tm-csc.tistory.com
이번 글에서도
이어서 설명드릴게요.
가장 먼저 VSC를
실행해주세요.
저번과 다르게 일단
flex-direction: column;
가 있다면 지워줄게요.
그리고
justify-content: center;
align-items: center;
주축과 교차축 모두
가운데로 변경할게요.
그리고 우선 확인하면
그럼 여기에 글자를
적어볼게요.
이렇게 DIV 박스에
각각 A B C를 적고
저장한 후에 확인하면
그런데 FLEXBOX는
부모를 수정해야
자식이 이동한다고
말했던 것 기억하시죠.
그래서 DIV 태그에
FLEXBOX를 사용하게
되면 어떻게 될까요?
바로 이렇게 말이죠.
div {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: coral;
}
저장하고 실행하면
이렇게 DIV박스 안의
콘텐츠인 A B C 글자도
가운데로 이동하게
되는 것을 확인할 수 있죠.
즉 내가 원하는 만큼
FLEX 부모- 자식 엘리먼트를
만들어 낼 수 있게 되고
위치 또한 마음대로
이동시킬 수 있습니다.
하지만 이 모든 것은
FLEX라는 태그가 없다면
사용할 수 없죠.
그리고 FLEX의
또 다른 속성을 알려드리면
바로 기본 값인
flex-wrap: nowrap;
이 값은 한 줄에
모든 박스가 있게 해 주죠.
그 뜻은 div박스의 너비가
300px이어도 브라우저의
크기가 작아지면
이런 식으로 크기를
줄여서라도 같은 줄에
있게 만든 것인데요.
해당 값은 wrap로
변경하게 되면
지정해준 너비의 값을
넘어가게 되면 이렇게
하나의 DIV 박스가
아래로 내려가게 되죠.
또 저번 글에서 알려드린
flex-direction:column의
경우에도
flex-direction: column-reverse;
이렇게 적게 되면
ABC 가 아닌 반대로
CBA로 나오게 됩니다.
마찬가지로 row-reverse
또는 wrap-reverse도 있고요.
사실 많이 사용하는 태그가
아니어도 reverse라는 것도
있다는 것을 알아두면
분명 언제 가는 필요하실 겁니다.
여기까지 기본적인
FLEX에 대해 알려드렸고
이것만으로도 꽤나 많은
박스들을 마음대로 나열하는데
충분하다고 생각합니다.
물론 기본적인 것은요.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드릴게요.
