도구 실행
웹 디자인에서 텍스트의 가독성을 높이고 시각적 깊이감을 더할 때 CSS의 text-shadow 속성을 자주 활용합니다. 이 도구는 가로 오프셋, 세로 오프셋, 흐림 반경 및 색상 값을 조합하여 브라우저 스타일시트에 바로 적용할 수 있는 CSS 텍스트 그림자 선언 코드를 생성합니다. 각 수치 입력란에는 픽셀 단위의 숫자를 지정할 수 있으며, 0을 입력하여 그림자의 위치 이동이나 흐림 효과를 제거할 수도 있습니다. 색상란에는 16진수 색상 코드나 기타 색상 텍스트를 입력할 수 있습니다. 값을 입력하지 않고 비워두면 가로 및 세로 오프셋은 1px, 흐림 반경은 2px, 색상은 반투명 검은색인 #00000033 기본값이 적용되어 완전한 구문의 CSS 코드가 완성됩니다.
사용 방법
- 가로 오프셋 입력란에 텍스트 그림자의 좌우 이동 거리를 숫자로 입력합니다.
- 세로 오프셋 입력란에 그림자의 상하 이동 거리를 숫자로 지정합니다.
- 흐림 반경 입력란에 그림자가 퍼지는 정도를 숫자로 입력합니다.
- 색상 입력란에 적용할 색상 코드(예: 16진수 색상)를 텍스트로 입력합니다.
- 실행 버튼을 누르면 완성된 CSS 텍스트 그림자 선언 코드가 결과 화면에 표시됩니다.
예시
- 가로 오프셋 2, 세로 오프셋 2, 흐림 반경 4, 색상 #333333을 입력하면 text-shadow: 2px 2px 4px #333333; 코드가 생성됩니다.
- 가로 오프셋 0, 세로 오프셋 0, 흐림 반경 0, 색상 #000000을 지정하면 번짐과 오프셋이 없는 text-shadow: 0px 0px 0px #000000; 구문이 생성됩니다.
자주 묻는 질문
수치 입력 시 px 단위를 직접 입력해야 합니까?
아닙니다. 가로 및 세로 오프셋과 흐림 반경 입력란에는 숫자만 입력하면 도구가 자동으로 px 단위를 추가합니다.
입력값을 비워두고 실행하면 어떻게 됩니까?
입력하지 않은 항목은 기본값(가로 1px, 세로 1px, 흐림 2px, 색상 #00000033)이 자동으로 적용되어 코드가 생성됩니다.
오프셋이나 흐림 반경에 0을 입력할 수 있습니까?
예, 가로와 세로 오프셋 및 흐림 반경 모두 0을 지원하며 정상적으로 0px 구문이 생성됩니다.