(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%인 모습

 

각각 width: 100%, 50%, 25%인 모습이다.

 

이제 각각의 item마다 div로 나눠줄 필요도 없고, width와 flex-wrap을 이용하여 원하는 숫자만큼 배치할 수 있다.