테스트 사이트 - 개발 중인 베타 버전입니다

생초보를 위한, 그누보드 강제 웹표준화 접근 방식

· 13년 전 · 5259 · 3
그누보드 DTD 버전이 아닌 일반 그누보드에서 강제로 웹표준 스킨을 만들기 위한 접근법입니다.
제대로 웹표준화를 하는 경우라면 이것보다 참고할 자료가 많다는것을 알아두세요.
이 글의 내용은 코드 구조 개선용으로만 참고해주세요.
('웹표준'은 언어로 치면 문법에 해당하는 부분이기때문에 아래 내용과는 차이가 있습니다.)

1. 양식(form) Id/Name: form name="fwrite" => form id="fwrite"
스크립트 작성: fwrite id값을 가진 폼을 선택해 fwrite name 추가
document.fwrite 선택자를 가진 스크립트 전부를 변경하지 않는 상황일 때 씀
그러나 웬만해서는 id 값에 맞춰서 새로 짜는것을 권장
* 스크립트 작성 부분은 정말 제대로 웹표준 사이트 작성하는 경우라면 써먹지 말것.

2. 양식(form) Action
onsubmit="return somefunction();"
-> action="./write_update.php" 정확하게 목표 url을 써주자.
onsubmit으로 처리되던 부분은 외부 스크립트가 처리하도록 한다.

3. input 태그 required 속성
input에 required 를 class로 준다 => input class="required"
jquery: $("#fwrite input.required").attr("required", "required");
그 외 'email'과 여러 검사 기능도 같은 방법으로 적용하도록 한다.
css: 그누보드 루트 style.css : .required { background: url(js/wrest.gif) right top; }
* itemname 속성은 title 등의 속성으로 대체해서 쓴다.

4. img border
쓰면 안되는 속성은 아니지만 거슬린다. 스타일시트에서 img { border: 0; } 으로 초기화시켜주자.

5. 대체 텍스트
img및 input type="image" 에는 alt 속성으로 대체 텍스트를 넣어준다.
예) <img src="button.gif" alt="버튼" />

6. javascript type 지정
script language="javascript" 쓰지 말자. script type="text/javascript"를 쓰자.
그리고 아래와 같이 쓰면 좋다.
<script type="text/javascript">
//<!--<![CDATA[
script code
//]]>-->
</script>

7. 스크립트 분리
스크립트 분리는 구지 안해도되지만 분리해야 하는 경우 php 코드로 작동하던 부분들이 문제가 되곤 한다.
이런 경우 아래와 같이 하면 해결책이 될 것이다.
<script type="text/javascript">
//<!--<![CDATA[
    var one = "<?php echo $one; ?>";
    var two = "<?php echo $two; ?>";
//]]>-->
</script>
<script type="text/javascript" src="somescript.js"></script>

8. 스타일 시트 문제
아쉽게도, style, link 태그가 body 안에있으면 웹표준에 다 위배된다. 이걸 그나마 해소해보자.
head.sub.php head 태그 안쪽에 추가

$path_parts = array($member_skin_path, $board_skin_path, $new_skin_path, $connect_skin_path);
for($i = 0; $i < count($path_parts); $i++) {
    if(!is_null($path_parts[$i])) {
        if(file_exists($path_parts[$i] . '/style.css')) {
            echo '<link rel="stylesheet" type="text/css" href="'.$path_parts[$i].'/style.css" />'."\n";
        }
    }
}
//(좀 더 개선해서 쓰시는걸 권장합니다.)

팁이라고하긴 뭐하지만... 찾는 분이 있으실까해서 올려봅니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

감사합니다. 저도 이제 웹표준에 관심을..^^
13년 전
감사합니다...
오. 알기 쉽게 정라해주셔서 감사합니다. ^^

게시글 목록

번호 제목
34292
34279
34278
34264
34251
34231
34196
34184
34166
34151
34143
34142
34134
34132
34131
34125
34093
34076
34060
34031