Simple Is Best

안녕하세요. 오늘은 부트스트랩을 활용한 grid 레이아웃에 대해서 알아보겠습니다. 오늘 기온이 35도네요... 너무 더워서 반쯤 정신이 나간채로 포스팅을 올리는 점 양해바랍니다. 이전까지 우리가 레이아웃을 썼던 방법은 3가지가 있습니다. 1. float 2. display : inline-block 3. flexbox 모두 좋은 방법들입니다. 하지만 float를 쓰면 width 를 섬세하게 조정해야 한다는 점이 참 불편했었는데요. 오늘은 부트스트랩에서 제공하는 grid 에 대해서 알아보겠습니다. Bootstrap Grid 레이아웃 grid : 사이트를 균일하게 쪼개서 레이아웃을 잡고 싶을 때 사용합니다. - 내부적으로 flex-box를 활용하여 만든 것이기 때문에 IE8 이하에서는 작동하지 않습니다. g..

이전 포스팅에서는 레이아웃 배치 2가지 방법에 대해 학습했었습니다. 1. float : left; 2. display : inline - block; 본 포스팅에서는 레이아웃 배치를 굉장히 쉽게 쓸 수 있게 해주는 flexbox에 대해서 학습하겠습니다. 우선 flex를 사용하기 위한 기본 구조부터 알아보겠습니다. flex를 사용하기 위한 구조 1. flex-box들을 모두 감싸는 flex-container의 클래스명을 가진 div 태그 2. flex-box : flex-box는 어떤 태그로 선언하던 간에 display : block 속성을 가지고 있기 때문에 기본적으로 한 행을 전부 차지(회색 박스) 따라서, 겉으로 보기에는 박스들이 세로로 배치되는 것처럼 보입니다. 이를 코드로 표현하면 다음과 같습니다..

보호되어 있는 글입니다.