생초보를 위한, 그누보드 강제 웹표준화 접근 방식 정보
생초보를 위한, 그누보드 강제 웹표준화 접근 방식
본문
그누보드 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";
}
}
}
//(좀 더 개선해서 쓰시는걸 권장합니다.)
팁이라고하긴 뭐하지만... 찾는 분이 있으실까해서 올려봅니다.
제대로 웹표준화를 하는 경우라면 이것보다 참고할 자료가 많다는것을 알아두세요.
이 글의 내용은 코드 구조 개선용으로만 참고해주세요.
('웹표준'은 언어로 치면 문법에 해당하는 부분이기때문에 아래 내용과는 차이가 있습니다.)
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
3
댓글 3개

감사합니다. 저도 이제 웹표준에 관심을..^^

감사합니다...

오. 알기 쉽게 정라해주셔서 감사합니다. ^^