09.HTML / CSS

이수현·2022년 5월 10일
0

TIL

목록 보기
9/23
post-thumbnail

📚HTML / CSS

  • box-sizing
  • display: flex란?

box-sizing

box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.

  • box-sizing: content-box: content-box는 기본 css 박스 크기 결정법을 사용한다. 요소의 너비를 100px로 설정하면 컨텐츠 영역이 100px를 갖고, 테두리와 안쪽 여백은 이에 더해진다.
  • box-sizing: border-box: border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려한다. 너비를 100px로 설정하고 테두리와 padding을 추가하면, 컨텐츠 영역이 줄어들어 총 너비 100px를 유지한다.

    위 화면을 통해 동일한 너비의 크기가 서로 다른 속성의 값으로 달라지는 것을 볼 수 있다.

display: flex란?

display: flex속성은 flex 컨테이너에서 사용 가능한 공간에 맞게 flex 항목을 늘리거나 줄이는 방법을 설정한다.
flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 float과 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능이 많다.

컨테이너가 flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것이다.
다시말해, flex의 속성은 2가지로 나뉠 수 있다.

  • 컨테이너에 적용하는 속성
  • 아이템에 적용하는 속성

컨테이너에 적용하는 속성

  • display: block <-> display: flex의 차이는 flex는 컨텐트의 내용만큼만 차지하지만, block은 컨텐트의 내용과 상관없이 끝까지 차지한다.
  • flex-direction 속성은 컨테이너 안의 아이템들의 배치 방향을 설정한다.

    기본값은 row로 x축을 기준으로 아이템이 왼쪽부터 순서대로 배치된다. (A-B-C       )
    row-reverse: row뒤에 reverse를 보고 유추할 수 있듯이, x축을 기준으로 하는 것을 똑같지만 x축의 우측에서부터 순서대로 배치된다.(      C-B-A)
    column: column은 위 2개의 값과는 다르게 y축을 기준으로 배치를 한다. y축의 상단부터 아이템이 순서대로 배치된다.
    column-reverse: y축을 기준으로하며 하단부터 순서대로 배치된다.
  • flex-wrap 속성은 컨테이너안의 아이템들을 배치할 때 한 줄에 모든 아이템이 들어갈 수 없을 때 줄바꿈을 어떻게 할지 결정하는 속성이다.

    기본값은 nowrap으로 말 그대로 줄바꿈을 하지않고 컨테이너의 영역을 넘어서까지 배치된다.
    wrap: wrap은 컨테이너를 넘어서 배치되지 않게 줄바꿈을해서 배치한다.
    wrap-reverse: wrap과 마찬가지로 줄바꿈을해서 배치하지만, 컨테이너 하단에서 아이템들이 좌->우 방향으로 배치되며 줄바꿈은 윗 줄로 줄바꿈된다.

  • justify & align

  • justify-content: x축을 기준으로 정렬하는 속성
  • align-items: y축을 기준으로 정렬하는 속성
  • align-content: y축을 기준으로 여러 행을 정렬하는 속성

justify-content의 기본값은 flex-startflex-direction의 값이 row면 x측을 기준으로 좌->우 정렬을 한다. column이면 상->하 정렬을 한다.
flex-end: 아이템들을 끝점으로 정렬한다.(      A-B-C)
center: 아이템들을 x축 가운데로 정렬한다.
space-between: 아이템들 사이에 균일한 간격을 만들어준다.(A=B=C)
space-around: 아이템들 좌우로 균일한 간격을 만들어준다.(=A==B==C=)
space-evenly: 아이템들 사이와 양 끝에 균일한 간격을 만들어준다.(=A=B=C=)


align-items의 기본값은 stretch로 아이템들이 yx축을 기준으로 끝까지 늘어난다.
center: 아이템들이 y축을 기준으로 가운데 정렬을 한다.
flex-start: y축을 기준으로 상->하 정렬을 한다.
flex-end: y축을 기준으로 하->상 정렬을 한다.
baseline: 아이템들을 텍스트 베이스라인을 기준으로 정렬한다.




align-content은 x축을 기준으로하는 justify-content의 값들의 기능은 동일하고 y축을 기준으로 하는 차이점이 있다.
그리고 처음에 alignalign-itemsalign-content 2개가 존재해서 차이가 뭔지 궁금했는데, align-contentalign-items와 달리 flex-wrap의 값을 wrap으로 적용해야 된다는 차이점이 있었다.


아이템에 적용하는 속성

  • order : 각 아이템들의 시각적인 나열 순서를 결정하는 속성이다.
    숫자값이 들어가며, 작은 숫자가 먼저 배치된다. 단, '시각적' 순서이므로 HTML 구조 자체를 변경하는 것이 아니므로 접근성 측면에서 주의해야한다.
  • z-index : z축 정렬을 할 수 있다. x축-가로, y축-세로, 'z축-높이'. 숫자가 클수록 다른 아이템의 위로 올라온다.
  • align-self : align이라는 단어를 통해 y축 정렬이 된다는 것을 유추할 수 있다. 단, align-self는 개별 아이템을 y축 정렬을 한다.(align-items보다 우선순위가 높다.)
    align-self:auto를 적용하면 부모의 align-items값이 적용된다.
    align-self의 다른 값들은 stretch,flex-start,flex-end,center, baseline이 있고 효과는 align-items와 같다.
  • flex-basis : flex-basis는 Flex 아이템의 기본 크기를 설정한다.(flex-direction이 row일 때는 너비, column일 때는 높이)
    기본값은 auto는 해당 아이템의 width값이 적용된다.
  • flex-grow : flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. 기본값은 0이며, 1을 적용하면 빈 공간을 메움. 만약 여러 개의 아이템들에게 값을 적용하면(1 / 2 / 1) 비율로 계산하여 1 : 2 : 1크기로 메워진다.
  • flex-shrink: flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. 기본값은 1이기 때문에 아이템이 flex-basis보다 작아진다. 0으로 적용하면 작아지지 않기 때문에 width값을 주면 고정폭을 가진 컬럼을 만들 수 있다.

0개의 댓글