Part 2. CSS 기초 (4)

HanSungUk·2022년 5월 3일
0

HTM과 CSS

목록 보기
5/8
post-thumbnail

Part 2. CSS 기초 (4) 입니다.

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

  • display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.
  • flex-direction을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
  • justify-contentalign-items를 이용하여 수평-수직 정렬을 결정할 수 있다.
  • flex-grow를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
  • flex-basis를 이용하여 요소의 기본 크기를 결정할 수 있다.
  • VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.

1. display 이해하기

display 속성은 요소의 화면 출력(보여짐) 특성입니다.

  • 각 요소에 이미 지정되어 있는 값
    • block : 상자(레이아웃) 요소
    • inline: 글자 요소
    • inline-block: 글자 + 상자 요소

  • 따로 지정해서 사용하는 값
    • flex: 플렉스 박스 (1차원 레이아웃)
    • grid: 그리드 (2차원 레이아웃)
    • none : 보여짐 특성 없음, 화면에서 사라짐

2. display: flex 분석하기

display: flex부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법입니다. 다시 말하자면, Flexbox 속성들은 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있습니다.

- 부모 요소에 적용해야하는 Flexbox 속성들

  1. flex-direction : 정렬 축 정하기
    flex-direction속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 기본값은 가로 정렬 입니다.
 /* 한 줄의 글을 작성하는 방향대로 */
flex-direction: row;

/* <row>처럼, 대신 역방향 */
flex-direction: row-reverse;

/* 글 여러 줄이 쌓이는 방향대로 */
flex-direction: column;

/* <column>처럼, 대신 역방향 */
flex-direction: column-reverse;
  1. flex-wrap : 줄 바꿈 설정하기
    flex-wrap속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 기본값은 nowrap (줄 바꿈 X) 입니다.
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
  1. justify-content : 축 수평 방향 정렬
    justify-content속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다.
    요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
    이때 flex-direction의 기본값은 row입니다.
    주요 속성값으로는 flex-start, flex-end, center, space-between, space-around가 있습니다.

    • flex-start(기본값): 주죽의 시작 부분을 기준으로 flex item을 정렬합니다.
    • flex-end: 주축의 끝부분을 기준으로 flex item을 정렬합니다.
    • center: 주축의 중앙을 기준으로 flex item을 정렬합니다.
    • space-between: 첫 번째와 마지막 flex item은 주축의 시작 부분과 끝부분에 정렬하고 나머지 flex item을 일정한 간격으로 정렬합니다.
    • space-around: 주축을 기준으로 flex item을 일정한 간격으로 정렬합니다.
  2. align-items : 축 수직 방향 정렬
    align-items속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
    이때 flex-direction의 기본값은 row입니다.
    주요 속성값으로는 stretch, flex-start, flex-end, center, baseline이 있습니다.


- 자식 요소에 적용해야 하는 Flexbox 속성

부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련있습니다.

  • flex 속성의 값
    flex속성에는 세 가지 값을 지정해줄 수 있습니다.
flex: <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

자식 요소에 flex속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서 오른쪽으로 콘텐츠의 크기만큼 배치됩니다.

flex: 0 1 auto; <- flex: glow shrink basis

