[TIL]20250407

김민석·2025년 4월 7일

오늘 목표

수업 전 7시 기상 후 운동(O)
수업 내용 모르는 거 및 공부내용 정리(O)
Css flex 및 grid 학습 해보기(O)

공부내용

transition을 hover 및 다른 동작에 넣을 지 아님 그전에 넣을지 생각해보자

CSS transition은 어떤 스타일 속성이 어떻게 부드럽게 변할지를 정의

.fa-bars {
  cursor: pointer;
  transition: 0.3s ease;
}
.fa-bars:hover {
  color: red;
}

이전 상태에 넣게 되면 올릴때와 내릴 때 모두 자연스럽게 보인다.

만약에 hover에 transition을 주게된다면

.fa-bars {
  cursor: pointer;
  
}
.fa-bars:hover {
  color: red;
  transition: 0.3s ease;
}

올라갈 때만 부드럽지만 내려올 때는 transition이 적용이 안되는 듯이 보일 수 있다.

Layout 구성할 때 grid flex 무엇을 써야할까?..

1차원 정렬만 필요할 때 ✅ flex

2차원 정렬이 필요할 때 ✅ grid

콘텐츠 크기에 따라 자동 정렬 (아이템이 몇 개가 될지 모를 때) ✅ grid (auto-fit, auto-fill)

정렬, 정중앙 배치, 간단한 열 구성 ✅ flex

명확한 행/열 위치 지정, 레이아웃 스케치처럼 디자인 ✅ grid

flex 사용 예시

한 줄에 정렬하거나 세로로 한 방향 정렬만 할 때
요소 간 간격 주기, 가운데 정렬하기
justify-content, align-items 같은 속성으로 조절할 수 있을 때

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ex)네비게이션 바, 버튼 리스트, 카드 1줄 정렬 등

grid 사용 예시

행과 열이 같이 있는 구조
각각 아이템을 셀처럼 위치시키고 싶을 때
반응형으로 정렬을 자유롭게 조절하고 싶을 때


.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
예: 포트폴리오 그리드, 이미지 갤러리, 상품 리스트, 레이아웃 전체 구성 등

background-image 왜 사용하나

background-image는 브라우저 렌더링 우선순위에서 일반 img 태그보다 낮은 우선순위를 가집니다. 브라우저는 콘텐츠 이미지(img)를 장식용 이미지(background-image)보다 중요하게 처리하기 때문입니다.

레이아웃 통제력: 이미지 위에 텍스트나 다른 요소를 쉽게 배치할 수 있습니다

CSS로 조작 용이: background-size, background-position 등으로 더 세밀한 제어가 가능합니다

콘텐츠와 표현의 분리: 의미적으로 중요하지 않은 이미지는 CSS에서 처리하는 것이 좋은 구조입니다

background-size

background-size: contain을 사용하면 요소 안에 이미지가 온전히 표시되며 비율이 유지됩니다
background-size: cover는 요소를 완전히 채우도록 이미지 크기를 조절하면서 비율은 유지합니다

padding-top으로 써서 비율을 유지하는 레이아웃 기법

.container {
  width: 100%;
  padding-top: 56.25%; /* → 16:9 비율 유지 
  background-image: url('이미지경로.jpg');
  background-size: cover;
  background-position: center;
}