Flex와 Grid

• display: flex와 display: grid는 요소를 배치하고 정렬하는데 사용
• 부모 요소에 display: flex 또는 display: grid를 설정하면 그 안의 자식 요소들이 영향을 받음

<aside>

Flex

Flexbox는 1차원 레이아웃 도구로, 자식 요소를 가로(row) 또는 **세로(column)**로 정렬하고, 요소 간의 간격을 쉽게 조정

display: flex;를 부모 요소에 설정하여 활성화

• 예시 코드

• 함께 사용할 수 있는 주요 속성

  ✔️ flex-direction 자식 요소를 배치할 방향을 설정

  

  • row (기본값): 요소를 가로로 배치.
  • row-reverse: 요소를 가로로 배치하되, 순서를 뒤집음.
  • column: 요소를 세로로 배치.
  • column-reverse: 요소를 세로로 배치하되, 순서를 뒤집음.

  ✔️ justify-content 자식 요소의 가로 정렬(주 축) 방식을 설정

  

  • flex-start (기본값): 왼쪽 정렬.
  • flex-end: 오른쪽 정렬.
  • center: 가운데 정렬.
  • space-between: 양 끝을 맞추고 요소 간 간격 균등.
  • space-around: 요소 간 간격 균등 + 바깥 간격 포함.
  • space-evenly: 요소 간 간격을 완전히 균등하게 분배.

  ✔️ gap 자식 요소 간의 간격 설정

  • 길이 값(px, %, em 등): 간격 크기 설정

  ✔️ align-items 자식 요소의 세로 정렬(교차 축) 방식을 설정

  

  • stretch (기본값): 자식 요소를 컨테이너 높이에 맞게 늘림.
  • flex-start: 위쪽 정렬.
  • flex-end: 아래쪽 정렬.
  • center: 세로 가운데 정렬.
  • baseline: 텍스트 기준선을 기준으로 정렬

  ✔️ flex-wrap 요소가 컨테이너를 벗어날 때 줄바꿈 여부를 설정

  

  • nowrap (기본값): 줄바꿈 없음.
  • wrap: 줄바꿈 허용.
  • wrap-reverse: 줄바꿈 허용, 순서를 뒤집음 </aside>

<aside>

• [실습] flex를 활용하여 가로 slide 만들기 </aside>

<aside>

Grid

Grid는 2차원 레이아웃 도구로, 요소를 행(row)과 열(column)에 배치하며 복잡한 레이아웃을 간단히 구현

display: grid;를 부모 요소에 설정하여 활성화

• 예시 코드

• 함께 사용할 수 있는 주요 속성

  ✔️ grid-template-columns 열(column)의 크기를 설정합니다.

  • 길이 값(px, %, fr 등): 열의 크기를 설정.
  • repeat(n, 값): 값을 반복.
  • minmax(최소값, 최대값): 최소~최대 크기 설정.

  .container {
      grid-template-columns: 100px 1fr 2fr; /* 1열: 100px, 2열: 1fr, 3열: 2fr */
      grid-template-columns: repeat(3, 1fr); /* 3개의 열, 동일 비율 */
  }
  

  <aside>

  fr 단위란?

  fr 단위는 다른 열(또는 행)들과 비율을 기반으로 공간을 나눕니다. 예를 들어, 1fr 2fr은 전체 남은 공간을 1:2의 비율로 나누는 것을 의미합니다. 픽셀 값, 백분율 등 다른 고정적인 단위가 설정된 영역을 제외한 남은 공간을 계산하여 나눕니다.

  </aside>

  ✔️ grid-template-rows 행(row)의 크기를 설정합니다.

  • 길이 값(px, %, fr 등): 행의 크기를 설정.
  • repeat(n, 값): 값을 반복.

  ✔️ grid-column 그리드 아이템이 **가로 방향(열)**에서 시작할 위치와 끝날 위치를 지정 grid-row 그리드 아이템이 **세로 방향(행)**에서 시작할 위치와 끝날 위치를 지정

  .item {
  		grid-column: <start> / <end>;
  		grid-row: <start> / <end>;
  }
  

  .item {
      grid-row: 2 / 4; /* 두 번째 행에서 시작해 네 번째 행 **앞에서** 끝남 */
  }
  

  • 축약형(속성값 중 앞은 무조건 span 키워드가 사용됩니다.)

  grid-column: span 2; /* 두 열을 차지 */
  grid-row: span 3; /* 세 행을 차지 */
  

  ✔️ gap 행과 열 간의 간격을 설정합니다.

  • 길이 값(px, %, em 등): 간격 크기 설정. </aside>

트랜지션(Transition)과 애니메이션(Animation)

트랜지션과 애니메이션은 모두 CSS에서 동적인 효과를 추가하기 위한 도구, 요소의 스타일 변화를 부드럽게 만들지만, 사용 목적과 동작 방식에서 차이가 존재

<aside>

트랜지션이란?

• 요소의 하나의 상태에서 다른 상태로 변화할 때 그 과정을 부드럽게 만드는 CSS 기법 예) 버튼의 색깔이 즉시 변하지 않고 천천히 변하도록 설정하는 것
• 트랜지션을 적용하기 위해서는 스타일 변경의 **트리거(Trigger)**가 필요. 스타일 속성 값이 변경되어야 transition이 작동됨!

<aside>

트리거의 종류

의사 클래스 (예: :hover, :focus, :active)

JavaScript 이벤트 (예: 클래스 추가/제거)

미디어 쿼리 조건 변경

background-color: 배경색 변화

0.5s: 변화가 0.5초 동안 진행

ease-in-out: 천천히 시작하고 끝남

0.2s: 0.2초 후에 시작

두 transition 속성값을 콤마(,)로 연결

</aside>

<aside>

트랜지션 주요 속성값

transition: <property> <duration> <timing-function> <delay>;

• <property> (필수)
• <duration> (필수)
• <timing-function> (선택)
• <delay> (선택) </aside>

transform 속성이란?

transform속성은 요소를 2D(2차원) 또는 3D(3차원) 공간에서 변형할 수 있게 해주는 CSS 속성 요소의 크기, 위치, 회전, 기울기 등을 조정하여 시각적으로 변화를 줄 수 있음!

• 예시 코드

<aside>

</aside>

</aside>

<aside>

</aside>