글자나, 상자나 등등 그림자 효과를 줄수 있습니다.
대략 이렇게요
그림자 주는 중료는 2가지가 있습니다.
1.텍스트 쉐도우
2.박스 쉐도우
너무 직관적이라서 뭘하려는지 바로 알수있습니다.
시작하겠습니다.
1. 우선 h1 태그를 사용하든 뭘하든
5줄을 만들어 주고, 클레스를 각자 지정해보도록 하겠습니다.
2. style 부분에
text-shadw를 사용하였습니다.
사용법은
text-shadow: 가로 세로 번짐정도 색상
입니다. 여기서 가로는 +로 갈수록 오른쪽,
세로는 +로 갈수록 아래쪽입니다.
(*수학 그래프랑 다르게 오른쪽,아래쪽 이 양수입니다. 참고로 z 의 양수값은 모니터에서 내얼굴로 오는 방향입니다)
그렇기 때문에 text-shadow: 3px 3px 5px red
라고 하면 오른쪽 아래로 빨간색 그림자가 생기는 겁니다
, 콤마는 쓰지 않습니다.
번짐정도는 높을수록 크게 퍼지니 값을 입력해보며 아아 그렇구나 하시면 됩니다.
3 .
text 5번처럼 하나의 text에 2개 이상의 효과를 줄수있습니다.
5번만 연습해보고, 넘어가도록 합니다.
4, 박스 쉐도우 입니다.
박스를 만들고 마진값을 줘서 약간 안쪽으로 당겨봅니다.
(여기서 마진값은 안줘도 되는 그런 값입니다. 그냥 예시보기 좋으라고 안쪽으로 땡겨놓은겁니다)
5.
box-shadow 을 적어주고, 텍스트쉐도우랑 같이 세부 속성값을 적어줍니다.
box-showdow : 가로 세로 퍼짐정도 색상
입니다.
6.초록색 그림자도 추가해봤습니다.
text shadow 와 마찬가지로 동시에 두가지 이상 효과도 넣을수 있습니다.
이상입니다.~