오늘은 CSS속성 중에 하나인 display : flex에 대해서 알아보겠다. CSS로 <div> 태그에 가로, 세로 200px인 사각형을 만들어 줬다고 했을 때, 두 도형은 한 줄에 놓이지 않게 된다.
See the Pen Untitled by whykim (@whykim) on CodePen.
바로 div의 원래 속성이 block이기 때문이다. block 속성은 쉽게 말해서 나는 한 칸을 전부 다 차지할 거야! 라는 의미이다. 그러니까 내가 만들어 준 div 네모박스는 사실 가로로 한 칸 전부를 차지하고 있는 것이다. 이것을 확인하고 싶다면 크롬 개발자 도구를 켜서 확인해 보면 된다.
(mac 기준) command + shift + c
(window 기준) control + shift + c
를 눌러서 확인해볼 수 있다. 확인해보면, 실제로 내가 만들어준 네모 박스는 가로 영역 전체를 다 차지하고 있는 걸 알 수 있다.
그럼, 두 박스를 사이좋게 나란히 놓기 위해서는 어떻게 해야할까? 두가지 방법이 있다. 첫 번째로, 박스 하나에 display에 inline-block 속성을 넣어주는 것! 하지만 권장하지는 않는 방법이다. inline-block으로 만들어주면, 박스와 박스 사이에 간격이 생긴다. 직접 확인해보자. (화면이 너무 좁아서 확인이 안되는 경우, 0.5x버튼을 눌러서 0.5배로 확인하길 바란다)
See the Pen Untitled by whykim (@whykim) on CodePen.
두 번째 방법은 부모 div를 하나 생성하고 거기에 display : flex 속성을 넣어주는 것이다! 어떻게 하는지 확인해보자! 생각보다 간단하다. 네모 박스 div를 감싸주는 상위 div를 하나 만들고, 거기에 display:flex; 의 속성을 넣어주기만 하면 된다.
See the Pen flexbox by whykim (@whykim) on CodePen.
완성된 모습을 확인해보자.
댓글