본문 바로가기

홈피관련글

[130619] 웹표준 5강

반응형

도구 - 파일에서 기본인코딩을 UTF-8 로 변경

문서 템플릿에 XHTML 에  

 <!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" xml:lang="ko" lang="ko"> <!----한국어 지원에 대한 기본설정----->
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <!-----더 많은 컴퓨터들이 읽어 내게해줌---->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 

 

---------------------------------------------------이하 실습ㅋ

<!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" xml:lang="ko" lang="ko"> <!----한국어 지원에 대한 기본설정----->
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <!-----더 많은 컴퓨터들이 읽어 내게해줌---->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

<body>
<p>
 <a href="#" title="">   <!---a태그에는 title라는 속성이 있음 (alt와 비슷하나 작성하지 않아도 오류는 (문법에안걸림) 안남)---->
 블록 레벨은 독립된 행을
 </a>
</p>

<p>
 <a href="#">
 인라인 레벨은 지정된 범위를 표시합니다
 </a>
</p>

<div>
 <p>
 DIV태그 안에 P를 사용한 문장
 </p>
</div>

<div>
 <p>
 P태그 안에 DIV를 사용한 문장
 </p>
 </div>

 <img src="" alt=""/> <!----alt는 그림의 속성을 설명하는 대체언어(작성하지 않을 경우 문법에 걸림)---->

 </body>
</html>

 

 

--------------------------------------------------------------------

웹표준 검사

markup 검증서비스

 

http://validator.kldp.org/ - 한글사이트

http://validator.w3.org/ - 영문사이트

(최소한 표준화 검사 페이지에는 적정해야 함..기본임 but 거기서 끝나는 것이 아니라 페이지의 접근성이 향상될수 있게 만들어야함)

7월 8일 월수금 - j쿼리

 

KWCAG 2.0

 

 

레이아웃 요소

1. 테이블

2. DIV

 

**요소레벨 (Element Level)

:태그들이 어떻게 보여지는가의 구분

 

1. 블록레벨 (block level)

- 독립된 행을 가지는 요소

- 다른 블록 레벨 요소와 인라인 레벨 요소 포함

- 다른 블록 요소를 포함하지 않는 요소

- p,h,dt...

p,h,dt, div, ul, li, dl, dd....

 

2. 인라인 레벨 (Inline level)

- 범위의 표시

- 인라인 요소만 포함

- 크기 지정 불가

- strong, span, a, img, em...

 

 

**기본 레이아웃 구성(3단 구성)

1. header

- 웹사이트에 공통으로 적용되는 부분

- 로고, 상단메뉴, GNB등

(GNB : Global Navigation Bar - 웹사이트의 모든 페이지에서 보여지는 메뉴 ex - 위에 상단 메뉴)

  메뉴바=네비게이션

 

2. content

-해당 페이지에서 보여주고자 하는 주요 내용

- 주요 내용, 배너,  게시판, LNB, 퀵메뉴,,

(LNB : Local Navigation Bar - 같은 상위 메뉴에 포함된 하위 메뉴 ex - 특정지역 상단메뉴 안에 있는 2차메뉴 )

 

3. Footer

- 해당 회사 또는 웹 사이트의 정보표시

- 주소, 전화번호, 대표, 카피라이트

 

 

반응형

'홈피관련글' 카테고리의 다른 글

[130626]웹표준 7강  (0) 2013.06.26
[130624] 웹표준 6강  (0) 2013.06.24
[130617] 웹표준 4강  (0) 2013.06.17
[130614] 웹표준 3강  (0) 2013.06.17
[130612] 웹표준 2강 2교시 - 태그  (0) 2013.06.12