display

css 레이아웃을 구성할 때 사용할 수 있는 속성.
화면 요소를 block 요소로 처리할 지, inline 요소로 처리할 지 정할 수 있다.
또한 flex, grid 처럼 자식요소들을 어떻게 배치할 지 정할 수 있다.

display는 외부-내부 요소의 유형을 결정한다.

외부 디스플레이 유형으로 block, inline이 속한다.

block은 쌓이는 상자. 요소의 height만큼 세로를 차지하고, 해당 요소의 부모의 width 만큼을 차지한다. 보통 부모는 body로 가로줄 전체를 차지한다.

< div > < h1 > < p > 등

inline은 같은 선상에서 텍스트처럼 쭉 이어진 한 줄. 각 요소만큼의 공간이 부여되고 하나의 요소가 끝나는 지점에서 바로 다음 요소가 붙어서 진열된다.

예_ < span > < a > < img > < strong > 등

inline-block은 두가지 속성의 특징을 갖고 있다. 같은 선상에 요소를 나열하지만 박스의 가로 세로 크기를 정할 수 있다.

내부 디스플레이 유형은 상위 요소에 display를 지정하면 하위(내부)요소에 적용되는 유형이다.

flex, grid 등이 있다.

flex

flex 연습 게임
flex box, flexible box 라고도 부른다. 레이아웃 배치 전용 기능으로 고안되어 float 나 inline-block 보다 강력하고 편리한 기능이 많다.

flex는 내부 요소들을 정렬하는 방법이다.
부모(상위) 요소에 적용하여 내부에 포함된 자식(하위) 요소들을 정렬할 수도 있고, items가 정렬될 수도 있다.

<div class="container">
  <div>요소C</div>  
  <div>요소B</div>  
  <div>요소A</div>  
</div>

div{
  display : flex;
  flex-wrap : ;
  flex-direction : ;
  justify-content : ;
  align-items : ;
}

• flex-wrap

  

flex-wrap은 브라우저 창이 작아질 때 요소의 배치를 어떻게 할 지를 나타낸다. 죄측 nowrap은 화면이 작아져도

• flex-direction (오뎅꼬치의 방향)

  

flex-direction 콘텐츠의 나열 방향을 정의한다.

• row
  default. 일반적인 나열식인 좌->우 방향으로 왼쪽 상단에서 시작한다.
• column
  세로방향. 왼쪽 상단부터 위->아래 방향으로 정렬된다.
• row-reverse
  row의 반전. 시작점이 우측 상단으로 바뀐다.
• column-reverse
  column의 반전. 시작점이 왼쪽 하단으로 바뀐다.

• justify-content (오뎅이 움직인다)

  

justify-content는 축 방향(기본 column)을 기준으로 요소들을 나열하는 것을 말한다.
축방향 = 오뎅꼬치에 꽂힌 요소 = 오뎅 을 좌-우 로 움직이거나, 오뎅 사이 간격을 조정할 수 있다.

• align-items (오뎅꼬치가 움직인다)

  

align-items는 축 방향으로 요소가 일렬로 꽂혀있는 상태로 오뎅꼬치가 움직이는 것을 말한다.

화면의 정가운데 정렬하고 싶다면 justify-content : center; 와 align-items : center;를 사용하면 화면의 정가운데에 요소를 위치할 수 있다.

• flex-wrap:wrap; + align-content

  align-items와 같다. 다만 flex-wrap 이 wrap 일 때 사용한다.
  

<div  class="container">
  <div class="items">AA</div>
  <div class="items">BBBBBBB</div>
  <div class="items">CCCC</div>
</div>

.container{
  display : flex;
}

.items{
  flex-basis : 0;
  flex-grow : 1;
}

• flex-grow

  flex-gow 적용 전 (콘텐츠 크기만틈만 갖고 있을 때) 화면의 여백을 지정한 값만큼 나눠갖는다.

• flex-basis

  flex-basis : 0;을 사용하면 화면 전체를 여백으로 인식하여 flex-grow 값 만큼 배분된다.

grid

gird 연습 게임

position

css 선택자 연습 게임

학습자료

CSS Flexbox와 CSS Grid, 한번에 정리!
1분코딩-flex