Front/Html / / 2020. 6. 15. 21:47

[HTML] 1. 웹표준

728x90

* 참고사이트

https://ko.wikipedia.org/wiki/%EC%9B%B9_%ED%91%9C%EC%A4%80

http://w3c.org

http://w3schools.com

http://nuli.navercorp.com/ ( UI 라이브러리 | Coding Convention )

http://naradesign.net ( 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드 )

( https://naradesign.github.io/article/ )

 

* 웹접근성 참고

http://wah.or.kr ( 웹 콘텐츠 제작기법 )

 

* 마크업 테스트

http://validator.w3.org/

 

* CSS테스트

http://jigsaw.w3.org/css-validator/

 

* html5, css3

http://html5gallery.com/ (html5로 만든 사이트 소개)

http://101besthtml5sites.com/ (html5로 만든 베스트 사이트 소개)

http://www.css3.info/

 

* Bootstrap

http://getbootstrap.com/

https://wrapbootstrap.com/

 

* 디자인 경향, 웹사이트

http://www.dbcut.com/bbs/index.php

http://gdweb.co.kr/

http://designspoon.com/ (디자인작품,강좌)

http://jungle.co.kr/ (디자인포탈)

 

* 웹사이트 랭킹, 검색

http://www.rankey.com/

 

 

 

1. 웹표준의 세가지 계층

웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다. - wiki 백과

 

구조계층(structure) HTML, XHTML : 모든 웹페이지에 필수적

계층동작(behavior) Javascript : 동작, 필수X

표현계층(presentation) CSS : 디자인, 필수X

 

.css, .js 파일로 분리해서 사용하는 것이 좋음.

마우스가 없어도 키보드만으로 사용되어야 한다.

마크업 언어가 html5로 발전하면서 더이상 xhtml을 고집할 필요는 없다.

 

웹표준 마크업을 위해서는 문서형의 선언부터 언어지정, 문자코드 셋 지정 등도 중요하고 특히 의미에 맞는 마크업(시멘틱 마크업)을 위해 노력하는 것이 중요하겠다.

 

 

2. 웹접근성

웹표준성을 지키면 웹접근성은 어느정도 지켜집니다. 

웹접근성 연구소 : https://www.wah.or.kr:444/index.asp

장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 인터넷 공간 만들기

 

한국형 웹 콘텐츠 접근성 지침 2.1 (KWCAG 2.1)에 맞게 만들어야 합니다.

2015년 3월 31일 지침 2.1 개정

웹 콘텐츠 제작기법

웹접근성 제작기법에 대한 정보 제공

 

 

 

3. 웹 표준에 맞는 html

1) 좋지 않은 예  : a태그를 사용할 떄 

<a href="" onclick="window.open('','','')>go naver</a> :

자바스크립트가 작동되지 않으면 동작하지 않는다. 

웬만하면 스크립트를 넣지 않아야한다. 

 

2) 좋지 않은 예 : font태그를 쓸 떄

<font size=""></font> 

이제 사라짐. 모두 css를 통해서 작업해야한다.

 

 

3) 좋은 예 

파일을 분리해서 할 것. 

<link rel="stylesheet" href=css/style.css"> 
<script src="js/commo.js"></script>

 

300x250
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유