CSS text-shadow box-shadow 요소 그림자 효과 사용법
CSS3에서 스타일 만으로도 다양한 그림자 효과를 연출할 수 있습니다. 각 요소에 대한 마크업 방법과 결과값을 한번 살펴보겠습니다.
See the Pen CSS : text-shadow / box-shadow by rgy0409 (@rgy0409) on CodePen.
먼저 HTML 태그 상태 입니다. p태그와 div, button 세 개의 요소만 사용하고 있고 각각 글씨, 상자, 버튼 속성을 가진 요소 입니다. 이 모든 요소에 그림자 효과가 사용 가능합니다.
다음은 CSS 스타일 입니다. 글씨에 그림자를 만드려면 text-shadow를, 박스나 버튼에 그림자 효과를 연출하려면 box-shadow 요소를 사용하시면 됩니다. 그 뒤에 오는 숫자와 색상을 지정하시면 되며 box-shadow의 경우는 숫자가 4개가 들어오는데 각 숫자의 의미는 주석으로 달아놨으니 한번 살펴봐주세요. 잘 안보이시는 분들을 위해서 아래에도 한번 더 작성해 놓겠습니다.
text-shadow : 가로px 세로px 색상값(이름);
box-shadow : 가로px, 세로px, 선명도px, 영역px 색상값(이름)
가로와 세로의 크기값에서 -가 붙으면 반대로 생성됩니다. 또한 box-shadow의 경우에서 선명도와 영역은 각각 블루어 효과와 효과 범위를 지정합니다. 선명도의 값이 커지면 퍼짐이 심해집니다. 선명도의 값이 0이면 그림자는 뚜렷합니다. 영역의 값이 커지면 그림자 적용 영역이 넓어집니다. 설명으로는 이해가 잘 안 될 수도 있을테니 바로 예제로 살펴보시겠습니다. 보시면 어떻게 그림자가 적용되어지며 방향도 어디를 수정해야 원하는 위치에 나타나게 할 것인지 이해가 되실 것 입니다. 이제 그림자 효과를 사용해서 개성 넘치는 스타일을 만들어 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
