hong_mok

그리드 시스템(Grid system) - 요소들의 디자인과 배치에 도움을 주는 시스템 - 기본 요소 Column : 실제 컨텐츠를 포함하는 부분 Gutter : 칼럼과 칼럼 사이의 공간 (사이 간격) Container : Column들을 담고 있는 공간 Bootstrap Grid System Bootstrap Grid 공식 문서 Bootstrap 을 이용하면 Gird System을 쉽게 구현할 수 있다. (Bootstrap CDN) Bootstrap Grid System은 flexbox로 제작된다. Container, Row, Column을 사용하여 컨텐츠를 배치하고 정렬한다. 하나의 Row당 Column은 12개로 배치 된다. 또한 6개의 grid breakpoints를 활용하여 화면 너비에 따라 다른..

CSS Flexible Box Layout Flexbox란 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 행과 열 형태로 아이템을 배치하는 1차원 레이아웃 모델입니다. 가장 큰 특징은 main axis(주축) 과 cross axis(교차 축) 이 존재하고, 이 두개의 축을 기준으로 아이템을 배치하고 정렬할 수 있습니다. Flexbox 구성요소 Flex Container (부모 요소) - Flexbox 레이아웃을 형성하는 가장 기본적인 모델. - Flex Item들이 놓여있는 영역 - display 속성을 flex 또는 inline-flex로 지정. .flex-container { display: flex; }Flex Item (자식 요소) - Container에 속해 있는 컨텐츠(박스) Main Ax..