HTML.CSS로 웹 페이지 꾸미기

CSS3로 웹 페이지 꾸미기: 스타일의 마법사

웹 페이지를 만드는 과정에서 HTML이 뼈대라면, CSS는 그 뼈대에 옷을 입히는 마법입니다. 오늘은 CSS3의 강력한 시각 효과 중에서도

텍스트 그림자(text-shadow)

와

박스 그림자(box-shadow)

에 대해 알아보겠습니다.

---

📌 목차

• CSS3란 무엇인가?
• text-shadow: 텍스트에 그림자 주기
• box-shadow: 요소에 입체감 주기
• 마무리하며

---

🎨 CSS3란 무엇인가?

CSS3는 웹 페이지의 시각적인 스타일을 제어하는 기술로, 텍스트, 색상, 배경, 그림자, 애니메이션 등을 풍부하게 표현할 수 있게 해줍니다.

예전에는 단순한 텍스트 색상과 배경만 지정할 수 있었지만, CSS3부터는 그림자 효과, 둥근 테두리, 트랜지션 등 시각적 효과가 눈에 띄게 향상되었습니다.

---

🖋️ 텍스트 그림자 text-shadow

text-shadow는 텍스트에 그림자 효과를 주어 입체감을 줄 수 있는 속성입니다. 기본 문법은 다음과 같습니다:

text-shadow: 가로_옵셋 세로_옵셋 번짐_반경 색상;

✅ 기본 예제

.shadowText {
  text-shadow: 2px 2px 5px gray;
}

✅ 다중 그림자 예제

.multiEffect {
  text-shadow: 2px 2px 2px black,
               0 0 25px blue,
               0 0 5px darkblue;
}

이 문장은 그림자 효과가 적용된 텍스트입니다!

---

📦 박스 그림자 box-shadow

box-shadow는 버튼, 카드, 이미지 등에 그림자를 부여하여 입체감과 강조 효과를 줄 수 있습니다.

box-shadow: 가로_옵셋 세로_옵셋 [번짐_반경] [확장_반경] 색상 [inset];

✅ 기본 박스 그림자

.redBox {
  box-shadow: 10px 10px red;
}

✅ 번짐 효과 추가

.blurBox {
  box-shadow: 10px 10px 5px skyblue;
}

✅ 다중 그림자 효과

.multiEffect {
  box-shadow: 2px 2px 2px black,
               0 0 25px blue,
               0 0 5px darkblue;
}

이 박스는 box-shadow로 입체감을 주었습니다.

---

✨ 마무리하며

CSS3는 단순한 꾸밈이 아닌 웹의 감성을 입히는 기술입니다. text-shadow와 box-shadow는 간단하지만 웹 페이지의 퀄리티를 확 높여주는 효과입니다.

작은 효과부터 하나씩 적용해보며 실력을 키워 보세요. 다음 시간에는 CSS3 애니메이션과 트랜지션도 다뤄보겠습니다!

---

✅ 도움이 되셨다면 공감 & 댓글 부탁드려요!
🔔 더 많은 웹 개발 정보는 계속됩니다 :)