🌵flex 에 대하여 설명하시오.
레이아웃을 위한 전용 태그들이 마땅하지 않아 (화면 배치를 위하여 float이나 inline-block을 이용했었음) 레이아웃 배치 전용 기능으로 지원하기 시작했다.
단점) 옛날 웹브라우저(IE8)는 지원하지 않는다.
🌵flex container 에 들어가는 아래의 속성을 설명하시오.
flex-direction
: items의 주 축을 설정한다.
- row: 기본값. 수평 나열.
- row-reverse: 수평 역방향 나열, 수평 나열에서 수평으로 뒤집는 것.
- column: 수직 나열.
- column-reverse: 수직 역방향 나열, 수직 나열에서 수직으로 뒤집는 것.
flex-wrap
: 플렉스 항목을 여러줄에 표시한다.
두 줄 이상일때 사용한다.
flex-flow
: flex-direcion과 flex-wrap을 합친 것.
주로 이걸 사용한다.
justify-content
: 주 축 안에서 items의 위치를 설정한다.(가로)
align-items
(align: 교차축을 맞추다.) items를 container에 교차축 정렬 시킨다.
align-content
: 각 자식요소별 간격에 따른 다양한 배치를 정의한다. (세로)
justify-content: stretch; (기본값) ▶ 자식요소를 세로로 100% 채움
justify-content: flex-start; (기본값) ▶ 자식요소를 위쪽 정렬
justify-content: flex-end; ▶ 자식요소를 아래쪽 정렬
justify-content: center; ▶ 자식요소를 중앙 정렬
justify-content: space-between; ▶ 자식요소의 양 끝과 부모요소 사이의 공간을 제외한 자식요소 사이의 간격을 일정하게 벌림
justify-content: space-around; ▶ 자식요소 기준 주위 공간을 일정 간격으로 벌림
justify-content: space-evenly; ▶ 자식요소끼리 동일간 간격으로 벌림
🌵flex item 에 들어가는 아래의 속성을 설명하시오.
order
:flex-item에 적용되는 특성으로 아이템 배치 순서를 설정한다.
flex-grow
: 아이템이 Flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.
- flex-grwo에는 숫자값이 들어가는데 몇이든 일단 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.
- 기본값은 0이기에 따로 적용하기 전에는 아이템이 늘어나지 않는다.
- flex-grow에 들어가는 숫자의 의미는 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어가진다고 생각한다.
flex-shrink
: flex-grow와 쌍을 이루는 속성으로, 아이템의 flex-basis의 값보다 작아질 수 있는지를 결정한다.
- flex-shrink에는 숫자값이 들어가는데 몇이든 일단 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스로 변하고 flex-basis보다 작아진다.
- 기본값은 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.
flex-basis
: flex-basis는 Flex 아이템들의 기본 크기를 설정한다.
(flex-direction이 row일 때는 너비, column일 때는 높이)
flex
: flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성이다.
🌵부트스트랩이란 무엇인가요?
- HTML5 + CSS3 + javascript
- 일반 개발자들이 사용하기 쉽게 접근 가능하다. (모바일+반응형)
- 기본 내부적으로 반응형을 제공한다. (미디어쿼리 사용x)
- 모바일퍼스트
- 최신 브라우저와 호환
🌵부트스트랩 grid 시스템에 대하여 설명하시오.
반응형 웹 구현 시 부트스트랩의 grid 시스템을 이용한다.
1. .container 혹은 .container-fluid클래스가 필요하다.
2. 한 개의 행을 표현할 때 row 클래스를 쓴다.
3. 디바이스의 크기를 지정할 때 lg, md, sm, xs로 지정이 가능하다.
ex) col-lg, col-md, col-sm, col-xs (col-크기-값)- 그리드의 최대값은 1행에 열의 총 합이 12이다.
- 정렬 방식은 부모태그에게 영향을 받는다.
