ChangMinYang

코딩노잼

반응형 CSS 및 Flexbox

본 내용은 'The Web Developer 부트캠프 2023', 'Mozilla Developer Network'를 참고하여 작성했습니다.

1. flex

  • flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성
  • display:flex를 추가하면 된다.

2. Flexbox

  • CSS의 display 속성 중 하나로, 컨테이너들의 레이아웃, 정렬, 비율, 공간 등을 설정 하는 데에 유연하게 조정할 수 있다.
  • flexbox는 부모 요소인 flex container과 자식 요소인 flex item으로 구분된다.
  • default값은 flex item 배치 처럼 좌-우 방향으로 진행한다.
  • 주축(main axis)와 교차축(cross axis)를 활용하여 배치를 조정한다.

flexbox

1) flex-direction

  • 컨테이너 내의 아이템을 배치할 때 주축 및 방향(정방향, 역방향)을 결정한다.
  • default값은 좌-우 이다.
  • row, row-reverse, column, column-reverse 등이 있다.

2) flex-wrap

  • flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성
  • wrap은 여러 행에 걸쳐서 배치된다. default값은 위-아래 이다.
  • wrap, nowrap, wrap-reverse 등이 있다.

3) flex-basis

  • 요소가 배치되기 전에 요소의 최초 크기를 결정한다.

4) flex-grow

  • flex-item이 flex-container에 남은 공간이 있을 때 그 공간을 차지할 비율을 정한다.
  • 보통 flex-shrink, flex-basis와 함께 사용한다.

5) flex-shrink

  • flex-item의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다.
  • 만일 하나의 요소가 flex-shrink: 0;이라면 혼자만 줄어들지 않는다.

6) flex 속기법

  • flex에서 한줄로 basis, grow, shrink를 사용할 수 있다.
  • px나 em 단위는 basis 뿐이다.
/* One value, unitless number: flex-grow */
flex: 2;

/* One value, length or percentage: flex-basis */
flex: 10em;
flex: 30%;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

3. justify

1) justify-content

  • 주축을 기준으로 전체 항목 사이 및 주위 공간 정렬 방식을 결정한다.
  • start, center, end, space-between, space-around, space-evenly, baseline 등이 있다.

See the Pen justify-content by Changmin Yang (@ycm0926) on CodePen.

2) justify-items

  • 주축을 기준으로 개별 항목 사이 및 주위 공간 정렬 방식을 결정한다.
  • stretch, center, start, end, baseline 등이 있다.

See the Pen justify-items by Changmin Yang (@ycm0926) on CodePen.

3) justify-self

  • justify-items/content는 부모 요소의 자식들 전체를 묶어서 정렬을 하지만, justify-self은 부모 요소의 자식 아이템들 정렬을 개별로 설정 할 때 사용한다.

See the Pen justify-self by Changmin Yang (@ycm0926) on CodePen.

4. arlign

1) align-content

  • 행이 1줄이면 의미가 없으며, 2줄 이상이면 교차축을 기준으로 전체 항목이 움직이면서 line 정렬 방식을 결정한다. line 정렬 이므로, -> flex-wrap: warp 또는 flex-wrap: wrap-reverse가 적용되야 한다.
  • start, center, end, space-between, space-around, baseline 등이 있다.

See the Pen align-content by Changmin Yang (@ycm0926) on CodePen.

2) align-items

  • 한 행의 교차축을 기준으로 개별 항목 전체의 정렬 방식을 결정한다.
  • stretch, center, start, end, baseline 등이 있다.

See the Pen align-items by Changmin Yang (@ycm0926) on CodePen.

3) align-self

  • align-items/content는 부모 요소의 자식들 전체를 묶어서 정렬을 하지만, align-self은 부모 요소의 자식 아이템들 정렬을 각각 개별로 설정 할 때 사용한다.

See the Pen justify by Changmin Yang (@ycm0926) on CodePen.

baseline

  • 텍스트의 기준선에 맞춰 정렬한다.
  • 요소마다 높이가 다르다면 유용
  • 강의에서 실험한 코드

See the Pen Untitled by Changmin Yang (@ycm0926) on CodePen.

5. Media_Queries

  • CSS의 문법 중 하나이며, 미디어 쿼리는 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있다. 일반적으로 반응형 디자인을 사용할 때 많이 사용한다.
  • 사용 방법은 @-규칙 이라고 불리는 @media로 사용하며, 다른 프로그래밍 언어의 if 조건문과 비슷한 개념이다.

@-규칙

  • @-규칙은 스타일 규칙을 가져올 수 있는 규칙이며, 다른 프로그래밍 언어 모듈과 비슷한? 개념인 것 같다.
  • 예륻 들어, @import url(“fineprint.css”) 이면 다른 스타일 시트에서 스타일 규칙을 가져올 수 있다.

See the Pen Media Queries by Changmin Yang (@ycm0926) on CodePen.

댓글남기기

참고