CSS3는 최신 웹 기술 중 하나로, 웹 페이지 디자인에 있어 매우 중요한 역할을 한다. 이번에는 CSS3에서 새로 추가된 기능과 그 적용 방법을 살펴보도록 하겠다.
1. 그림자 효과
그림자 효과는 CSS3에서 추가된 기능 중 하나로, 텍스트나 이미지 등에 그림자 효과를 적용하여 살아 있는 느낌을 연출할 수 있다. 그림자 효과의 속성은 다음과 같다.
– box-shadow: X축(offset-x) Y축(offset-y) 블러(blur) 스프레드(radius) 그림자 색상(color);
예를 들어, 텍스트에 그림자 효과를 적용하고 싶다면 다음과 같이 작성할 수 있다.
text-shadow: 2px 2px 5px #999;
2. 그라데이션
그라데이션은 기존의 색상을 서서히 변화시켜 부드러운 느낌을 연출하는 기능으로, CSS3에서는 그라데이션을 적용하는 것이 가능해졌다. 그라데이션의 속성은 다음과 같다.
– background: linear-gradient(시작 지점 방향, 색상1, 색상2, …);
예를 들어, 배경에 그라데이션 효과를 적용하고 싶다면 다음과 같이 작성할 수 있다.
background: linear-gradient(to right, #000000, #ffffff);
3. 폰트 아이콘
CSS3에서는 폰트 아이콘을 쉽게 적용할 수 있는 기능을 제공한다. 폰트 아이콘의 장점은 이미지 파일과 달리 확대해도 깨지지 않는다는 것이다. 폰트 아이콘의 속성은 다음과 같다.
– font-family: ‘아이콘 폰트명’;
– content: ‘\아이콘 이름’;
예를 들어, 검색 아이콘을 폰트 아이콘으로 적용하고 싶다면 다음과 같이 작성할 수 있다.
font-family: ‘Font Awesome’;
content: ‘\f002’;
위와 같은 방법으로 폰트 아이콘을 적용하면, 아이콘 이미지를 따로 준비할 필요 없이 쉽게 원하는 아이콘을 적용할 수 있다.
4. 반응형 디자인
반응형 디자인은 CSS3에 새로 추가된 가장 중요한 기능 중 하나이다. 반응형 디자인은 PC, 태블릿, 모바일 등 다양한 디바이스에서 웹 페이지가 적절하게 표시되도록 자동 조절하는 기능이다. 반응형 디자인의 속성은 다음과 같다.
– @media (조건) {
스타일 내용
}
예를 들어, 모바일 화면에서는 넓이가 100%로 보이도록, PC 화면에서는 940px로 보이도록 하고 싶다면 다음과 같이 작성할 수 있다.
@media (max-width: 767px) {
/* 모바일 화면 */
body {
width: 100%;
}
}
@media (min-width: 768px) {
/* PC 화면 */
body {
width: 940px;
}
}
위와 같은 방법으로 반응형 디자인을 쉽게 적용할 수 있다.
이렇게 CSS3에서 새로 추가된 기능과 그 적용 방법을 알아보았다. 반응형 디자인을 비롯한 다양한 기능을 적극 활용하여 보다 다양하고 효과적인 웹 페이지를 만들어보자.