XHTML 쓸수록 나타나는 반응들

여러 표준 사이트를 만져보고 둘러보고 제작하게 되면서 슬슬 웹표준, XHTML, CSS2 에 익숙해 지다보니 나타나는 반응들이 있습니다.

일모리가 쓰다 보니 이런것들이..

1. 양식, 포멧에 신경쓰게 됩니다..

   자 리포트를 쓴다고 생각해 봅시다. 교수님께서 원하시는 양식이 있죠? 글자크기는 무엇으로 해라, 여백은 몇으로 넣고, 날짜는 오른쪽 위에 넣고 등등. 특히나 논문을 쓴다고 생각해 보십시오. 더 신경을 써서 하겠죠? 네 바로 그겁니다. 무슨 쓸데없는 DOCTYPE같은걸 넣고 그래야돼? 라고 하실지 모르지만, 자신의 웹사이트, 글이 소중하다고 생각되신다면 더욱 그런것에 신경을 써야 더욱 가치있는 문서가 되는것입니다. 형식과 틀에 있지만 그 안에 있으므로써 논문이 빛이 나는 것 같은 맥락이겠습니다. 문서종류(DOCTYPE), 언어정해주기(인코딩), 웹사이트 제목넣기(Title)등은 꼭 부담갖지 마시고 오히려 자부심을 가지고 넣어 주시기 바랍니다. 멋지지 않습니까? 내 웹사이트가 논문같은 웹사이트 라니

   어떻게 하는지는 이 포스팅을 참고하세요.

2. 리스트(list)를 잘 활용하게 됩니다.

   많이 생소한 부분입니다. 리스트? 잘 써먹지도 않았는데? 리스트는 간단합니다. 특히나 메뉴부분에는 일일히 div를 쓰지 않아도 나누어 줄수 있는 간단한 list를 쓰기를 권하는데요, 이 리스트는 개념만 잘 파악한다면 그리 어렵지 않습니다. 리스트에 대한 자세한건 이 포스팅을 참고하시기 바랍니다. 리스트의 활용은 테이블의 개념을 버리는데에 아주 큰 도움이 될 것입니다.

3. <br />의 사용이 점점 줄어들게 됩니다.

   특별히 <br />이 필요한 부분이 많지 않습니다. 오히려 약간의 편법으로 많이 쓰이죠. 하지만 아시다시피 문서적인 개념의 xhtml의 사용에 약간 어긋납니다. 리포트를쓰다가 언제 갑자기 줄만 바꾸는 상황이 올까요? 줄이 바뀌는 경우는 문단 자체가 바뀌는경우이거나 리스트를 사용하는경우, 제목이 끝난 경우들인데, 이미 html테그들로 제어가 되니 br의 사용이 거의 필요가 없습니다. 거꾸로 말하면 br 사용도가 점점 줄어가신다는것은 점점 새로운 xhtml에 익숙해지셨다는 것이겠네요

4. <h1><h2> 등의 헤딩 즉 제목 테그를 쓰는데에 익숙해져 버립니다.

   여러 부분에서 많은 개선이 필요한 부분중의 하나라고 생각합니다. 특히나 블로그 글을 올릴 때에 지원되어야 한다고 생각하는 부분입니다. 국산 블로그 툴에서 많이 쓰지 않는 부분인데, 특징을 잘 파악해서 블로그가 그냥 게시판의 글이 아닌 하나의 문서임을 잘 이해해 주시고 차기버전들에서는 지원을 확실히 해주셨으면 하는 바램입니다.

   보통 글중 소제목 부분을 쓸때에 제목, 소제목, 문단제목 등등 제목을 그냥 글자를 정해서 폰트 크기만 크게 주지 않고, <h1><h2><h3><h4><h5><h6> 중 적절한것을 골라서 쓰게 됩니다. <h1>이 가장 큰것이고 <h6>가 가장 작은것입니다. 그래서 css로 폰트크기를 h1, h2로 지정해서 크기를 조절하시던지 혹은 브라우저가 직접 크기는 알아서 정하도록 놔두시던지 하시면 되겠습니다. 브라우저마다 heading의 크기가 정해져 있기때문이죠. 기억하시나요? '당신은 문서나 신경쓰고, 나머지는 브라우저가 알아서 하게 놔두라. 그것이 브라우저의 궁극적인 목적' ㅎㅎ

