• 목록

웹에 생동감을 불어넣는 CSS3 핵심 기술

1. CSS3란 무엇인가?

이전 버전(CSS2)이 단순히 문서를 꾸미는 도구였다면, CSS3는 애니메이션, 입체감, 정교한 레이아웃을 자바스크립트 없이도 구현할 수 있게 해주는 현대 웹 디자인의 핵심입니다.

2. 반드시 알아야 할 CSS3 핵심 기능

① 둥근 모서리와 그림자 (박스 디자인)

이미지를 일일이 만들지 않아도 코드 한 줄로 입체감을 줍니다.

• border-radius: 박스의 모서리를 부드럽게 깎습니다.

• box-shadow: 요소에 그림자를 넣어 붕 떠 있는 듯한 효과를 줍니다.

② 그라데이션 (Gradient)

단색 배경에서 벗어나 화려한 색감의 배경을 만듭니다.

• linear-gradient: 선형 그라데이션

• radial-gradient: 원형 그라데이션

③ 트랜지션과 애니메이션 (Motion)

사용자의 움직임에 반응하는 역동적인 사이트를 만듭니다.

• transition: 마우스를 올렸을 때 색상이 서서히 변하는 등의 효과

• @keyframes / animation: 무한히 회전하거나 통통 튀는 움직임 구현

④ 변형 (Transform)

요소를 회전하거나 크기를 조절하고, 비틀 수 있습니다.

• rotate, scale, translate, skew 등

3. 실전 코드 예시 (버튼 만들기)

.modern-btn {
    background: linear-gradient(to right, #ff416c, #ff4b2b); /* 그라데이션 */
    border: none;
    border-radius: 25px; /* 둥근 모서리 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* 그림자 */
    color: white;
    padding: 10px 25px;
    transition: transform 0.3s ease; /* 부드러운 변화 */
    cursor: pointer;
}

.modern-btn:hover {
    transform: translateY(-5px) scale(1.1); /* 위로 살짝 뜨면서 커짐 */
}

• 목록