CRIZIN+

:: Harder, Better, Faster, Stronger

실용예제로 배우는 웹표준

어제 주문한 책이 벌써 도착해서 열심히 읽고있다. 그동안엔 초보자가 XHTML+CSS 기반의 코드에 입문하려고 해도 단편적인 팁만 존재하고 차근차근 읽어볼만한 자료가 거의 없다시피 했는데 이 책으로 갈증을 시원하게 풀어줄 수 있을 것 같다. 기존에 코딩을 해봤던 사람들이 읽기 적합한 정도의 수준인데 그동안 HTML 태그의 편식을 해왔거나 CSS를 글자꾸미기 정도에만 사용해왔던 사람이라면 이 책을 접하기 전에 XHTML 태그들의 사용법과 CSS 속성들을 대충이라도 한번 읽어본 후에 접해야 혼란스럽지 않을 듯 하다.

나도 최근에는 블로그에 글을 쓸때 의미에 맞는 태그들을 쓰려고 노력하는 편인데 , <blockquote>, <dl> 등 몇가지 외에는 쓸 기회가 자주 없다. 어쩌면 자주 써보지 않아서 이곳에는 이걸 써야지 하고 느낌이 잘 오지 않는 것 같기도 하고.. 앞으로 자주 쓰게 될거라 기대하면서 스타일을 미리 만들어두기로 했다. 그래서 이 포스트는 스타일이 잘보이는지 확인하는 시험용 포스트가 되겠다;; 책과 W3C의 Structured text 부분을 참고해서 써본다.