5. <img>태그 사용이 현처히 줄어듭니다.

   <br>의 사용이 줄어 들듯이, img의 사용이 줄어들게 됩니다. 특히 레이아웃에서는 이미지를 직접 div에 삽입하는것보다 background 이미지로 많이 사용을 하게 됩니다. 이유가 있다면 일단 웹사이트에서 '모두선택(Ctrl+a)' 을 해 보시면 아실겁니다. 제 웹사이트도 그렇지만 이미지들의 선택은 없습니다. 다만 글만이 선택되어지죠? 배경은 그저 하나의 문서 표현에 불과하기에 이미지 태그가 아닌 배경으로 넣어버리는 것이죠. 그리고 아시다시피 css가 제어를 하려면 background-image로 해야하기 때문에 그 부분에서 배경이 사용되는 이유도 있습니다. 어떻게 보면 전자를 위해서 후자같은 방식을 택한걸수도 있겠군요.

   이렇게 배경으로 넣게 되면 확연한 차이가 바로 프린트를 할때에 나게 됩니다. <img>를 써서 레이아웃을 꾸몄다면 프린트시 그대로 그림들이 나와버리겠죠. 프린트할때에 이것들은 쥐약입니다. 글들을 프린트하고 싶은데 레이아웃 그림들까지 딸려오니, 안되겠죠. 프린트를 할때에는 문서와 필요한 정보들 그리고 '글안에 들어있는 설명 그림들' 만이 출력되면 좋겠죠. 까치 이야기를 하다보니 까치 관련 이미지 삽입이 예겠습니다. 이런 이유들로 <img> 사용이 줄어든다는 것입니다. 레이아웃에는 <img> 사용을 자제합시다. :)

6. align 의 사용도 줄어듭니다.

   물론 텍스트 안의 문단의 흐름을 조절하는 text-align에는 쓰이겠지만, 레이아웃을 다루는 문제에도 이제 table 처럼 align을 정해줄 필요가 거의 없습니다. 지정해 지지 않으면 자동으로 position자체가 top left가 되기 때문에 table에서처럼 align=top을 지정해 주지 않아도 된다는 것이죠. 그뿐만이 아닙니다. 어떤 div의 정렬을 가운데로 하고싶다면 center는 쓰지 않고 margin 으로 대쳐해 줍니다. margin: 0 auto; 는 좌우 가운데, margin: auto 0; 위아래 가운데. 그리고 맨 밑에 정렬하고 싶다면, 쿠키님께서 포스팅 하셨듯이 position: relative와 position: absolute을 잘 조합해서 bottom: 0px; right: 0; 값등을 정해주어 풀수 있습니다.

마지막으로 이건 xhtml이나 모든것을 떠나서 인터넷에서의 에티켓이며 존중입니다. 그것은, 쓰거나 찍거나 만들거나 직접 자신이 하지 않았다면 꼭 꼭 출처를 밝혀주는것 입니다. 그사람에게 모든 credit 을 줍시다. 나는 그저 인용, 하는것 뿐이라는 의식을 항상 가집시다. 이미지를 가져올때에도 간단히라도 어디에서 온 사진인지 밝히는거 정말 당연한 에티켓 아닐까요? 그것이 진정한 멋 입니다. 자신에게 말해주세요. '나는 멋있는 사람입니다. 제가 한것이 아닐시에 그 사람에게 모든 credit을 돌려줍니다. 그사람을 난 배려합니다. 난 멋있는 사람입니다' 라고 말이죠. 저도 '멋있는 사람' 되려고 노력중입니다 ;)

. . 첨가: Ceprix님께서 올려주셨네요

저 같은 경우는, 첫 번째로 빈 태그를 항상 닫는 버릇이 생겼습니다. 예를 들면, , 같은 경우죠. 더불어 이미지 태그에 alt 값을 꼭 붙이게 되었구요. 두 번째로 CSS도 포함해서 XHTML에서 모든 코드를 소문자로 쓰게 되었구요. 참고로 CSS에서 property는 case-sensitive (대문자와 소문자를 구별하는)입니다. 세 번째로 id와 class를 정말 많이 쓰게 되기 때문에 가끔 뒤바꿔서 쓰는 경우가 생기곤 하구요. (참고로 id는 같은 페이지에 한 번만, class는 여러 번 사용 가능하다는 것 항상 유의해야 하구요.) 마지막으로 &, , ", " 같은 문자를 제대로 인코드하게 되었습니다. (특히 코드 삽입할 때 중요하죠.) - Ceprix

A2님께서 올려주셨습니다.

속성 값은 반드시 따옴표(”)로 둘러싸게 됩니다. -A2

yser님께서 슬픈 경험을 올려주셨습니다. ㅡㅜ

이전에는 테이블 쓰면서 table class=’splawokgoaw’ 이런 식으로 일일이 선언하고 또 CSS 가서 동시에 디자인 구성하면서 막막막 리프레시 해서 결과 확인하구 또 다시 html 만지면서 td tr td tr 해주고 그러다가 나중에 컨텐츠가 바껴서 또 table 바꾸고 tr td tr td ..; 해서 구조 바꾸고 그러면 또 CSS 바꾸어주고 리프레시 리프레시 리레프시 리시프레 악악악.. |orz - yser

bopy님께서 올려주셨습니다.

레포트를 쓸때도 제목1, 2, 3(h1 h2 h3태그가 생각나죠?)서식으로 제목을 작성하고, HTML을 작성할때도 문단을 p로 감싸고, align태그는 이미 사라진지 오래입니다. - bopy