<LINK REL=STYLESHEET TYPE="text/css" HREF="./css.css"> 

이미지가 아니기 때문에 크기는 커도 문서 크기와는 상관없기 때문입니다. 위의 "css.css" 화일을 사용한 <LINK> 택을 지정한 페이지가 모두 합하면 60 페이지가 넘습니다. 이 페이지도 물론 지정하였습니다. 이 60 페이지가 넘는 페이지에 제목으로 사용하는 border의 넓이를 바꾸기 위해서 수정한 것은 글자 한 자를 수정한 것이 다입니다. "css.css" 화일안의 .sub {width: 300 } 을 .sub {width: 400 }으로 숫자 3을 4로 바꾸어 주었습니다. 이제 60 페이지가 넘는 페이지에서 제목에 있는 border의 넓이가 100 pixel 더 늘어났습니다. CSS의 강력함을 잘 사용한 것이라고 말할 수 있습니다.

그런데 바꾸고 싶은 것이 하나 더 있었습니다. 99년 9월 현재에 사용하고 있는 바로 아래의 style입니다.

사용 예:

P { clear: left; }

"사용 예:" 와 "사용하기"가 바탕색도 같고 글자색도 같은 것이라서 왼쪽 정열을 서로 맞출려고 했는데 방법을 찾지 못했습니다. style이 중복되게 지정하여 정열을 맞추는 것이 불가능하기 때문이었습니다. 불가능한 이유는 위의 "사용 예:" 와 "사용하기"가 아래의 style을 사용하였기 때문입니다.

	css.css 화일 내용..
	
pre { 
	color:green; 
	margin-left:20px; 
	font-size:9pt; 
	line-height:12pt; 
}
b.howUse { 
	color:green; 
	font-size:13pt; 
	background-color:white;
	letter-spacing: 0.2em
}

<pre><b class=howUse>사용 예:</b>

P { clear: left; }
</pre>

<B class=howUse>사용하기</b> 

PRE 택에 margin-left:20px;을 주었기 때문에 "사용 예:"와 "사용하기"가 정열이 20px 차이가 나는 것입니다. 그래서 정열을 맞출려면 pre 택에 margin-left를 삭제하던가 b.howUse 에 margin-left: 20px를 지정하는 방법을 사용할 수도 있겠지만 pre는 다른 본문 내용에도 사용을 하므로 margin-left:20px를 삭제할 수 없었고 b.howUse에 margin-left:20px을 지정하니 b.howUse가 "사용 예:"와 "사용하기" 두 군데 다 있어서 역시 정열이 맞지 않게 됩니다. 그래서 이것을 맞출려면 60 페이지에 있는 내용을 전부 다 바꾸어 주는 수밖에 없습니다. 그래서 서로 중복되는 style을 사용하였기 때문에 style을 수정하기가 어려워 졌습니다. (수정을 하고 싶은데 아무래도 20세기 안에는 힘들것 같습니다.. 60 페이지를 언제.. -_-)

이 페이지는 CSS를 설명하는 페이지입니다. 그래서 처음 css를 적용할 때부터 css 사용에 신경을 무척 많이 썼었습니다. 하지만, 위의 경우처럼 수정이 불가능한 경우가 생기게 되었습니다. "수고 좀 더 하면 되는데 뭘 그렇게 절망하나요..? 기껏해야 60 페이지인데 나는 600 페이지도 수정할 수 있어요. 왜냐 내 페이지가 예뻐지니까.." 라고 님은 지금 그렇게 말하고 싶을 것입니다. 맞죠..? 네.. 그 열정이 부럽습니다. :) 하지만, 손가락이 느려보세요.. 그게 얼마나 피곤한 일인가..

근데, 중요한 것이 하나가 더 있습니다. 브라우저 설정에 따라서 수정된 문서는 브라우저는 다시 읽어 들여서 CACHE를 사용하지 못하여 그만큼 속도가 느려지게 됩니다. 거부할 수 없는 속도, 속도..

<style> 택이나 inline style을 지정한 페이지는 그 페이지에만 style을 사용하므로 그 페이지만 수정하면 되지만 <LINK> 택으로 여러 페이지에 지정하는 style에는 미리 몇가지를 염두에 두고 style 지정을 하여야 합니다. 가장 안전한 방법은 style 개별적으로 지정하는 것입니다. 즉, 하나의 선택자에 지정한 style을 하나의 대상에만 지정하는 것입니다. 그러면 중복된 style 지정으로 인한 문제를 근본적으로 예방할 수 있습니다.

개별적인 지정에 사용할 수 있는 선택자는 단연 class 선택자입니다. type 선택자는 같은 택을 사용하므로 style이 중복될 위험이 있습니다. 하지만, class 선택자는 택의 종류에는 상관이 없으므로 개별화하기가 좋습니다. 그리고 b.howUse 같은 type와 class를 동시에 지정한 선택자도 별로 좋은 방법이 아닙니다. 반복적으로 많이 사용하는 일반적인 style은 type을 사용해도 되겠지만 type안에 class나 class 안에 type 같은 중복된 style 지정은 수정을 어렵게 할 수 있습니다. 개별적으로 따로따로 사용하는 게 안전하고 관리하기가 편리합니다.

물론 이제 막 style을 배우고 있다면 이 페이지가 다소 어렵게 들릴수도 있습니다. 하지만, 잘 알더라도 아직까지는 style에 버그가 많으므로 전면적으로 style을 사용하기가 힘들지도 모릅니다. 아직 왠만한 사이트에 가봐도 기껏해야 a.link, font-size, line-height가 사용한 style의 전부더군요..

style 지정을 개별화하고 시간이 지난후 관리하기 편리하기 위해서 사용할 수 있는 번득이는 발상은 이것이라고 생각합니다. 지금 당장은 style을 사용하지 않지만 나중에라도 사용할 수 있게 하기 위해서 택에 이름만 지정한 빈 class 속성을 지정해 두는 것입니다.

<LINK REL=STYLESHEET TYPE="text/css" HREF="./css.css"> 
<div class=comingSoon> 나중에 사용함.</div>

구체적인 style 계획을 세우지 못했거나 사용에 자신이 없으면 위의 처럼 빈 class를 미리 지정해 두면 관리하기가 아주 편리해져서 한 줄의 style 수정으로 완전히 새로운 사이트로 바뀌게 됩니다.

--
써놓고 보니까 정리가 덜 된것 같네요.. 쩝..
참.. 추석은 잘 보냈죠? 전 몸무게가 1kg은 늘은것 같아요.. 이히힝..     ^____^