뭐 부터 시작하지? 모르는 단어부터 정리~
웹표준?
웹에서 표준으로 사용되는 기술.
W3C가 권고한 표준안에 따라 목적과 방법에 맞게 사용하는 것.
어떠한 운영체제나 브라우저를 이용 하더라도 같은 결과를 볼 수 있도록 표준안을 이용하여 웹페이지를 만들어 가는 것.
은 책이나, 네이버 검색에서 잘 살펴보면 더욱더 정확하고 확실한 언어로 정의되어있다.
내 생각엔 그냥 그냥 우리가 쓰는 220V 콘센트라고 생각하면 된다.
웹표준으로 코딩하면 뭐가 좋을까?
- 마크업 용량 감소
- 컨텐츠와 CSS의 분리로 수정과 관리 용이
- 미래에 나올 브라우저에 대한 상위 버전 호환성
- 검색엔진에 대한 최적화 방안
- 웹접근성 향상
그러면 웹접근성은 뭘까?
모든 사용자들이 웹사이트의 컨텐츠를 수비게 인식하고 서비스를 편리하게 이용할 수 있도록 만드는 것
ISO에서 정의하기로는 다양한 능력, 숙련, 요구, 취향을 가진 개인들이 정보에 접근할 수 있도록 하는 글로벌 요구사항
W3C WAI의 정의로는 장애를 가진 사람도 웹을 이용할 수 있도록 보장하는 것으로 장애를 가진 사람들이 웹컨텐츠를 인지하고, 운영하고, 이해하고, 기술에 상관없이 이용할 수 있도록 견고한 컨텐츠를 만드는 것
대한민국은 2009년 4월부터 장차법 발효로, 정부, 지방자치단체 및 공공기관이 운영하는 웹사이트는 장애인의 접근이 가능한 웹컨텐츠를 제공해야 함.
한 마디로 사람, 기계, 브라우져를 가리지 않고 컨텐츠를 이용할 수 있게 만드는 것이라고 생각하면 될 듯.
시멘틱마크업
말그대로 의미가 있는 마크업
크로스브라우징??
여러 종류의 웹브라우저에 동일한 서비스를 제공하는 것이라고 보면 된다.
웹브라우저의 종류
- Internet Explorer
- Firefox
- Chrome
- Safari
- Opera
파이어폭스 부가기능설치로 좀 더 쉽게 코딩을~
- Firebug
- Html Validator
- Web Developer
HTML : 문서타입, 기본구조
HTML : 문서타입, 기본구조
문서타입과 언어표시
Html / Strict / ko
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ko">
Html / Transitional / ko
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ko">
Html / Frameset / ko
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ko">
xhtml / Strict / ko
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
xhtml / Transitional / ko
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
xhtml / Frameset / ko
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html lang="ko">
[참고]공식 언어 코드(ISO 639-1) 목록
바로가기HTML 은 어떻게 생겼을까?
Html4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"> <head> <title> 문서제목 </title> </head> <body> 문서내용 </body> </html>
Html5
<!DOCTYPE html> <html> <head> <head> <title> 문서제목 </title> </head> <body> 문서내용 </body> </html>
HTML 1st : 머리글과 목록
머리글(H1~ H6)
- 계층 구조를 지킨다. > 단계적 계층이 깊어지는 섹션
- WCAG1.0에서는 '우선도'를 계층구조 순서로 정의
- 도중 레벨의 제목을 건너뛰는 것 피할 것
<h1> 제목1 </h1> <h2> 제목2 </h2> <h3> 제목3 </h3> <h4> 제목4 </h4> <h5> 제목5 </h5> <h6> 제목6 </h6>
제목1
제목2
제목3
제목4
제목5
제목6
목록(UL, OL, DL)
ol : ordered list
- 블록레벨요소이지만 li(list item)이외의 요소를 포함할 수 없다.
- 번호가 부여된다.
- li는 블록 레벨 요소를 포함할 수 있으며, ul요소와 ol요소를 중첩하여 사용할 수 있다.
<ol> <li>순서가 있는 리스트 </li> <li>순서가 있는 리스트 </li> <li>순서가 있는 리스트 </li> </ol>
- 순서가 있는 리스트
- 순서가 있는 리스트
- 순서가 있는 리스트
ul : unordered list
- 블록레벨요소이지만 li이외의 요소를 포함할 수 없다.
<ul> <li>순서가 없는 리스트 </li> <li>순서가 없는 리스트 </li> <li>순서가 없는 리스트 </li> </ul>
- 순서가 없는 리스트
- 순서가 없는 리스트
- 순서가 없는 리스트
dl : definition list
- dt(definition term)과 dd(definition description)요소를 포함한다.
- dt는 인라인 요소.
- dd는 블럭 레벨 요소이며 인라인요소와 텍스트를 포함할 수 있고, 블록 레벨 요소도 포함할 수 있다.
<dl> <dt>의미가 있는 리스트 타이틀 </dt> <dd>의미가 있는 리스트 타이틀의 의미나 내용 </dd> </dl>
- 의미가 있는 리스트 타이틀
- 의미가 있는 리스트 타이틀의 의미나 내용