오늘은 웹표준에 대해 말할까 합니다.
저의 공부가 그렇게 깊지않은 관계로 잘못알거나 오해하고 있는 사실이 있을수도 있겠습니다만.. 괜히 아는척한다고 타박하지마시고 너그럽게 봐주시면 고맙겠습니다. 아 태클걸지 말라는 말이 아닙니다. 제가 잘못알고있는게 있다면 가차없이 지적해주십시오. 감사히 받겠습니다.
그럼 시작합니다.
흔히들 웹상에서 글을 작성할때 위지웍 에디터를 사용합니다.
그런데 그 위지웍 에디터가 문제가 되는것이 본문안에 표현을 위한 요소를 삽입한다는점입니다.
위지웍 에디터를 사용하여 특정문자의 색을 #333333 정도 되는 색으로 바꿨다고 가정합시다. 그것에 대한 마크업은 다음입니다.
저는<span style="color:#33333">만화가</span>지망생입니다
이경우 만약에 스킨을 바꾸거나 했을때 배경이 검정색인 스킨을 사용하면 해당글자가 보이지 않게 되는 문제가 발생합니다. 그림으로 설명하는게 빠르겠네요.
이런식으로 작성했던 글에서
스킨을 바꾸거나 하여 배경이 검정색으로 바뀌면 본문에서 위지웍을 통해 스타일을 지정했던 글귀가 보이지 않게 됩니다.
이러한 글이 한두게면 모르지만.. 상당히 차곡차곡 쌓이고나면 나중에 스킨을 바꾸거나 할때 상당히 골치아파집니다. 수백게가 넘는 글을 일일이 찾아다니면서 보이지않는 글이 보이도록 고쳐야 하니까요. 너무나 귀찮은 일입니다.
그 문제를 해결할 방법이 있습니다. 웹표준을 지키면 됩니다.
한가지 예를 더 들겠습니다.
난중일기
21일 (경신) 맑음. 일찌기 아침밥을 먹고 나가서 둔전에서 받아들인 벼를 다시 작석하여 새로지은 창고에 쌓은것이 1백 67섬으로, 준것이 48섬이다. 늦게 거제, 고성, 하둥, 강진, 화령포 들이 와서 고성에서 가지고 온 술을 같이 마셨다. 웅천이 저녁에 와서 몹시 취했다. 밤 10시쯤 파하고 돌아갔다. 하천수, 이진 들이 왔다. 방답이 들어왔다.
24일 (신유) 맑음. 식푸에 나가, 둔전에서 받아들인 벼를 고쳐 작석하는것을 감독했다. 우수사[권준] 가 들어왔다. 오후 4시에 비바람이 크게 일었다. 둔전서 받아들인 벼를 다시 작석한 결과 창고에 들여 쌓은것이 1백 70여섬으로, 준것이 30여섬이다. 난안[선의문]이 갈렸다는 기별이 왔다. 비바람으로 인해서 중지했다. 밤새도록 바람이 그치지 않았다. 몸이 노곤했다.
25일 (임술) 비가 주룩주룩 내리다 낮에 갰다. 아침에 장계 초안을 수정했다. 늦게 우수사 [이억기] 가 오고 나주 관관[원종의] 도 왔다. 장흥부사 [배홍립]가 와서, 수군에 관한 사무를 진행하기 곤란한것은 감사의 처사가 방해된 때문이라고 이야기 했다. 이진이 둔전으로 돌아갔다. 춘절, 복춘, 사화가 본영으로 돌아갔다.
26일 (계해) 아침에는 맑더니 저물게 비가 내렸다. 늦게 대청에 나갔다. 여도와 흥양이와, 백성을 침해하는 영리들의 폐단을 이야기 했다. 지극히 놀라운 일이다. 양정언과 영리의 강기경, 이득종, 박취 들을 중죄로 다스리는 동시에 경상도와 전라도의 영리를 잡아 들이라고 명령했다. 경상 수사가 보러 왔다. 이윽고 견내량 복병에서 긴급보고가 왔는데 왜선 1척이 건내량으로부터 들어와서 해평장에까지 이른것을 머무르지 못하게 했다고 했다. 둔전에서 받아들인 벼 2백30섬을 다시 작석한 수가 1백 98섬이라 준것이 32섬이라고 한다. 낙안에게 작별 술을 대접해 보냈다.
상단의 문장을 아래 그림과 같이 꾸미고자 합니다.
티스토리에서 제공하는 위지웍 에디터로 짙은글씨부분에 볼드. 중괄호 [] 안에 이름에 폰트크기를 지정했습니다.
마크업은 다음과 같습니다.
위지웍을 사용한 마크업
<div>
<h3>난중일기</h3>
<p><span style="font-weight: bold;">21일 (경신) 맑음</span>. 일찌기 아침밥을 먹고 나가서 둔전에서 받아들인 벼를 다시 작석하여 새로지은 창고에 쌓은것이 1백 67섬으로, 준것이 48섬이다. 늦게 거제, 고성, 하둥, 강진, 화령포 들이 와서 고성에서 가지고 온 술을 같이 마셨다. 웅천이 저녁에 와서 몹시 취했다. 밤 10시쯤
파하고 돌아갔다. 하천수, 이진 들이 왔다. 방답이 들어왔다.</p>
<p><span style="font-weight: bold;">24일 (신유) 맑음.</span> 식푸에 나가, 둔전에서 받아들인 벼를 고쳐 작석하는것을 감독했다. 우수사<font size="1">[권준] </font>가 들어왔다. 오후 4시에 비바람이 크게 일었다. 둔전서 받아들인 벼를 다시 작석한 결과 창고에 들여 쌓은것이 1백 70여섬으로, 준것이 30여섬이다. 난안<font size="1">[선의문]</font>이 갈렸다는 기별이 왔다. 비바람으로 인해서 중지했다. 밤새도록 바람이 그치지 않았다. 몸이 노곤했다.</p>
<p><span style="font-weight: bold;">25일 (임술) 비가 주룩주룩 내리다 낮에 갰다.</span> 아침에 장계 초안을 수정했다. 늦게 우수사 <font size="1">[이억기]</font> 가 오고 나주 관관<font size="1">[원종의</font>] 도 왔다. 장흥부사 <font size="1">[배홍립]</font>가 와서, 수군에 관한 사무를 진행하기 곤란한것은 감사의 처사가 방해된 때문이라고 이야기 했다. 이진이 둔전으로 돌아갔다. 춘절, 복춘, 사화가 본영으로 돌아갔다.</p>
<p><span style="font-weight: bold;">26일 (계해) 아침에는 맑더니 저물게 비가 내렸다</span>. 늦게 대청에 나갔다. 여도와 흥양이와, 백성을 침해하는 영리들의 폐단을 이야기 했다. 지극히 놀라운 일이다. 양정언과 영리의 강기경, 이득종, 박취 들을 중죄로 다스리는 동시에 경상도와 전라도의 영리를 잡아 들이라고 명령했다. 경상 수사가 보러 왔다. 이윽고 견내량 복병에서 긴급보고가 왔는데 왜선 1척이 건내량으로부터 들어와서 해평장에까지 이른것을 머무르지 못하게 했다고 했다. 둔전에서 받아들인 벼 2백30섬을 다시 작석한 수가 1백 98섬이라 준것이 32섬이라고 한다. 낙안에게 작별 술을 대접해 보냈다.</p>
</div>
웹표준을 준수하는 마크업은 다음입니다.
웹표준 방식의 마크업
<div>
<h3>난중일기</h3>
<p><strong>21일 (경신) 맑음. </strong>일찌기 아침밥을 먹고 나가서 둔전에서 받아들인 벼를 다시 작석하여 새로지은 창고에 쌓은것이 1백 67섬으로, 준것이 48섬이다. 늦게 거제, 고성, 하둥, 강진, 화령포 들이 와서 고성에서 가지고 온 술을 같이 마셨다. 웅천이 저녁에 와서 몹시 취했다. 밤 10시쯤
파하고 돌아갔다. 하천수, 이진 들이 왔다. 방답이 들어왔다.</p>
<p><strong>24일 (신유) 맑음.</strong> 식푸에 나가, 둔전에서 받아들인 벼를 고쳐 작석하는것을 감독했다. 우수사<sub>[권준]</sub> 가 들어왔다. 오후 4시에 비바람이 크게 일었다. 둔전서 받아들인 벼를 다시 작석한 결과 창고에 들여 쌓은것이 1백 70여섬으로, 준것이 30여섬이다. 난안<sub>[선의문]</sub>이 갈렸다는 기별이 왔다. 비바람으로 인해서 중지했다. 밤새도록 바람이 그치지 않았다. 몸이 노곤했다.</p>
<p><strong>25일 (임술) 비가 주룩주룩 내리다 낮에 갰다</strong>. 아침에 장계 초안을 수정했다. 늦게 우수사 <sub>[이억기]</sub> 가 오고 나주 관관<sub>[원종의]</sub> 도 왔다. 장흥부사 <sub>[배홍립]</sub>가 와서, 수군에 관한 사무를 진행하기 곤란한것은 감사의 처사가 방해된 때문이라고 이야기 했다. 이진이 둔전으로 돌아갔다. 춘절, 복춘, 사화가 본영으로 돌아갔다.</p>
<p><strong>26일 (계해) 아침에는 맑더니 저물게 비가 내렸다.</strong> 늦게 대청에 나갔다. 여도와 흥양이와, 백성을 침해하는 영리들의 폐단을 이야기 했다. 지극히 놀라운 일이다. 양정언과 영리의 강기경, 이득종, 박취 들을 중죄로 다스리는 동시에 경상도와 전라도의 영리를 잡아 들이라고 명령했다. 경상 수사가 보러 왔다. 이윽고 견내량 복병에서 긴급보고가 왔는데 왜선 1척이 건내량으로부터 들어와서 해평장에까지 이른것을 머무르지 못하게 했다고 했다. 둔전에서 받아들인 벼 2백30섬을 다시 작석한 수가 1백 98섬이라 준것이 32섬이라고 한다. 낙안에게 작별 술을 대접해 보냈다.</p>
</div>
무슨차이가 있을까요? 웹표준을 준수하는 마크업은 태그안에 표현을 위한요소 (style, width, height, border 등) 을 사용하지 않습니다. 대신 글을 꾸미기 위해서 강조하기<strong> 위첨자<sup> 아래첨자<sub> 기울여쓰기<em> 밑줄<ins> 지우기<del> 등을 사용합니다. 그래서 마크업이 위지웍을 사용해 꾸민 마크업보다 훨씬 알아보기 쉽고 간결합니다.
만약에 이 문장에 강조구문의 색을 빨간색으로,중괄호안 이름을 파란색으로 바꾸어야 한다고 가정합시다. 위지웍을 사용한경우는 마크업이 엄청나게 늘어납니다. 쓸대없는 태그가 완전히 범람하고 있습니다.
위지웍을 사용한 마크업
<div>
<h3>난중일기</h3>
<p><span style="font-weight: bold; color: rgb(255, 0, 0);">21일 (경신) 맑음</span><span style="color: rgb(255, 0, 0);">.</span> 일찌기 아침밥을 먹고 나가서 둔전에서 받아들인 벼를 다시 작석하여 새로지은 창고에 쌓은것이 1백 67섬으로, 준것이 48섬이다. 늦게 거제, 고성, 하둥, 강진, 화령포 들이 와서 고성에서 가지고 온 술을 같이 마셨다. 웅천이 저녁에 와서 몹시 취했다. 밤 10시쯤
파하고 돌아갔다. 하천수, 이진 들이 왔다. 방답이 들어왔다.</p>
<p><span style="font-weight: bold; color: rgb(255, 0, 0);">24일 (신유) 맑음.</span> 식푸에 나가, 둔전에서 받아들인 벼를 고쳐 작석하는것을 감독했다. 우수사<font size="1"><span style="color: rgb(0, 0, 255);">[권준]</span> </font>가 들어왔다. 오후 4시에 비바람이 크게 일었다. 둔전서 받아들인 벼를 다시 작석한 결과 창고에 들여 쌓은것이 1백 70여섬으로, 준것이 30여섬이다. 난안<font style="color: rgb(0, 0, 255);" size="1">[선의문]</font>이 갈렸다는 기별이 왔다. 비바람으로 인해서 중지했다. 밤새도록 바람이 그치지 않았다. 몸이 노곤했다.</p>
<p><span style="font-weight: bold; color: rgb(255, 0, 0);">25일 (임술) 비가 주룩주룩 내리다 낮에 갰다.</span> 아침에 장계 초안을 수정했다. 늦게 우수사 <font style="color: rgb(0, 0, 255);" size="1">[이억기]</font> 가 오고 나주 관관<font style="color: rgb(0, 0, 255);" size="1">[원종의</font><span style="color: rgb(0, 0, 255);">]</span> 도 왔다. 장흥부사 <font style="color: rgb(0, 0, 255);" size="1">[배홍립]</font>가 와서, 수군에 관한 사무를 진행하기 곤란한것은 감사의 처사가 방해된 때문이라고 이야기 했다. 이진이 둔전으로 돌아갔다. 춘절, 복춘, 사화가 본영으로 돌아갔다.</p>
<p><span style="font-weight: bold; color: rgb(255, 0, 0);">26일 (계해) 아침에는 맑더니 저물게 비가 내렸다</span>. 늦게 대청에 나갔다. 여도와 흥양이와, 백성을 침해하는 영리들의 폐단을 이야기 했다. 지극히 놀라운 일이다. 양정언과 영리의 강기경, 이득종, 박취 들을 중죄로 다스리는 동시에 경상도와 전라도의 영리를 잡아 들이라고 명령했다. 경상 수사가 보러 왔다. 이윽고 견내량 복병에서 긴급보고가 왔는데 왜선 1척이 건내량으로부터 들어와서 해평장에까지 이른것을 머무르지 못하게 했다고 했다. 둔전에서 받아들인 벼 2백30섬을 다시 작석한 수가 1백 98섬이라 준것이 32섬이라고 한다. 낙안에게 작별 술을 대접해 보냈다.</p>
</div>
웹표준 코딩의 경우 어떨까요? 본문에 더이상 손댈 필요가 없습니다.
외부로 링크된 CSS에 다음의 내용을 추가하면 끝입니다.
strong {color:red;}
sub {color:blue;}
색깔이 맘에 안들어 바꾸고 싶다 할때도 아래처럼 바꿔주기만 하면 됩니다.
strong {color:yellow;}
sub {color:gray;}
참고하시라고 파일첨부합니다. 예제로 사용된 소스파일입니다.
웹표준을 정의하자면 문서를 구조(html),표현(css),동작(Javascript) 로 분리하는것입니다. 이를 위한 첫단계작업이 바로 Html 에서 표현을 위한 요소일체를 배제하는것입니다. 이런식으로 사이트를 관리하면. CSS를 수정하는 작업만으로 사이트 전체의 디자인을 바꿀수도 있습니다. 또 글을작성할때 복잡한 태그를 사용하지 않아 간편합니다.
얼마나 좋습니까? 웹표준 배우고 싶어지지 않습니까?
Posted by 콩바구니
트랙백 주소
http://kongbaguni.tistory.com/trackback/564
style.zip
index.html
style.css
댓글을 달아 주세요