웹에 생기를 불어넣는 스타일링
웹 페이지의 첫인상은 색상(Color)과 타이포그래피(Text)에 의해 결정됩니다. 눈이 편안한 색상 대비, 적절한 줄 간격, 그리고 폰트의 선택이 디자인의 퀄리티를 좌우합니다.
또한 현대적인 웹 디자인에서는 요소에 입체감(Shadow)을 부여하여 레이어를 분리하고 사용자의 시선을 유도합니다. 박스 그림자와 글자 그림자, 그리고 투명 이미지를 위한 필터 그림자의 차이를 명확히 이해해야 합니다.
1. CSS 그림자(Shadow) 완벽 가이드
적용 대상에 따라 각기 다른 그림자 속성을 사용해야 의도한 입체감을 얻을 수 있습니다.
2. 타이포그래피 필수 속성
글자를 제어하는 가장 기본적이고 빈번하게 사용되는 CSS 속성입니다.
| 속성 (Property) |
설명 및 권장사항 |
color
|
텍스트의 색상 (HEX, RGB, HSL 방식 지원) |
font-family
|
글꼴 종류 지정 (콤마로 우선순위 지정) |
line-height
|
줄 간격 (가독성을 위해 1.5 ~ 1.6 권장) |
text-align
|
문단 정렬 (left, center, right, justify) |