📂 목차

• CSS 심화
  • Flex Box
  • Grid Layout
  • Animation & Transition
  • 상속과 우선순위
    • 상속
    • 우선순위
  • CSS 함수 및 유틸리티

📚 본문

CSS 심화

Flex Box

플렉스 박스는 1차원 레이아웃 시스템으로, 행, 열을 단위로하여서 컨텐츠를 정렬시킨다.

CSS properties

• display: flex
  • flex-direction: row, column
• justify-content: main axis(start, center, space-between 등)
• align-items: cross axis 정렬 (stretch, center 등)
• flex-grow, flex-shrink, flex-basis: 공간 분배 제어
• order: DOM 순서와 관계없이 배치 순서 변경

Grid Layout

2차원 레이아웃 시스템, 행과 열 모두 정의 가능.

CSS properties

• display: grid
• grid-template-columns, grid-template-rows : 열/행 정의
• gap : 행과 열 간격
• grid-template-areas : 영역 이름을 통해 레이아웃 정의
• minmax(), auto-fit, auto-fill : 반응형 그리드 구현

Animation & Transition

트랜지션은 상태 변화에 대한 애니메이션 효과를 적용함을 이전 포스트에서 봤었다. 이번에는 더 자세히 보자.

모든 변화에 대한 0.3 초 동안 이동하는 방법 ease-in-out 으로 설정

transition: all 0.3s ease-in-out

애니메이션은 키프레임 기반으로 자유로운 애니메이션을 구현할 수 있다. 여기서 all 이라는 것은 모든 태그가 변경되는 것을 트리거 하겠다는 의미다.

/* 키프레임 정의: 위아래로 튀는 효과 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* div 요소에 애니메이션 적용 */
div {
  animation-name: bounce;              /* 어떤 키프레임을 적용할지 */
  animation-duration: 1s;              /* 한 번 애니메이션이 완료되는 시간 */
  animation-timing-function: ease-in-out; /* 속도 패턴 지정 */
  animation-delay: 0s;                 /* 애니메이션 시작 지연 시간 */
  animation-iteration-count: infinite; /* 반복 횟수 (무한 반복) */
  animation-direction: alternate;      /* 정방향 ↔ 역방향 반복 */
  animation-fill-mode: forwards;       /* 종료 상태 유지 */
}

infinite 를 적용시키면 계속 반복하는 것을 알 수 있다. 속도는 timing-function 으로 설정할 수 있다.

keyframes 로 시간 별 transition 을 설정하고, 설정 후 선택자 내부의 속성-값으로 animation 을 이용해 해당 keyframes 를 가져와 사용

상속과 우선순위

상속

CSS 상속에는 일부 속성만 상속한다.

• color: 글자 색
• font-family: 글꼴
• font-size: 글자 크기
• font-style: 글자 스타일
• font-variant: 글자 변형
• font-weight: 글자 두께
• line-height: 줄 높이
• letter-spacing: 글자 간격
• …

글자에 대한건 전부 상속됨을 알 수 있다. 상속되지 않는 속성은 명시적으로 속성-값을 통해 CSS 설정을 해주어야 한다.

우선순위

• !important
• inline style: 태그 자체에 직접 넣는 것
• ID selector
• Class/Attribute/Pseudo-class
• Element/Pseudo-element

!important 는 CSS 에서 가장 최우선적으로 적용할 수 있도록 하는 애다. 하지만 이미 다른 곳에서 해당 선택자의 속성-값으로 !important 를 하고 있다면 그 아래 순서를 또 따르게 된다.

CSS 함수 및 유틸리티

CSS 변수

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --base-font-size: 16px;
}

button {
  background-color: var(--primary-color);
  color: white;
  font-size: calc(var(--base-font-size) * 1.2);
}

컨벤션은 변수명은 –로 시작한다는 점이다.

calc()

.container {
  width: calc(100% - 40px);
  height: calc(50vh - 20px);
}

clamp()

p {
  font-size: clamp(14px, 2vw, 20px);
}

최소, 권장값, 최대 를 설정한다.

유틸리티

• overflow: hidden / auto / scroll : 스크롤 관리
• text-overflow: ellipsis : 글자 줄임표
• pointer-events: none : 특정 요소 클릭 방지 (무쓸모)
• user-select: none : 텍스트 선택 방지 (무쓸모)