[HTML/CSS] 블록배치 방법 <flex>

우리는 CSS를 이용해서 기존의 HTML로 만든 블록들을 우리 마음대로 배치하고 움직일 수 있어야 한다. 비록 아직 기본중의 기본만 겨우 구사 할 수 있지만 블록들을 이쁘게 꾸미고 색깔을 이쁘게 주는것보다는 먼저 내가 원하는곳에 블록들을 마음대로 배치 할 수 있어야 한다고 생각한다><

 

See the Pen dyGyZMj by Sang Hoon Jeong (@DevilFront) on CodePen.

 

위의 상태는 보는것과 같이 박스의 가로길이와 영역을 알아보기 쉽게 색깔만 입혀준 상태이다. 우선 div 태그에 대해 알고 넘어가야 하는데 마크업 하는 중에 가장 많이 쓰게 될 태그 중 하나이다. 이 태그는 '블록'태그로 기본적으로 공간을 가지고 있다.

See the Pen BajarGj by Sang Hoon Jeong (@DevilFront) on CodePen.

그전의 코드에서 클래스명을 빼주어서 1과,3이라는 텍스트 값만 가지고 있게 하였는데 1옆에 색깔이 입혀져 있는 2가 오지 않고 2옆에 3이 오지 않았다. 이처럼 한 줄의 영역을 가지고 있는 블록들을 한줄에 배치 할 수 있는 방법이 있는데 바로 display의 속성중 'flex'를 이용하면 된다.

See the Pen MWKWVNQ by Sang Hoon Jeong (@DevilFront) on CodePen.

이제 단순히 가로로 나열에서 끝나는게 아니라 쓰면 유용한 'justify-content' 와 'align-items'에 대해 알아보자. 이 두 속성은 display:flex를 먹여준 블록들에 한해서 적용이 된다><

See the Pen WNrNzWR by Sang Hoon Jeong (@DevilFront) on CodePen.

한 번에 두 속성을 적용시켜 봤는데 간단히 말하면 'justify-~~'는 가로 즉 메인축을 기준으로 자식 블록들을 정렬하는 것이고 'align-~'은 서브축 즉 세로축에 관해서 블록들을 정렬할 수 있다. 주석 처리 해놓은 space-between은 부모의 공간을 자식들끼리 알아서 나눠서 가지는 속성으로 큼직큼직?한 배치를 할 때 내가 애용하고 있다. 비슷하게 쓸수 있는 것으로 flex-grow도 있으니 사용법을 알고 있다면 상황에 맞게 써주면 되겠당~

 

      ***flex는 내가 속성을 먹이고 싶어하는 블록이 있으면 그 !!!!!!부모블록!!!!!!에 맥여서 스타일을 주는 것이다. ****

flex를 써주면 justify , align, flex-wrap, flex-direction 등 써줄 수 있는게 많으니 기회가 되면 더 다뤄보도록 하겠당><