Chapter 8
문장의 첫줄, 첫글자에만 효과를~ first-line, first-letter
이번 속성은.. 좀 희안한(?)것 입니다.
스타일 시트 모듬에 포함되는것이 아니기 때문 입니다.
무슨 그런게 다있어?! ..라고 하시겠져?
네. 그런게 있습니다. ^^a (돌 날아 온다..)
몇몇 안되는데..
문서 관련이 2개, 링크 관련이 4개 입니다. ㅡ.ㅡa
왜 진작 안일러 주었냐구요?
중급 단계기 때문에 ^^a
별거 아닙니다.
스타일 시트 모듬 이름 바로 옆에다가 :(콜론)을 붙여주고요,
이 이상한(?) 속성을 또 한번 붙여주면.. 끝나는 것이랍니다.
뭐시기.. 무슨 소린지 몰겠다구요? ^^ㆀ
그럼 아래의 예제를 통해 한번 분석 해 보죠.
▶first-letter
▶first-letter
<html>
<head>
<title>Style Sheet Testing</title>
<style type="text/css">
h5:first-letter {font-size:18pt; font-style:italic; color:blue}
</style>
</head>
<body>
<h5 align="center">The First War ---</h5>
</body>
</html>예제보기 1st ← Click !
잘 보셨는지요? ^^a
예제에서 보시다시피..
틀림없이
라는 태그에,
글자 크기를 18pt로,
글자 스타일을 이태릭체로,
색상을 파랑으로,
적용 시키라고 스타일 시트를 작성 했습니다.
그러나 목표가 되는 태그의 오른쪽으로 first-letter를 붙여 놓으니까,
첫번째 글자에만 스타일 시트 명령어가 적용되는것을 확인할 수 있습니다.
하핫.. 잼있지 않나요? ^^a
요걸루 멋진 타이틀 같은걸 만들 수 있을법도 한데요..
뭐, 이게 쓰기 귀찮으신 분들은 태그와 태그를 이용해서 한 글자만 그렇게 만들 수도 있습니다만,
이렇게 하면, 별로 힘 안들이고도 같은걸 여러번 쓸 수 있으니까,
아무래도 그런 경우엔 first-letter를 쓰시는것이 좋을듯..
그럼 first-line은 뭐냐구요?
말그대로 입니다.
방금건 문장의 첫글자에만 영향을 미쳤다면,
이번선 문장의 첫줄에만 영향을 미칩니다.
문장의 제목 같은걸 적을때 매우 유용할것 같습니다.
그럼 예제를 볼까요?
▶first-line
▶first-line
<html>
<head>
<title>Style Sheet Testing</title>
<style type="text/css">
div:first-line {font-size:20pt; font-weight:bold; color:orange}
</style>
</head>
<body>
<div align="center">
Cascading Style Sheet<br>
스타일 시트 first-line의 테스트 예제 입니다. *^^*<br>
랄라라~~♬<br>
재미 없다구요? ㅜ.ㅜ
</div>
</body>
</html>예제보기 2nd ← Click !
이번에도... 여러분 생각과는 다른 결과가 나왔져? *^^*
태그 전체에 영향이 미쳐야 정상인데..
이것 역시 first-line 속성의 역할 때문 입니다.
후훗.. 오늘 배우신 이 두가지 속성.
우리, 이런 종류의 속성을 뭐라고 할까여? ㅡ.ㅡa
흠.. (제가 정할게여 ^^*)
음.. 보조 속성 이라고 하져.
하핫.. 괜실히 용어를 외우라고 하진 않습니다.
단지, 다른 속성들과 구별하기 위해 일부러 지은것이니, 이점 양해해 주세요 ^-^
그럼, 이 보조 속성과 함께 class나 id를 함께 적용시킬 수 있을가요?
넵~~ 정답. 할 수 있답니다.
그럼 아래의 에제를 통해서 한번 배워 볼까요?
▶보조 속성과 class, id와의 만남
▶보조 속성과 class, id와의 만남
<html>
<head>
<title>Style Sheet Testing</title>
<style type="text/css">
div.test:first-line {font-size:20pt; font-weight:bold; color:orange}
#style:first-letter {font-size:18pt; font-style:italic; color:blue}
</style>
</head>
<body>
<div align="center">
Cascading Style Sheet<br>
스타일 시트 first-line의 테스트 예제 입니다. *^^*<br>
랄라라~~♬<br>
여긴 first-line이 적용 되지 않습니다.
</div>
<br>
<br>
<div align="center" class="test">
Cascading Style Sheet<br>
스타일 시트 first-line의 테스트 예제 입니다. *^^*<br>
랄라라~~♬<br>
여긴 first-line이 적용 된답니다. >.<
</div>
<br>
<br>
<h6 id="style">
하핫.. 안녕하세요? ^o^<br>
잘 되져? 후훗.. 이렇게 모두가 함께 적용될 수가 있는것 입니다.
</h6>
</body>
</html>예제보기 3rd ← Click !
위의 예제를 통해 확인 하셨는지요?
보시다 시피, 보조 속성과 class,id 속성을 함께 적용할땐 아래와 같은 규칙을 가집니다.
▶보조 속성과 class, id를 함께 쓰는 방법
▶보조 속성과 class, id를 함께 쓰는 방법
<style type="text/css">
.스타일 시트 모듬 이름:보조 속성 {스타일 시트 속성-부가 속성:값}
style>
또는
<style type="text/css">
#스타일 시트 모듬 이름:보조 속성 {스타일 시트 속성-부가 속성:값}
style>
보시면 알겠지만..
보조 속성은 스타일 시트 모듬 이름 옆에 써주는것 입니다.
쉽죠? ^^
※ 알아두세여 ~ ♬
보조 속성은 반드시 웹문서 전체에 적용할때만 쓸 수 있습니다.
그렇지 않은, 가령 예를들어 HTML 태그의 속성인 style을 써서 보조 속성을 사용할 수 없다는 것입니다.
반드시
태그안의