관리 메뉴

IAress

웹표준과 접근성 2일차. 본문

카테고리 없음

웹표준과 접근성 2일차.

IAress 2012. 10. 10. 22:24
반응형
** 내용 전달 요소
1. 텍스트
2. 이미지(정적 이미지)


이미지를 지원하지 않는 웹브라우저를 대비하여 이미지를 대체할 수 있는 텍스트를 기입한다.

<img src="이미지링크"  alt="대체 텍스트"  longdesc="대체 텍스트(내용이 길 경우)" />


** HTML 의 기본 구조

1. "<" 와  ">" 사이에 명령어(tag:태그) 작성

2. 시작(여는) 태그와 종료(닫는) 태그로 구성

3. 종료 태그가 생략 가능하거나 없는 태그 있음

   ex) * 생략가능한 태그

           p, 주석...

         * 닫는 태그가 없는 태그

           meta, img, br, hr....

***********************************************************************************************

* xhtml

3. 태그의 종료는 반드시 표기

    ex) * 생략 가능한 태그 -> 생략 불가  (주석 예외)

         * 닫는 태그가 없는 태그 :

             태그 끝 부분에 "/" 표기

             <br> -------------------> <br />

             <img src=""> ------------> <img src="" />

***********************************************************************************************


4. 대소문자 구분 없음

***********************************************************************************************

* xhtml

4. 대소문자 반드시 구분

   단, 모드 태그와 속성은 소문자로만 표기

***********************************************************************************************


5. html 이라는 태그 안에 head 와 body 로 구분

<!DOCTYPE> <-- xhtml  에서 추가

<html>

  <head>

      스타일, 문서 속성, 타이틀

  </head>


  <body>

      화면에 나타낼 컨텐츠

  </body>

</html>


** 태그의 기본 구조

<태그 속성="속성값" 속성= 속성값".....>

1. 하나의 태그에는 여러  개의 속성 사용 가능

    단 같은 속성을 두번 이상 사용 불가


2. 하나의 속성에 는 하나의  값만 입력


3. 속성값은 원칙적으로 한글 사용 불가

   단,  원래 이름이 한글인 경우는 제외

   <font face="바탕">


4. 태그와 속성, 속성과 속성은 사이띄기로 구분


5. 속성값에는 "" 생략할 수 있다.


******************************************************************

 * xhtml

5. 속성값에는 ""를 생략할 수 없다.

******************************************************************




반드시 닫아라, 대소문자 구분해라, 따옴표 꼭 써라



** 글자 관련 태그

1. h(Heading) : 제목 태그

   - 1(가장 큰 제목) ~ 6(가장 작은 제목)

   - 단계적 사용

   - h1 태그는 문서 전체의 제목에만 사용

     (한 페이지에 1~3개 정도가 적당)


2. p(paragraph) : 내용, 문단, 일반 컨텐츠


3. br(Break) : 줄 바꿈


4. 목록 관련

  * 정의 되어 있지  않은  목록

    1. ul(Unordered List) - 비순차 목록

    2. ol(Ordered List) - 순차 목록

    3.  li(List)  -  ol, ul의 항목 나열


  * 정의 되어 있는 목록

  1. dl(Definition List) - 정의 목록

  2. dt(Definition Term) - 정의 제목

  3. dd(Definition Description) - 항목나열















반응형
Comments