2012. 7. 13. 15:50ㆍDevelopment/[HTML5] 웹표준
1. 웹표준이란?
표준이라는 단어는 사물의 정도나 성격 따위를 알기 위한 근거나 기준을 뜻하는 단어로서, 단순한 웹페이지를 구현하는 것이 아니라 웹을 관리하고 서비스하는 데 필요한 일정한 기준이라고 볼 수있습니다. 물론 이것은 사용자의 사용성이나 접근성에 있어서 현재의 인터넷 수준보다 더 표준으로 제공할 수있는 측면을 포함하고 있습니다.
그러기 위해서 기존에 무분별하게 사용해도 별탈(?)없던 코딩 스타일들에 변화를 줄 필요가 생겼죠.
우선 운영하고 계신 블로그나 사이트가 있다면, 웹표준을 얼만큼 준수하고 있었는지 검증할 필요가 있습니다.
[ 웹표준 검사 사이트 ] - http://validator.kldp.org/
2. 가장 기본적인 웹표준의 순서. MVC 패턴
인터넷 페이지를 구성할때 단순히 내용만 보여주는 페이지라면, html만 있으면되고, 좀 색깔도 넣고 예쁘게 하려면 css를 적용하고, 뭔가 기능을 넣으려하면 javascript를 사용했습니다. 그리고 한번에(?) 보기 편하라고 한페이지에 그 기능을 모조리 넣었죠. 그러다보니 나중에 어디 부분을 바꾸려면 일일이 그 파일들을 찾아가서 다 바꾸는 불상사가 발생했습니다.
그래서 일종의 MVC 패턴을 사용해야 하는 것이죠.
HTML - 화면에 보여지는 부분
CSS - 색깔이나 위치등을 조정하는 부분
JavaScript - 기능을 구현하는 부분
즉, 위의 3가지를 각각 따로 분리해야 합니다.
[test.html]
<head>
<script type="text/javaScript">
function fn_testing() {
alert("테스트입니다.");
}
</script>
<script type="text/css">
function fn_testing() {
alert("날 눌렀구나");
}
</script>
</head>
<body>
<div>
<input type="button" value\"날 눌러봐!" onclick="javascript/fn_testing();" />
</div>
</body>
예전에는 가령 위와 같이 test라는 html파일에 모조리 짚어 넣었던 것들을,
[test.css] - 파란색부분
[test.html] - 진한 검은색 부분 ( 보통 검은색 부분은 css와 JavaScript에서 안써도 됩니다 )
[test.js] - 빨간색부분
이렇게 각각의 파일로 분리하여 관리하는게 그 시작이라고 할 수 있죠. 물론 이것만이 웹표준을 뜻하는 것은 아닙니다. 여러 시간에 거쳐 차차 웹표준에 대해 하나씩 배워보도록 하겠습니다~
참고 : 참고자료로 공개 자료로 배포된 HTML5 가이드북 파일을 올립니다~ 다음시간까지 읽어보셔요~
html5-guide.pdf'Development > [HTML5] 웹표준' 카테고리의 다른 글
| [HTML] 디바이스 회전을 고려한 모바일 웹 코드 (0) | 2013.01.23 |
|---|---|
| 아주 유용한 table 헤더(thead) 고정 소스 (0) | 2013.01.09 |
| SyntaxHighlighter 3.0.83 버그 대처법 (0) | 2012.12.24 |
| 배경이미지와 그라데이션을 동시에 사용하는 CSS (2) | 2012.12.12 |
| 폰트 고정하기 : -webkit-text-size-adjust (0) | 2012.12.12 |