[CSS] div 동서남북으로 배치 레이아웃 만들기

각 div 들이 콘테이너 요소들이라고 생각하고

원하는 곳에 배치하면 된다.

 

Flexbox를 활용하면 레이아웃을 간단하게 구성할 수 있다.

특히 반응형 디자인을 구현할 때 매우 유용

 

코드 설명

• .outer-container는 position: relative;을 적용하여 내부 요소들이 상대적으로 배치될 수 있도록 설정했다.
• .north, .east, .south, .west 요소들은 position: absolute;을 적용하여 특정 위치에 배치되도록 만들었다.
• 각 요소를 top, right, bottom, left 속성을 활용하여 동서남북 방향에 배치했다.

 

See the Pen Untitled by wpfhorez4 (@wpfhorez4) on CodePen.