이전에 Bootstrap이 어떠한 것인지 어떠한 용도로 사용되는 것인지 얼마나 개발자에게 효율적으로 도움을 줄 수 있는지 확인해 보았습니다. 이번에는 제가 원하는 사이트를 BootStrap 으로 빠르게 만들어보겠습니다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com Bootstrap을 잘 사용하기 위해서는 해당 ..

레이아웃은 기본적으로 12개의 열로 이루어져 있습니다. 컨테이너를 생성하게 되면 해당 컨테이너 내부에도 기본적으로 보이진 않지만 12개의 열로 구분되어져있습니다. Bootstrap을 사용하게 되면 각 열 컨텐츠들을 col 이라고 칭합니다. 기본적으로 각 컨텐츠들에게 너비를 정해주지 않으면 전부 동일한 크기를 가지게 됩니다. Bootstrap Container Bootstrap을 사용하여 컨테이너를 만들게 될 때 컨테이너 클래스 속성 명과 값이 정해져있습니다. 각 container 클래스 속성명에 따라 부여된 반응형 크기가 존재합니다. - container : 가장 작은 컨테이너로서 가장 작은 화면에 한해서만 전체 크기를 가집니다. - container-sm : container와 유사합니다. 가장 작은 ..

부트스트랩은 외부 CSS 레이아웃 시스템 중 하나입니다. 직접 레이아웃을 만들 필요없이 외부에서 만들어진 시스템을 가져와서 적용하기만 하면 자기가 원하는 레이아웃으로 구성할 수 있습니다. Bootstrap 사이트에 들어가면 다양한 예시 CSS 레이아웃들을 확인할 수 있고 적용할 수 있습니다. Bootstrap 장단점 장점 - 직접 만들 필요없이 빠르게 적용하여 만들 수 있습니다. - 고려해야 될 CSS 내용들을 머리 아프게 직접 생각할 필요가 없습니다. 단점 - 부트스트랩에 사용되는 대부분의 html 태그에는 class 속성이나 사용되는 css스타일에 너저분하게 많은 값들이 들어가 있을 수 있습니다. 이는 어떤 컨텐츠에 어떤 스타일이 적용되야 되는지 일일히 파악하기에 어려울 수 있다는 단점이 있습니다. ..

이번에는 만든 Grid에 아이템을 어떻게 배치해야 하는지 그리고 원하는 영역에 어떻게 배치해야 하는지에 대해 알아보겠습니다. 그 전에 다시 한번 Grid를 사용하기 위한 기본적인 용어들을 정리해보겠습니다. 1. Grid를 적용할 컨텐츠들을 전체적으로 담는 영역을 Grid 컨테이너라고 합니다. 2. 컨테이너 내부에 존재하는 컨텐츠들을 Grid 아이템이라고 합니다. 3. Grid를 생성하게 되면 안보이지만 아이템들을 배치하기 위한 격자선이 존재합니다. 이것을 트랙이라고 말합니다. 트랙에는 row트랙, column트랙이 있습니다. 각각 행과 열의 격자선을 뜻합니다. 4. row트랙과 column 트랙이 교차한 영역을 Grid 셀이라고 합니다. 이 Grid 셀에 컨텐츠들을 배치하게 됩니다. Grid 아이템을 G..

Grid 로 레이아웃을 구성했다면 이제 해당 Grid의 Size를 지정해주는 CSS 옵션들에 대해 알아보고 적용해보겠습니다. Size를 지정해줄 때 px을 사용하여 고정적인 크기를 가지게 할 수도 있으며, rem 과 같은 크기 키워드를 적용해 줄 수 있습니다. grid-template index.html 1 2 3 4 style.css .grid-container{ display: grid; grid-template: 100px 200px / 400px 800px; } .grid-container > *{ border: 1px black solid; } 앞서 grid는 행과 열에 대한 크기와 수를 지정해줄 때 grid-template-rows, grid-template-columns 옵션을 사용해주었는데..

display: flex 를 사용하면 같은 축에있는 아이템들에 한해 반응형 CSS를 적용시켜줄 수 있습니다. 하지만 여러 가변적인 크기를 가진 요소들이 복합적으로 조합되어 보여져야 될 경우에는 일반적으로 grid CSS옵션을 사용합니다. 이런식으로 복합적인 형태의 레이아웃들로 구성되야 한다면 grid를 사용하는 것이 좋습니다. Flex 와 Grid의 차이점 Flex 1차원적인 선을 따라 컨텐츠들을 정렬하는 도구라고 볼 수 있습니다. 보편적인 수평 flex 형식은 아이템들을 배치하고 페이지에서 어떻게 정렬할지 정의하는 데에 아주 쉽게 사용할 수 있습니다. Grid 2차원적인 형태로 컨텐츠들을 레이아웃 하는 도구라고 볼 수 있습니다. 위의 이미지처럼 오른쪽 사이드에 바를 추가할 수도 있듯이 여러 형태의 2차..