[css] 글자에 그림자 넣기 text-shadow (+글꼴, 크기 : font-family-size)
css를 사용하면 글자에 그림자도 넣을 수 있습니다.
원래는 css3 전에는 그림자효과가 없었다고합니다.
그런데 업그레이드되어서 이제 text-shadow속성을 사용하면
무려 그림자를 나타낼 수 있게됩니다.. 신기하네요!
사용 방법은 위와 같습니다.
css스타일 시트에서 속성으로 text-shadow를 주면됩니다.
그런데 왜 값이 4개나 될까요?
왜냐하면 각각 나타내는 값이 있기 때문입니다.
첫 번째로 오는 녀석은 오른쪽그림자길이
두 번째로 오는 놈은 아래쪽그림자길이
세 번째로 오는 녀석은 흐린정도
그리고 마지막은 그림자 색상을 나타냅니다.
위 와 같이 코드를 작성하고 실행해주게되면,
결과는 이렇게 나오게됩니다.
저는 h3선택자에다가 그림자 속성을 주었으니
저렇게 그림자가 떡 하고 나오는 것을 알 수 있습니다.
css : 글꼴, 글자크기 font-familt, font-size
가장 기본적으로 많이 사용되는 글꼴지정은
폰트페밀리 속성을 사용해서 지정합니다.
글자크기는 폰트사이즈속성으로 지정해서 사용하시면되겠습니다.
px는 픽셀을 나타내며 신기하게 센티미터단위인 cm를 사용할 수도 있습니다.
이렇게 해서 css를 사용해서 간단히 글자에 그림자를 입히는 방법과
글꼴과 그 크기를 지정할 수 있는 방법도 학습해보았습니다.
'Web > HTML5·css' 카테고리의 다른 글
코딩야학 5기 - 1일차 190102 : WEB1 ~HTML코딩과 실습환경 준비 (0) | 2019.01.03 |
---|---|
[css] 링크(link) 클릭했을 때, 마우스올렸을 때 (visited, hover, active) 07 (0) | 2017.11.20 |
[html-css] 줄간격 정렬, 밑줄 (text-align-decoration,line-height) 04 (4) | 2017.11.11 |
시험을 위한 html정리를 끄적여봤습니다 (6) | 2017.10.21 |
html - H태그 파해치기 이걸 왜 써 03 (4) | 2017.09.26 |