loading
본문 바로가기 메뉴 바로가기
[CSS3] text-shadow, box-shadow 글자와 박스에 그림자 생성하기

text-shadow와 box-shadow를 이용하여 요소에 그림자를 추가해 주는 기능입니다. 포토샵에서의 drop-shadow와 비슷한 기능이라고 이해하면 될 것 같습니다. (1) text-shadow : 텍스트에 그림자 추가하기 text-shadow : 가로축거리 세로축거리 퍼짐도 색상; 다음의 예제를 통해 text-shadow의 사용법을 알아보겠습니다. TEST1 TEST2 2개의 태그를 이용하여 텍스트를 입력합니다. 태그에 공통으로 글자의 모양을 설정해 준 뒤, nth-child를 이용하여 text-shadow에 각기 다른 속성 값을 입력합니다. 첫 번째 태그에는 그림자의 가로축과 세로축 거리를 플러스 값으로, 두 번째 태그에는 마이너스 값으로 설정한 뒤, 퍼짐도 의 수치를 2배 정도 증가시킵니다..

💕IT 공부하기/CSS3 2023. 4. 17. 17:19
이전 1 다음
이전 다음

티스토리툴바

이메일: help@abaeksite.com | 운영자 : 아로스
제작 : 아로스
Copyrights © 2022 All Rights Reserved by (주)아백.

※ 해당 웹사이트는 정보 전달을 목적으로 운영하고 있으며, 금융 상품 판매 및 중개의 목적이 아닌 정보만 전달합니다. 또한, 어떠한 지적재산권 또한 침해하지 않고 있음을 명시합니다. 조회, 신청 및 다운로드와 같은 편의 서비스에 관한 내용은 관련 처리기관 홈페이지를 참고하시기 바랍니다.