그누보드 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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 33785 | |
| 33781 | |
| 33776 | |
| 33761 | |
| 33753 | |
| 33751 | |
| 33749 | |
| 33731 | |
| 33706 | |
| 33694 | |
| 33690 | |
| 33683 | |
| 33674 | |
| 33672 | |
| 33662 | |
| 33655 | |
| 33608 | |
| 33605 | |
| 33587 | |
| 33581 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기