HTML_CSS Flex, Bootstrap (230613)

이원건·2023년 6월 13일
0

HTML_CSS

목록 보기
5/5
post-thumbnail

1. flex 에 대하여 설명하시오.

사용하기 불편한 float와 position 등을 대체하기 위해 나온 layout 방식


2. flex container 에 들어가는 아래의 속성을 설명하시오.

1. flex-direction

  • flex될 자식 요소(items)의 방향을 지정한다.
    ex) row, column, row-reverse, column-reverse

2. flex-wrap

  • flex items가 flex container를 overflow했을 시에 강제로 한 줄에 표시되도록 할 것인지, 자연스럽게 다음 줄에 보이게 할 것인지에 대해 적용하는 속성

3. flex-flow

  • flex-wrap과 flex-direction을 한번에 적용시킬 수 있는 속성

4. justify-content

  • flex items에 대한 주축에 대한 정렬 기준을 제공하는 속성

5. align-items

  • flex items에 대한 교차축에 대한 정렬 기준을 제공하는 속성. align-content 속성과는 달리 1줄마다 적용된다.

6. align-content

  • flex items에 대한 교차축에 대한 정렬 기준을 제공하는 속성. align-items 속성과는 다르게 모든 줄을 한번에 정렬하는 특징이 있다.

3. flex item 에 들어가는 아래의 속성을 설명하시오.

1. order

  • flex items의 순서를 지정해준다.

2. flex-grow

  • flex items 요소가 flex-container 요소 내부에서 할당 가능한 공간의 비율을 표시

3. flex-shrink

  • flex items 요소가 flex-container 요소의 크기보다 클 때 얼마나 축소될 지에 대해 적용하는 속성

4. flex-basis

  • flex items의 기본 크기를 지정하는 속성

5. flex

  • flex-grow, flex-shrink, flex-basis 속성을 한번에 적용하는 속성

4.부트스트랩이란 무엇인가요?

twitter에서 사용하는 각종 layout, button 등의 디자인을 css, javascript를 이용해 꾸며놓고 제공하는 framework


5.부트스트랩 grid 시스템에 대하여 설명하시오.


0개의 댓글