[CSS] 트랜지션과 반응형 웹 디자인 이해하기

웹 사이트를 사용자 친화적이고 세련되게 만들기 위해 꼭 알아야 할 CSS 속성 중 하나는 트랜지션입니다. 또한 다양한 기기에서도 잘 보이도록 제작하는 반응형 웹 역시 현대 웹 디자인의 필수 요소입니다. 이번 글에서는 트랜지션 속성과 반응형 웹 제작의 핵심 개념인 미디어 쿼리에 대해 정리하였습니다.

 

1. 트랜지션 속성

요소의 스타일 변화에 부드러운 애니메이션 효과를 적용할 때 사용하는 속성입니다. CSS의 transition 속성을 사용하면, 배경색, 크기, 위치 등 스타일이 변경될 때 즉각 바뀌는 것이 아니라 서서히 변화하게 만들 수 있습니다.

 

1) 기본 문법

transition: 속성 지속시간 지연시간 타이밍함수;

 

예시:

.box {
  transition: all 0.3s ease-in-out;
}

• all : 모든 속성에 적용
• 0.3s : 0.3초 동안 변화
• ease-in-out : 타이밍 함수 (변화 속도 패턴)

 

2. # transition-timing-function 함수의 기능

변화 속도의 곡선을 지정하는 함수입니다.

함수 이름	설명
ease	느리게 시작해서 빠르게 끝나고, 다시 느려짐 (기본값)
linear	시작부터 끝까지 일정한 속도
ease-in	느리게 시작해서 점점 빨라짐
ease-out	빠르게 시작해서 느려짐
ease-in-out	느리게 시작해서 빠르게 변하고 다시 느려짐
cubic-bezier(x1, y1, x2, y2)	직접 정의한 베지어 곡선 사용 가능

 

예시:

transition: all 0.5s ease-in;

 

3. 반응형 웹 & 미디어 쿼리

기기의 화면 크기에 따라 콘텐츠를 적절하게 배치하고 스타일을 바꾸는 기술입니다.

 

1) 반응형 웹이란?

화면 크기(PC, 태블릿, 모바일)에 자동으로 반응하여 레이아웃이 조정되는 웹 페이지를 말합니다. 별도의 모바일 페이지를 만들 필요 없이 하나의 HTML 문서로 모든 기기에 대응할 수 있습니다.

 

2) 뷰포트란?

웹 브라우저에서 실제 콘텐츠가 표시되는 영역을 말합니다.
반응형 웹에서는 뷰포트 단위를 사용하여 비율 기반의 크기를 설정합니다.

단위	설명
vw	브라우저 너비의 1%
vh	브라우저 높이의 1%
vmin	너비와 높이 중 작은 값의 1%
vmax	너비와 높이 중 큰 값의 1%

div {
  width: 80vw; /* 전체 너비의 80% */
  height: 50vh; /* 전체 높이의 50% */
}

 

3) 미디어 쿼리란?

접속 장치의 조건(해상도, 화면 너비 등)에 따라 특정 CSS를 적용할 수 있게 해주는 기능입니다.

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

 

위 코드는 화면 너비가 768px 이하인 기기에서만 배경색을 회색으로 바꾸도록 지정합니다.

 

4. 중단점 (breakpoint)이란?

디자인을 전환할 기준이 되는 해상도 또는 너비입니다.
주로 사용되는 중단점 예시:

• 1200px 이상 : 데스크탑
• 992px ~ 1199px : 태블릿 가로
• 768px ~ 991px : 태블릿 세로
• 576px 이하 : 모바일

 

5. 마무리 정리

• transition 속성을 통해 요소의 변화가 부드럽게 이어질 수 있도록 합니다.
• transition-timing-function을 활용하면 원하는 속도 곡선을 만들 수 있습니다.
• 반응형 웹은 다양한 기기에서 콘텐츠를 최적화하여 보여주는 기술이며, 미디어 쿼리를 통해 이를 쉽게 구현할 수 있습니다.