얼마전에 소프트웨어진흥원에서 발행된 웹표준가이드 문서를 보게되었다.
지난번에 태터스킨을 제작하면서 느꼈던거지만, 이 표준화라는것이 좀 애매하다.
표준화 표준화 하는데 왜 표준화를 지켜야 하는지,
어떤것이 표준화된것인지, 내가 쓰는 이태그가 왜 표준태그가 아닌지 알수없는것들이 많았는데 그 문서를 통해서 정말 많은걸 알게되었다.
디자인에서 손땐지가 너무 오래되어서 감잡는데 좀 어렵긴 했지만;;
내용중에 정말 도움이 될만한내용들이 많은데,
그중에 HTML에 관한표준구조에 관한글을 옮겨본다.
XHTML 일반 문법 준수
정확한 문서 구조 준수
문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.
<html xmlns="http://www.w3.org/1999/xhtml">
표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는 head, title 및 frameset 구조 요소가 포함되어야 한다
모든 요소는 완벽하게 중첩되어야 한다.
모든 요소들이 완벽하게 내포(nest) 되어야 하는 것은 필수적이다. 중첩(overlapping)이 부적합(illegal)한 것임에도 불구하고 기존 웹 브라우저들에서 널리 관대하게 사용되었다.
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>
모든 속성 값은 인용 부호(“나 ‘)로 묶어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 속성 값을 인용 부호로 묶는다.
<a href=http://sample.com>틀린 경우</A>
<a href="http://sample.com">맞는 경우</a>
모든 요소와 속성은 소문자여야 한다.
XHTML 코드를 생성하거나 정리할 때 태그 및 속성의 대/소문자 환경 설정에 상관 없이 XHTML 코드에서 HTML 요소 및 속성의 이름을 소문자로 강제로 설정해야 한다. 이러한 차이는 XML은 대소문자를 구별(case-sensitive)하므로 필수적이다. 예를 들어, <li>와<LI>는 서로 다른 태그들이다
<A HREF="http://sample.com">틀린 경우</A>
<a href="http://sample.com">맞는 경우</a>
모든 요소는 닫아야 한다.
DTD에서 EMPTY로 선언된 경우를 제외하고 모든 요소에는 종료 태그가 포함되어야 한다. 코드를 생성하거나 XHTML을 정리할 때 코드에 닫기 태그를 삽입한다.
빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 한다. 예를 들어,
<br>은 잘못된 것이며 <br></br> 또는 <br/>이 올바른 형식이다. 빈 요소로는 area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta 및 param이 있다.
또한, XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다(예: <br/>가 아니라 <br />).
<img src="http://sample.com/wrong.jpg">
<img src="http://sample.com/right.jpg" />
모든 속성값은 속성이 함께 선언되어야 한다.
모든 속성은 최소화되어 표기 되면 안 된다. XML은 속성의 최소화를 지원하지 않는다. 속성 값의 짝들은 모두 작성되어야 한다. a, applet, form, frame, iframe, img, map 등의 요소에는 name 속성뿐만 아니라 id 속성도 있어야 한다. 예를 들어, <a name="intro">Introduction</a>는 잘못된 것이며 <a
id="intro">Introduction</a> 또는 <a id="section1" name="intro">Introduction</a>.가 맞다.
또한 <td nowrap>은 잘못된 것이며 <td nowrap="nowrap">이 올바른 형식이다. 최소화될 수 없는 속성으로는 checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly 및 selected가 있다.
<option value="wrong" selected>틀린 경우</option>
<option value="right" selected="selected">맞는 경우</option>
참고: HTML 브라우저에서 HTML 4를 지원하지 않는 경우, 부울 속성이 전체 형식으로
표시되면 브라우저에서 이들 속성을 해석하지 못할 수도 있다.
모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
language 속성이 사용되지 않는 HTML 4 이후로는 script 요소의 type 속성을 반드시 지정해야 한다. 코드를 생성하거나 XHTML을 정리할 때 script 요소에서 type 및 language 속성을 설정하고 style 요소에서 type 속성을 설정한다.
<script type="text/javascript” language="javscript"></script>
<style type="text/css"></style>
모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 이들 속성을 설정하고, 찾을 수 없는 alt 속성을 보고한다. 모든 SCRIPT내의 태그는 Escape 시켜야 한다.
자바 스크립트에서 HTML 태그 쓰기에서 많은 경우 오류를 낸다. 자바스크립트 내에 데이터는 CDATA 형식으로 간주되기 때문에 HTML태그가 들어가게 되면 오류를 내게 되어 있다. 예를 들어 아래 예제는 잘못된 방식이다.
<script type="text/javascript">
<!--
// 틀린 표현!
document.write("</P>");
// -->
</script>
HTML4에서는 SCRIPT내에 데이터 중 시작 태그나 코멘트 부분은 인식이 안되지만 종료
태그는 인식이 되기 때문에 이를 역슬래시로 표시해야 한다.
<script type="text/javascript">
<!—
// 맞는 표현!
document.write("<\/P>");
// -->
</script>
XHTML에서, 스크립트와 스타일 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언된다.
결과적으로, <과 &는 마크업의 시작으로 처리되고, <과 &와 같은 개체(entities)들
은 XML 프로세서(processor)에 의해 각각 <과 &로의 개체 참조로서 인식되므로
CDATA로 마크업 하여 표시하는 게 좋다.
<script type="text/javascript">
<![CDATA[
... <h1>데이터</h1> ...
]]>
</script>
모든 문서 내 URL에서 &를 쓰면 안 된다.
URL에 &가 포함되어 있는 경우 에러를 낼 수 있다. 이것은 &가 XML 엔티티의 시작으로 인식 하기 때문에 생기는 문제이다. 기존 웹브라우저는 이러한 에러를 복구해 주고 있지만 유효성 검사기에서는 에러를 내게 된다.
<!—에러! --> <a href="foo.cgi?chapter=1§ion=2">...</a>
<!—적합! --> <a href="foo.cgi?chapter=1&section=2">...</a>
HTML 문서 내에서만 &를 &로 바꾸어야 하며 브라우저 주소창이나 이메일 본문에
서는 &를 써야 한다. 웹 서버에서는 &가 아니라 &만을 인식하기 때문이다.
다 알고 있는거라 자신하지 말자.
이밖에도 많은 유용한 팁이 많은데.....
다음에 또 생각나면 옮겨보자 :)
조금 수정해서 잘 쓸게요~
아 그런데, skin by 부분에서 Tarski와 Kawi모두가 똑같은 링크로 되어있네요. 가위님 블로그 링크가 잘못되어 있어서 가위님 블로그로 들어올수가 없어요^^;
간단한 건데요. 제작자(가위님) 링크가 잘못되었네요... ㅋㅋㅋ
그리고 제 blog(http://jhyu.tomeii.com/)에 가로달력을 삽입했는데요.(아무래도 제작자님께서 달력 삽입을 싫어하시는 듯... ㅋㅋㅋ) 달력과 네비게이션(메뉴)사이에 가로줄을 삽입하고 싶은데 어떻게 수정해야 되는지 모르겠습니다. 도움을 주셨으면 합니다.
오늘 하루도 행복하시길 바랍니다.
#navigation{border-bottom:1px solid #ccc;border-top:1px solid #ccc;} 로 수정하시면 됩니다. :)
근데 또 어려운 점 하나가 발생했습니다.
Allblet 관련글 표시 플러그인을 사용 중인데요.
해당 부분을 클릭하면 내용의 스타일이 이상하게 나옵니다.
바쁘지 않으시면 제 블로그에서 확인을 해 주시고 어떻게 수정을 해야 되는지 알려주시면 감사하겠습니다. 자꾸 귀찮게 해 드려 대단히 죄송합니다.
Allblet 이나 제 스킨중에 .post-title 클래스 이름을 바꿔주시고 skin.html(Allblet은 모르겠습니다만..)의 호출부도 수정해주시면 됩니다.
감사히 잘 쓰겠습니다 :D
스킨에서 본문내용 가로 픽셀을 좀 늘리고싶은데
어디서 수정을 해야하나요?
어떻게 하면되요? 태터 한지 얼마안되서 잘 모르겠네요
( 괄호(, ) 를 [ , ] 로 수정해 주세요 )
태터로 이미지나 레이어같은걸 넣었을 경우 그 다음문단에서 글을 쓰면 줄 간격이 전체적으로 줄어버리는데 이걸 일괄적으로 하나로 통일시키는 방법 없을까요?
(기본을 160%로 했다면 이미지를 넣은 그 다음문단 부터는 120% 정도로 주는 것 같습니다; 포스팅 전체의 줄이 통일되지 않더라고요. 어딜 고쳐야 할지 모르겠네요;ㅁ;)
원인이 있다면 태터소스의 문제인듯 한데,
다른 고수님들의 도움을 요청해야 할듯합니다 :)
Help me ~~
style.css 파일에서 #Primary, #secondary를 다음과 같이 수정해주세요.
#primary{width:500px;float:left;}
#secondary{width:170px;float:right;}
스킨이 너무 이뻐요- ^-^
그래서 현재 살짝 수정후에 사용중인데...
카테고리부분에..트리 이미지가 뜨질 않네요-;
그건 왜그럴까요?
skin.html 파일의 ##_Category_list_## 부분을 ##_Category_## 로 수정하여 사용하세요.
컨텐츠 영역의 넓이를 넓혀보려고 style.css를 건드려봤는데
생각대로 잘 되지 않아서 도움요청 드립니다 ^^;;
어떻게 고치면 넓어지는지요?? ^^;;;;
늘어난만큼 #wrapper와 body의 width도 늘려주시면 됩니다.
(또 다른것은 생각이 안납니다. 혹시 안되면 다시 답글주세요;)
단 상단이미지도 그게 맞게 맞춰주셔야 이쁘겠지요?
말씀해주신대로 했더니 일단 늘어나긴 하는데
글쓰기 폼에서 문제가 생기네요..
줄바꿈이 안된다던지.. 사진은 여전히 축소되어 올라간다던지....
그냥 써야 할까봅니다.. ^^;;
감사합니다 ^^
한 가지 질문이 있습니다. 혹시나 줄 간격을 조정할 수 있는
방법이 있을까요? css 쪽 파일을 건드려 봐도 별 변화가 없어서요...
http://nkko.com/box/tarski_tt.zip (수정본 다운로드)
수정본을 덮어씌워주시고 이후로는 style.css의 post-content 의 line-height를 수정함으로써 수정가능합니다.
그리고 이 코멘트 쓰기 폼에서 왼쪽에 있는 Name, Password, Homepage, Comment 란에 마우스를 갖다 대면 링크 손가락은 왜 생기는 것인지...
뭐 쓰는 데 문제는 없지만요... 그냥 좀 자꾸 눈에 띄어서요^^; 고칠 수 있는 거라면 고치고 싶은데 알려주세요...
블로그 타이틀과 블로그 설명, 그리고 태그 목록에 나타는 글씨가 흐려지는 효과를 없애고 싶으면 어디를 수정하면 되나요 ~_~;
숫자쪽에는 중앙정렬이 적용되어있는데, 요일에는 중앙정렬이 되어 있지 않길래 한줄씩 추가해줬더니 해결되었습니다 :)
----------------------------------------------- */
body{font-family:Verdana,Helvetica,Arial,sans-serif;font-size:70%;color:#545454;background:#fff;min-width:1024px;}
#wrapper{width:1024px;text-align:left;}
#content{clear:both;padding:2em 20px;}
#primary{width:820px;float:right;}
style.css 중에서 폭을 넓히기 위해서 위에와 같이 수정했는데..
다른부분은 손댄곳이 없습니다..
왼쪽 메뉴와 본문이 여백이 없이 딱 붙어 버리네요..
폭이 1024px에 맞게 수정을 하고 싶은데..
어느부분을 수정하면 되는지 좀 알려주셨으면 정말 감사하겠습니다..
http://www.mudepo.com/
보시고 조언좀 부탁드리겠습니다..
글씨크기 9px짜리 수정본을 받았습니다..
제가 출장중이라서 소스 살펴볼 시간이 없습니다; ㅠㅠ
인터넷도 일주일에 한두번 간신히 한답니다
가장 최신버젼은 http://nkko.com/box/tarski_tt_rev.zip입니다. (아마도; -_-a)
위 소스로 살펴보세요.
죄송합니다 (__)