em: 문장을 강조하는데 쓰인다.  태그와 같은 역할을 하지만  태그는 '문자를 기울인다'는 의미고  태그는 '문자를 강조한다' 라는 의미다. 다만 강조하는 방법이 문자를 기울여 표시하는 것 뿐이다. 아쉽게도 내 블로그에서 주로 쓰고있는 굴림 폰트는 기울어지면 보기가 싫다-_-
strong: 강한 강조를 할때 쓰인다.  태그와의 관계는  태그와  태그의 관계처럼 디자인에 관련된 태그냐 의미에 관련된 태그냐 하는 차이가 있다. 다행히 굵은글자는 보기가 좋아서 강조할때는  태그 보다는  태그를 주로 쓴다. 사나이라면 strong!
cite: 인용문이나 참조한 문서 출처를 표기한다. 참조한 책 이름이라던가 인용한 문장을 말한 사람 또는 블로그 이름 같은걸 쓰는 것 같다. 예를들면 '실용예제로 배우는 웹표준 83페이지에 틀린 문장이 있는 것 같습니다' 처럼.
dfn: 용어 묶음에 대한 정의라고 하는데 뭔지 잘 모르겠다;; 구글신께 물어보니
DFN is used to mark up terms which are used for the first time. These are often rendered in italics so the user can see this is where the term is used for the first time.
라고 하는데.. dfn은 dfn이다. 뭐 이렇게 쓰는건가?;
code: 요건 좀 많이 쓴다. 문장 사이에 HTML 코드(<html>)나 프로그램 코드(<?echo "Hello world";?>)같은걸 넣을때 종종 이용함.
samp: 프로그램이나 스크립트 등 무언가의 결과를 표시할때 쓴다고 한다. 예를들면 구글토크에 햄버거라고 넣었더니 '햄버거 이상으로 성숙하면 몸체의 크기는 약 1메가정도이다' 라는 결과가 출력됐다라는 식으로.
kbd: 사용자가 입력한 텍스트를 표시한다고 한다. 역시 잘 모르겠지만 책의 내용을 참조하면 'Windows XP에서 악성코드 제거도구를 실행하려면 Win+R키를 누르고 mrt라고 입력하면 됩니다' 같은걸까?
abbr: 생략된 약어라고 한다. <acronym>은 각 단어의 머릿글자를 딴 것을 말하고 <abbr>은 <acronym>의 상위 개념이며 단어의 일부만 잘라서 쓰기도 한다. 예를들면 abbr, fri, ad 이런 식. (앞 문장에 <abbr> 태그로 원래 단어를 넣어줬지만 익스플로러에선 스타일 지정도 무시되고 마우스를 올려놔도 아무 것도 나오지 않는다)
acronym: Cascading Style Sheet를 줄여서 CSS 라고 표시하는 것처럼 단어의 첫글자를 조합해 만든 것. <acronym>은 익스플로러에서 마우스를 올려도 풍선도움말이 잘 뜬다. 다음 단어들에 마우스를 올려보자. CSS, XHTML, AJAX
q: 문장 도중에 줄을 바꾸지 않고 짧은 글을 인용할때 쓴다고 한다. 웹브라우저는 <q> 태그로 묶인 부분 앞뒤로 따옴표를 삽입해주고 <q> 태그 안의 <q> 태그에는 작은 따옴표를 넣어주며 따옴표는 각각의 언어에 적합한걸로 알아서 넣어주도록 W3C는 권고하고 있지만 아직 파이어폭스에서는 큰따옴표만 삽입되고 익스플로러는 아무것도 삽입되지 않는다. 이 문장이 따옴표로 감싸져 있으면 제대로된 웹브라우저임.
blockquote: 좀 길다싶은 문장을 인용할때 사용하는 태그. 아마 가장 즐겨쓰이는 태그가 아닐까 싶다. 스타일을 이쁘게 주고 문서 곳곳에 삽입하면 상당히 폼이 난다 -_-)=b 위에 dfn 설명할때 인용된 부분이 <blockquote> 태그로 묶인 부분이다.
lang 속성: 다른 태그들도 마찬가지지만 특히 <q>, <blockquote>로 인용된 부분은 lang 속성으로 원래의 언어를 정확히 표시하도록 하고있다. 예를들면 祖(조상 조)같은 경우에 한국어코드(ko)로 보는 글자(祖)와 일본어코드(ja)로 보는 글자(祖)가 모양이 다르다. 지금은 태터툴즈가 euc-kr 코드로 작성돼있어 앞의 빨간글씨로 된 두 한자가 똑같은 모양으로 보이지만 utf-8 버전으로 업그레이드 되면 두 한자의 모양이 달라질 것이다. 아무튼 요점은 다른 언어로 인용된 문장에는 <q lang="ja">日本語</q> 같은 식으로 lang 속성에 언어 코드를 지정해줄 것. XHTML 에서는 lang 속성 대신 xml:lang 속성을 사용하는데 하위호환성 문제때문에 당분간은 <q xml:lang="ja" lang="ja">日本語</q> 이렇게 두가지 모두 표시해줘야 한다.
ins, del: 문장을 무효화(?)시키기 위해 <s>, <strike> 태그를 많이 쓰는데 지금은 권장되지 않는 태그이다. (취소선이 필요하면 CSS를 이용할 것) 대신 <del>이라는 태그를 사용해서 문장을 들어내고 <ins> 태그로 정정된 내용을 ~~쑤셔넣는게~~추가하는게 바람직하다.

적재적소에 용도에 맞는 태그를 쓰도록 꾸준히 관심을 기울여야겠다. 사실 당장에는 필요가 없을 수도 있겠지만 책의 본문을 빌면,

...저금통에 동전을 하나씩 저금하는 것과 비교해 생각해보세요. 지금 당장은 큰 돈이 아니겠지만 나중에 그 정보들이 쌓인 것을 보면 매우 기쁠 것입니다.

라고 하는데 맞는 말인 것 같다. 또 하나하나의 포스트에 정성을 기울인만큼 애착도 커지는 법이니까.

얼른 책의 나머지 부분도 읽어야겠다. 이 책 굉장히 재밌음!

'컴퓨터 얘기 > 프로그래밍' 카테고리의 다른 글

태터툴즈 0.96용 노가다 유틸 (5)	2005/08/13
태터툴즈용 간단한 통계 그래프 (9)	2005/08/12
실용예제로 배우는 웹표준 (7)	2005/08/11
Google Talk (8)	2005/08/09
우라질 쫀듸기같은 GD (3)	2005/07/21
MSN으로 태터툴즈 댓글 알림받기 (16)	2005/07/15