Chapter 10
HTML의 에서 진화 했다~ text-decoration
냐핫~ 드뎌 10회 입니다 ^.^
추카추카~~ (혼자 놀구있네..ㆀ)
흠, 제가 HTML강좌를 홈동에서 첨 만들었을 때가 생각 나네요..
10회기념..이랍시고, 이미지맵(Image Map)에 관한 강좌를 html문서로 작성하여 올렸던.. 흑..
아련한 추억입니다..ㅜ.ㅜ
아실분은 아시고, 모를분은 모르시구. ^^*
그럼 이제 시작 하겠습니다.
님들.. 모두 태그, 아시져?
UnderLine이라는 약칭과 동시에 글자에 밑줄을 그어주던 역할을 했습죠.
그 태그가 지금, 스타일 시트에서 재 부활 했습니다 ^^
바로 text-decoration(읽는 방법:텍스트-데코레이션)입니다.
문장이 좀 길다보니.. 외우는데 지장이 있을지도.. ^^a
아무튼, 이 text-decoration은 text라는 속성에 decoration이라는 부가 속성이 추가된 형태 입니다.
엇?! 그럼 왜 text에 대해서 자세히 설명 안하냐구요?
제가 보기엔.. text속성에서 decoration밖에 쓰일곳이 없는것 같아서요.
제가 아는건 이외에 3가지 더 있지만.
저두 잘 안쓰고, 이 3가지중 안되는게 1가지 입니다.
이 1가지가 쓸만한건데.. 음.. 에잇~~
보여드릴테니 알아서 판단하세여~~
▶text의 부가 속성 도표
▶text의 부가 속성 도표
text
decoration글자에 밑줄등을 추가 합니다none(기본값), underline, overline, line-through,
blink(네스 전용)
shadow이게 젤루 필요할것 같은데, 아예 적용이 안됩니다. ㅜ.ㅜ
실제로 텍스트에 그림자 효과를 주려면 다른 방법을 써야 되는데여..
제가 말했던 필요할것 같은 그 1가지의 정체 입니다.none(기본값), 색상
indent문장을 쓸때 한글자 정도 들여쓰기를 하게 해 줍니다.
이 역시 사용하지 않기를 권장합니다.
진짜 들여쓰기 해야겠다 라는 분만 쓰시길.길이 단위(*pt,*px같은거..)
transform이런게 있다고만 알았지, 필자는 외우지도 않았습니다. -_-a
한마디로 쓸모 없는것. 왜 만들었는지 역시 의심이 가는부분.
영문 텍스트의 대,소문자를 조절 해 줍니다.capitalize, uppercase, lowercase
흠, 아무튼, 전 중요한것만 강좌 내니까여..ㅡ.ㅡa
혹시 나머지 3가지 부가 속성이 어떤건지 궁금 하시거든 여러분의 스타일 시트 솜씨로 한번 실습 해 보세요.
결과를 보시고 난뒤에..
내가 왜 실습 했지?
...라는 질문을 스스로 내던지게 되실 겁니다.
위에서도 말씀 드렸듯이, shadow는 익스, 네스에서 다 안통합니다. (왜 이런걸 만들었는지.. 쩝..)
그럼 text-decoration에 대해 계속 설명 하겠습니다.
기본값은 none입니다.
underline은...
글자에 밑줄을 그어 줍니다. (와 동일)
overline은...
글자에 윗줄을 그어 줍니다. (HTML태그에 없음.)
line-through는...
글자를 관통하는 선을 그어 줍니다. (와 동일)
blink는...
글자를 깜빡거리게 해 줍니다. (
아래는 이에대한 예제 입니다.
잘 따라서 써 보세요 *^^*
▶text-decoration
▶text-decoration
<html>
<head>
<title>text-decoration</title>
<style type="text/css">
.text1 {text-decoration:underline}
.text2 {text-decoration:overline}}
.text3 {text-decoration:line-through}
.text4 {text-decoration:blink}
</style>
</head>
<body>
<div class="text1">밑줄이 그어집니다. ^^</div><br>
<div class="text2">윗줄이 그어집니다. ^^</div><br>
<div class="text3">글자를 관통하는 줄이 그어집니다. ^^</div><br>
<div class="text4">글자가 깜빡거립니다(네스에서만 적용).</div>
</body>
</html>예제보기 1st ← Click !
하핫.. 간단하져?
이걸로 끝입니다 ^^a
뭐야?! 라고 하시는 분이 계시네여... 헤헷...
그만큼 제 강좌에 집중하셨단 예기가 아닐까요?
제강좌를 10회까지 봐 주신 님들께 감사드립니다 ^^
앞으로도 유용한 스타일시트 문법을 알려드릴걸 약속하며..
홈페이지, 즐겁게 만드세요~~
자신의 손으로 직접 그 무언가를 창조 했을때의 그 기쁨..
그게 잘 만들어진 것인지, 아닌지를 떠나서,
님들이 제 강좌를 통해 그 기쁨을 느끼셨으면 하는 필자의 바램 입니다.
구럼.. 빠빠시~~ ^-^
- End -