flex 속성 안에 세 가지 값을 한 번에 설정해줄 필요 없이, 다음과 같이 각 값을 따로 지정해줄 수 있습니다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
  1. grow : 자식 박스는 얼마나 늘어날 수 있을까요?
    grow(팽창 지수)는 flex item의 확장에 관련된 속성이며, 0과 양의 정수를 속성값에 사용합니다. 기본값은 0입니다.
    자세히 말하자면 grow(팽창 지수)는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것입니다. 즉, 절대적인 크기가 아닌 비율로 빈 공간을 차지하게 됩니다.
    속성값이 0이면 flex container의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지됩니다. 속성값을 1이상으로 설정하면 flex container의 크기가 커질 때 flex item의 크기도 커집니다.

  2. shrink : 자식 박스는 얼마나 줄어들 수 있을까요?
    shrink(수축 지수)는 flex item의 축소에 관련된 속성이며, 0과 양의 정수를 속성값에 사용합니다. 기본값은 1입니다.
    하지만 비율로 레이아웃을 지정할 경우 flex-grow속성 또는 flex:<grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장합니다.
    flex-grow 속성으로 비율을 변경하는 경우, flex-shrink속성은 기본값인 1로 두어도 무방합니다.
    속성값이 0이면 flex container의 크기가 작아져도 flex item의 크기가 작아지지 않고 원래 크기로 유지됩니다. 속성값을 1 이상이면 flex container의 크기가 작아질 때 flex item의 크기도 작아집니다.

  3. basis : 이 박스의 기본 크기는 얼마일까요?
    basis(기본 크기)는 flex item의 기본 크기를 결정하는 속성입니다. 기본값은 auto입니다.
    flex-basis속성에서 auto와 함께 자주 사용하는 속성값이 0입니다.
    flex-basis속성값을 0으로 설정하면 flex item은 절대적 flex item(absolute flex item)이 되어 flex container를 기준으로 크기가 결정됩니다.
    flex-basis속성값을 auto로 설정하면 flex item은 상대적 flex item(relative flex item)이 되어 컨텐츠의 크기를 기준으로 크기가 결정됩니다.

    flex-grow속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수 있습니다.
    flex-grow가 0인 경우에만basis크기를 지정하면 그 크기는 유지됩니다.
    - 참고 사항

    • flex-basis 속성의 값을 0으로 선언할 경우에는 0px, 0%와 같이 단위도 함께 설정해야합니다.
    • widthflex-basis를 동시에 적용하는 경우, flex-basis 가 우선됩니다.
    • 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
    • (flex-basis를 사용하지 않는다면)콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.
  • flex: 1의 의미
    flex: 1의 속성은 flex: 1 1 0속성을 의미합니다.
    flex-grow 속성값이 1이고 flex-shrink 속성값이 1이기 때문에 flex container의 크기에 따라 flex item의 크기도 커지거나 작아집니다.
    flex 속성에 한 개의 정수값만 있으면 이것은 flex-grow 속성의 값만 지정하는 단축 속성입니다.

    flexflex-growflex-shrinkflex-basis
    initial(기본값)01auto
    none00auto
    auto11auto
    양의 정수숫자10
    • initial(기본값): flex container의 크기가 작아지면 flex item의 크기가 작아진다. 하지만 flex container의 크기가 커져도 flex item의 크기는 커지지 않는다.
    • none: item의 크기가 커지거나 작아지지 않는다. flex container의 크기에 영향을 받지 않고, flex item의 원래 크기를 유지한다.
    • auto: flex container의 크기에 맞추어 flex item의 크기가 커지거나 작아진다.
    • 양의 정수: flex container를 일정한 비율로 나눠 가지면서 flex container의 크기에 따리 flex item의 크기가 커지거나 작아진다.
  • 요소의 바깥 여백(margin) 속성값 auto를 이용한 flex item 배치

    • flex item을 수평으로 배치할 때
      • margin-right: auto : 바깥 여백이 오른쪽의 모든 공간을 차지하기 위해 flex item을 오른쪽에서 왼쪽으로 민다.
      • margin: 0 auto: 바깥 여백이 flex item을 양쪽에서 밀기 때문에 flex item가 수평 중앙에 위치한다.
      • margin-left: auto : 바깥 여백이 왼쪽의 모든 공간을 차지하기 위해 flex item을 왼쪽에서 오른쪽으로 민다.
    • flex item을 수직으로 배치할 때
      • margin-bottom: auto : 바깥 여백이 아래쪽의 모든 공간을 차지하기 위해 flex item을 아래쪽에서 위쪽으로 민다.
      • margin: auto 0: 바깥 여백이 flex item을 위아래에서 밀기 때문에 flex item을 수직 중앙에 위치한다.
      • margin-left: auto : 바깥 여백이 위쪽의 모든 공간을 차지하기 위해 flex item을 위쪽에서 아래쪽으로 민다.

0개의 댓글