책정보 넣기 문제있습니다.
티스토리에 새로 추가된 플러그인. 책정보 넣기 . 보니까 문제 있더군요. 소스 보고 깜짝 놀랐습니다. 이게 뭡니까?
- <div id="daum_book" style="border: 1px solid rgb(238, 238, 238); margin: 5px 0px 0px; padding: 10px; width: 94%;">
- <a id="p_coverlink" href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" target="_blank"> <img id="p_cover" src="http://photo-book.hanmail.net/images/book/large/074/l9788925506074.jpg" style="border: 0px solid rgb(221, 221, 221); float: left; margin-right: 10px; height: 99px;"> </a>
- <a target="_blank" href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" id="p_title" style="font-size: 12px; font-weight: bold;">현시연 9</a>
- <a target="_blank" href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" id="p_link" style="background: transparent url(http://cfs.tistory.com/blog/plugins/DaumBookInfo/images/icon_arrow.gif) no-repeat scroll right 3px; font-family: 돋움; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: normal; font-size-adjust: none; font-stretch: normal; letter-spacing: -1px; color: rgb(153, 153, 153); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-right: 5px; text-decoration: underline; display: inline;">상세보기</a>
<div id="p_author_area" style="margin-bottom: 8px;"> <span id="p_author">KIO SHIMOKU</span> 지음 | <span id="p_publish">북박스</span> 펴냄 </div>
- <div style="overflow: hidden; height: 52px;"> <span id="p_description" style="margin: 2px; font-family: Dotum,Sans-Serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: 1.5; font-size-adjust: none; font-stretch: normal;">지금까지 할 수 없었던 말, 이 자리에서 다 해버리고 싶다! 지금이라면 웃으면서 할 수 있을 것만 같아. 일본에 오타쿠가 있다면 한국엔 폐인이 있다! 각종 폐인 사이트 최고의 화제작!!</span> </div>
</div>
보라색으로 밑줄그은부분이 삭제해야할 부분이고. 노란색부분은 고쳐야할 부분입니다.
클래스로 선언해도 충분한것을 굳이 ID로 선언한 이유를 모르겟습니다.
인라인스타일은 왜이렇게 많은것이며, target="_blank" 는 왜 들어갑니까?
이렇게하면 어떨까요?
아래는 제가 나름대로 마크업을 수정한것입니다.
- <div class="daum_book" >
- <a class="p_coverlink" href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074">
- <img class="p_cover" src="http://photo-book.hanmail.net/images/book/large/074/l9788925506074.jpg" alt = "책표지그림" /></a>
- <a href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" class="p_title">현시연 9</a>
- <a href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" class="p_link" >상세보기</a>
- <div class="p_author_area" >
- <span class="p_author">KIO SHIMOKU</span> 지음 | <span class="p_publish">북박스</span> 펴냄
- </div>
- <div>
- <span class="p_description" >지금까지 할 수 없었던 말, 이 자리에서 다 해버리고 싶다! 지금이라면 웃으면서 할 수 있을 것만 같아. 일본에 오타쿠가 있다면 한국엔 폐인이 있다! 각종 폐인 사이트 최고의 화제작!!</span>
- </div>
- </div>
인라인스타일과 비표준요소인 target 을 제거하고. ID를 class로 대치한것입니다. 얼마나 보기 좋습니까?
한 페이지안에서 두게이상의 ID를 선언하면 안되는 이유.
한페이지 안에서 두게이상의 ID를 선언하면 안됩니다. ID는 한페이지에 오직 하나만 있어야 합니다.
자바스크립트로 다음북의 컨텐츠에 접근하고자 할때 document.getElementByID("daum_book")으로 접근해야하는데. 책정보를 하나넣으면 상관없지만. 여러개를 집어넣으면. 두번째 아이디부터 아래로는 도저히 접근할수가 없습니다.
- var daumbook_EL = document.getElementById("daum_book");
- daumbook_EL.setAttribute("style","background:#ffa");
이방법으로는 첫번째 책정보의 배경색만 노란색으로 바뀔뿐. 그 다음의 두번째, 세번째는 도저히 조작할 방법이 없는것입니다.
제가 제시한 벙법인 클레스로 선언하면 다음의 방법으로 각각의 엘리멘트에 접근할수 있습니다.
- function getElementsByClassName(clsName,parentNode) {
- var arr = new Array();
- if (parentNode == null) {
- var elems = document.getElementsByTagName("*");
- } else { var elems = parentNode.getElementsByTagName("*");}
- for ( var cls, i = 0; ( elem = elems[i] ); i++ ) {
- if ( elem.className == clsName ) {
- arr[arr.length] = elem;
- }
}
return arr;
}
클레스 이름으로 특정 엘리멘트에 접근하는 자바스크립트 함수입니다. 이것을 사용하면. class로 정의된 다음 책정보 넣기의 엘리멘트에 각각 접근할수 있습니다.
- var content = document.getElementById("content");
- var daumbook_EL = etElementsByClassName("daum_book",content)
이렇게하면 daum_book 으로 정의된 각각의 책정보에대한 엘리멘트가 daumbook_EL 이라는 이름의 변수에 배열로 저장됩니다.
- for (i=0; i<daumbook_EL,length; i++) {
- daumbook_EL[i].setAttribute("style","background:#ffa");
- }
그러면 이런방법으로 다음책정보의 색을 모두 노란색으로 바꿀수 있습니다.
인라인스타일은 CSS를 모르는사람을 위한 배려라고 생각할수 있지만. CSS를 만질줄 아는사람 입장에서는 불필요하게 여겨지는 요소입니다. 가급적 빼주시거나, 인라인스타일이 없는 코드를 집어넣을수 있게 해주셨으면 합니다.
인라인스타일이 없는 마크업을 생성할수 있게 해주세요.
- <div id="content" class = "content">
- <p class = "hello">안녕하세요 </p>
- </div>
여기에 "안녕하세요" 라는 내용에 5픽셀 마진. 10픽셀 패딩. 2픽셀 검은색 단선 보더를 주고자합니다. 방법이야 수십가지가 넘겠지만. 제가아는 몇가지 방법을 들자면 다음과 같습니다.
- 1 helo {padding:10px; margin:5px; border:2px solid #000}
- 2 p.helo {padding:10px; margin:5px; border:2px solid #000}
- 3 #content p.helo {padding:10px; margin:5px; border:2px solid #000}
- 4 <p style="padding:10px; margin:5px; border:2px solid #000">
1번부터 3번까지는 스타일시트(CSS)에서 선언하는 방법이고 4번은 인라인스타일입니다. 이 4가지 방법에 차이가 있다면. 그것은 우선순위입니다.
한가지 앨리먼트에 중복되는 속성이 있을경우. 웹브라우저에서는 1번보다 2번이 우선하고, 2번보다 3번이 우선하며, 3번보다 4번을 우선하여 해석합니다.
따라서 인라인스타일에서 border:2px solid #000 로 보더를 검정색으로 잡아버리면. 스타일시트에서 무슨수를 써도 검은색보더를 없앨수 없게 됩니다.
- 1 helo {border:2px solid #ff0}
- 2 p.helo {border:2px solid #fa00}
- 3 #content p.helo {border:2px solid #040}
- 4 <p style="border:2px solid #000">
이와같이 하나의 엘리멘트에 중복되는속성이 있는경우. 웹브라우저는 4번의 인라인스타일을 최우선해석하기때문에. p의 보더값은 2px solid #000 이 됩니다.
결국 인라인스타일 선언으로 인해서. 사용자는 CSS에서 책정보보기의 스타일을 도저히 정의할수 없게 됩니다. 입맛에 맞게. 사용하는 스킨에 맞게. 다시 디자인할수 없습니다.
편법으로 자바스크립트를 사용해서 강제로 인라인스타일을 변경하는 방법이 있긴합니다만. 좋은방법은 아니라고 생각합니다.
물론 인라인스타일은. CSS를 모르는 사용자를 위해 불가피하게 필요한 요소이긴합니다.
하지만. 저같이 CSS를 직접 다루는 사용자도 분명 존제합니다.
따라서, 인라인스타일이 없는 마크업을 생성할수 있도록 옵션형식으로 추가해주셨으면 합니다.
정리하겠습니다.
제가 원하는 수정사항은 전부 5가지이고 다음과 같습니다.
- 마크업에 불필요한 ID 선언. -> class 로 대체 바랍니다.
- img 태그에 종결태그 / 이 빠졌음. -> <img src="" /> 수정 바랍니다.
- img 태그에 alt 빠졋음 . -> 추가 바랍니다.
- "target=_blank" 는 비표준요소. 삭재바랍니다. 아니면, 옵션으로 새창띄우기 없는 마크업을 생성할수 있도록 해주세요.
- 인라인스타일 CSS다룰줄 아는사람 입장에서는 불필요한요소. -> 인라인스타일을 뺀 마크업을 집어넣을수 있게 수정 바랍니다.
저는 상기 5가지 수정요구사항이 관철되는 그날까지. 티스토리 책정보 플러그인을 사용하지 않을것입니다. 아니 사용못합니다.
작년에 제기했던. 티스토리 플러그인 유효성문제 언제나 해결됩니까? 검토중이라고 하셨는데.. 그후 전혀 소식이 없으니.. 검토 하긴 한건가요? 아니면 수정할 필요가 없다고 판단하여 보류중인것인가요?
소스코드 몇줄만 고치면되는 문제가 뭐가 그리 어려워서 1년이 넘도록 답보상태인지 답답하기만합니다. 이번 책정보 플러그인의 유효성문제또한 이전의 문제와 같이 무시되는것은 아닐련지 걱정됩니다.
마크업 수정전의 책정보 넣기 결과물 : W3C 유효성검사 결과
마크업 수정 후의 책정보 넣기 결과물 : W3C유효성검사 결과
이 글은 스프링노트에서 작성되었습니다.
