(HTML, CSS) 페이지 레이아웃 구성, 아이템 나누기
이전에 만든 웹사이트에서 캡쳐한 부분이다.
빈곤해결, 교육보장, 질병예방, 환경보호의 각 아이템들을 어떻게하면
4개를 가지런히 보여줄까? 란 고민을 했다.
-분할 예시를 보자
이 당시 내가 만들었던 방법은 분할을 위해 빨간 네모들을 자식item이라고 생각했고, 각 자식들을 div로 나눴고,
자식들마다 className을 매겼다.
작업은 모 div를 기준으로 css를 넣어줬고 부모 아래있는 자식들을 위와 같이 분할 할 수 있었다.
이렇게 하다보니 발생한 문제점이
수정에 있어서 전체적인 HTML 구조를 이해하고 있어야 했고, 레이아웃 수정하는데 많은 번거로움이 있었다.
그래서 리액트를 이용하여 컴포넌트 형식으로 만들리라 다짐했고,
추후 리액트 강의를 들으며
css 부분도
[부모 div에 대한 css]
width: 25%;
box-sizing: border-box;
[자식 item에 대한 css]
display: flex;
flex-wrap: wrap;
를 이용하여 해결할 수 있지 않을까란 방법이 떠올랐다.
- flex-wrap을 사용하여 넘치는 부분을 아래로 넘겨주고, 해당하는 item을 50%로 설정해준다
- box-sizing을 통해 부모 div에 대한 자식들이 넘치지 못하게 해준다.
-box-sizing:border-box를 참고하자.
이렇게 css. / width: 25%; / box-sizing: border-box; / flex-wrap: wrap; 를 활용하여 배치를 자유롭게 할 수 있다!!
적용한 모습
각각 width: 100%, 50%, 25%인 모습이다.
이제 각각의 item마다 div로 나눠줄 필요도 없고, width와 flex-wrap을 이용하여 원하는 숫자만큼 배치할 수 있다.