아이디/비번 기억
  • 봉하마을 방문후기
  • 미디어협동조합 국민TV국민TV의 조합원이 되어주세요!
  • 한국탐사저널리즘센터
현재위치 : HOME > 구구자료실

웹표준 교과서 요약 (속성)

구구 | 2012.06.15 13:32 | 조회 8895

1.장 웹표준은 무엇인가.

  • 기관 및 단체 
  • ECMA

    • ECMA 262 : java script 표준규격
    • ECMA 357 : xml 표준 규격
  • w3c(http://www.w3c.org)

    • 초안(Working Drafts)
    • 최종초안(Working Drafts Last Call)
    • 권고안(Candldate Recommendations)
    • 권고후보(Proposed Recommendation)
    • 권고(Recommendations)
  • 웹표준 장점

    • 수정과 관리 용이(콘텐츠 구조화 및 시각표현 통일)
    • 웹 접근성 향상(다양한 사용자에게 높은 접근성 제공)
    • SEO(검색엔진 최적화) 대체(SEO를 이용한 문서구조 명확히)
    • 파일 사이즈 축소와 서버 저장공간 절약(효율적으로 소스 작성 가능, 서버 부담 최소화)
    • 하위호환성과 상위 호환성(오래된 페이지 에서도 콘텐츠 적절하게 표시되고 상, 하위 호환성과 상호운용성이 확보 )

 

  • 구조언어

    • html4.0 : Strict, Transitional, Frameset DTD의 세가지 문서형 사용가능
    • XHTML 1.0 : Strict, Transitional, Frameset DTD의 세가지 문서형 사용가능
    • XHTML 1.1: Strict 만 사용가능
  • 그 밖에 언어

    • mathML : 수식 기술언어로 근래(HTML5) <Canvas>태그를 이용하여 자주 사용됨
    • SVG : 2차원 백터 그래픽 기술 언어로 두점사이의 거리를 이용하기 때문에 이미지 변환시 이미지 손상이 적다.
    • RDF/RDFS : 메타데이터를 표현하기 위한 언어
    • 웹접근성(WCAG1.0) : (현재 2.0)문서가 잘변환되게, 콘텐츠를 이해 가능하고 조작 가능하게 두테마를 기본으로 검사항목으로 구성

 

2장 문서구조 - XHTML 웹페이지 구축 시작

 

  • HTML, URI, HTTP

    • HTTP : 문서 전송 프로토콜로 TCP/IP(양방향 연결 지향, 신뢰성 높음)와 관련된 하나의 응용프로토콜
    • HTML에서의 응답 요청에는 HTTP해더(HTML문서 해석 방법)와 HTTP문서로 응답 요청을 실행한다.
    • URI : = URL(주소) + URM(자원이름)

      • 절대 URI : URI스킴에서 패스까지 전부 적는 것(일반적인 URI)
      • 상대 URI : 자신의 파일, 폴더를 기점으로 한 다른 파일과의 경로(주로 자기사이트안 폴더와 파일을 참조할때 사용)
  • XHTML 의 전체 모양과 서식

    • html 요소를 루트로 하는 트리구조로 됨
    • 내용을 태그로 둘러싸서 마크업하는 것이 특징(<요소명>내용</요소명>)
    • 요소의 속성을 부여할때 <요소명 속성명="속성값">형식으로 기술
    • 부모 요소와 자식 요소의 관계를 적절하게 지정 
  • 인코딩 속성UTF-8 : (표준) 8bit의 가변 멀티바이트로 문자 표현

    • ISO-LATIN-1 : 8bit로 한문자를 표현
    • ASCII : 7bit로 한문자 표현
    • EUC-KR : (ISO-LATIN-1 + 동아권 문자)로 헌문자 표현
  • 문서형 선언 : <!DOCUMENT html(문서) PUBLIC(예약어) "-//W3C//DTD XHTML 1.0 Strict//EN"(공인 URI)

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"(시스템 식별자)>로 선언

    • strict : 하위호환성이 엄격하다.
    • transition : 상위 호환이 잘됨
    • frameset : frame 태그 사용할때 문서에 선언
  • 네임 스페이스 : <html xmlns="http://www.w3.org/1999/xhtml"(네임스페이스) xml:lang="ko" lang="ko"(언어코드)>
  • 메타데이터 속성 정의

    • 마임타입과 문자소스 코드 : meta태그 내 http-equiv="Content-Type"(마임타입) content="application/xhtml+xml;charset=UTF-8"(문자 소스코드)
    • 검색로봇 제어 : name속성에 "ROBOTS"지정
    • content 속성 (복수 지정 가능) : ALL(기본값, INDEX, FOLLOW 동일), NONE("NOINDEX, NOFOLLOW" 동일),INDEX(그페이지를 수집대상으로함)

, FOLLOW(그페이지 + 링크페이지 수집대상),NOINDEX(그 페이지를 수집대상에서 제외), NOFOLLOW(그페이지를 포함한 링크 페이지를 수집대상에서제외)

    • 그룹화 요소(<thead>, <tbody>, <tfoot>)

<table>

<thead>


<tr>

<td>...</td>

....

</tr>

</thead>

<tbody>

<tr>

<td>...</td>

.....

</tr>

</tbody>

<tfoot>

<tr>

<td>...</td>

....

</tr>

</tfoot>

->>표가 크기가 커질굥유 스크롤바 제공및 복수 인쇄 페이지등 사용자에게 편리한 인터페이스는 제공 가능하게 해준다.

  • 열 결합

<thead>

<tr>

<th id="brs" axis="화면표시" abbr="브라우저">브라우저</th>

<th id="ver" axis="화면표시" abbr="버전">버전</th>

<th id="pct" axis="비율" abbr="비율">비율</th>

</tr>

</thead>

<tbody>

<td headers="brs ver" colspan="2">합계</td>

...........................

=>위의 식처럼 thead에서 선언한 id값을 headers를 이용하여 두개의 th태그를 사용할수 있다.

*tabindex 속성 accesskey 속성 (현실성이 떨어짐)

tabindex : tab키를 눌렀을 때의 포커스 이동순서 지정

accesskey : 엑세스키를 눌렀을 때의 포커스를 지정

  • 이미지 요소 사용시 alt속성 반드시 기재(속성명 = 이미지 설명)

 

 3장 시각표현 - css로 자유롭게 디자인하기

  • CSS

    • : 웹페이지의 시각적 표현을 제어한다.

    • : 계단식 폭포 구조로 상위 요소 -(전파)->하위요소

  • CSS 기본 규칙

    • [서식]선택자 {속성 : 값}

    •  콤마로 구분하여 다수 선택자에 대해 서술 가능 (h1, h2,h3{color:green})

    • 소문자로 기술한다.

    • 주석 = /* 주석 내용 */

    • 절대단위 : 보여주는 그대로 pt(포인트, 1/72인ㅊ)

    • 상대위치 : 화면등에 따라 변환된다 px(픽셀), em(기본 속성값을 1로하여 0.1(1/10배), 2(두배) 기술

    • URI : CSS값에 URI를 지정할때 사용 (@import.ur(URL))

    • 상속 Table(<Table> <tr><td></td></tr></table>) tr, td 태그, <div><span></span></div>(span의 부모는 div)에 속성값에 inhreit속성명을 지정

  • CSS 적용방법 및 우선순위

    • 적용방법

      • 개별요소(<p style="margin:15px">)

      • <head>범위안에 style요소 지정<style type="text/css">p{margin:15px}

      • <head>범위안 link를 이용하여 외부 스타일 시트 참조(<link rel="stylesheet" href="./css/default.css"/>)

      • <head> 범위안 @import를 이용하여 외부 스타일 시트 참조<style teyp="text/css">@import.url(URL)</style>

      • <meta http=equiv="Context-Style-Type" content="text/css"

    • 우선순위

      • 선택자에 포함된 아이디 수

      • 가상클레스와 클래스 속성

      • 선택자에 포함된 요소명

      • !important 를 이용하여 최우선순위 정의 가능

  • 선택자와 가상 클래스, 가상 요소

    • 전체 선택자 : 선택자에 * 기술하면 모든요소에 스타일을 지정이 가능

    • 타입선택자 : 선택저에 요소명을 기입하면 기입한 요소에 스타일을 지정한다

    • class 선택자 : 요소명.class명 부여하여 스타일을 지정한다. 또한 요소명없이 .class명으로 해당 class명이 정의된 요소들에게 스타일을 지정할수 있다.

    • id 선택자 : 요소명#id값 을 기입하여(id는 고유값) 스타일을 지정한다. 단하나의 요소의 스타일을 정의할때 사용   

      • class , id 선택자로 사용이 가능한 문자 : 알파벳(a~z, A~Z)로 시작하고 숫자(0~9), - , Unicode(ISO 10646)에서 인정하는 일부 문자로 구성

    • 선택자 조합

      • 선택자(부모) 선택자 : 부모요소에 포람된 모든 자식요소를 바탕으로 스타일을 적용하는 방법

      • 선택자(부모) > 선택자 : 부모요소 바로 뒤의 자식 요소를 대상으로 스타일을 적용하는 방법

      • 선택자 + 선택자 : 트리 구조상 동일한 부모 요소를 가진 childNodes 요소를 대상으로 스타일을 적용시키는방법

      • 선택자, 선택자 : 복수 요소에 스타일을 한번에 적용

    • CSS3에 추가 예정 선택자

      • 요소명[속성명^="속성값"] : 요소명의 해당 속성명, 속성값과 앞부분이 일치하게 포함된 요소

      • 요소명[속성명$="속성값"] : 요소명의 해당 속성명, 속성값과 뒷부분이 일치하게 포함된 요소

      • 요소명[속성명*="속성값"] : 요소명의 해당 속성명, 속성값이 적어도 하나 이상 포험된 요소

      • 요소명~요소명 : 요소의 간접적인 동생 요소를 타깃으로 스타일을 적용하는 방법

  • 가상클레스

    • :first-child : 부모요소:first-child 부모요소에서 처음 등장하는 자식 요소에만 스타일 적용

    • 링크 가상 클레스 : 링크 제어 :link(열린적 없는 페이지로의 링크 적용), :visited(이미 열린 적 있는 패아자로의 링크 적용) 

      순서 => link  ->visited->hover 순이다.

  • 박스 모델

    • 내용, 보더, 패딩(해당 내용과 보더 사이거리), 마진(보더와 다른요소 거리)으로 이루어짐

  • 시각정형모델

    • display 속성

      • none : 시각적으로 표시되지 않는다

      • block : 해당 요소를 블럭박스로 만듬

      • inline : 해당 요소를 인라인박스로 만듬

      • inline-block : 요소를 블록박스로 만들지만 자체는 치환요소같이 하나의 인라인 박스로 배치

    • position 속성

      • static : 보통의 배치(요소들간 영향 있음)

      • relative : 상대배치 (본래의 위치에서 상대적으로 이동)

      • absolute : 절대배치(요소들간 영향 없음)

      • fixed : 고정배치(+absolute)

    • 플로트

      • 요소의 박스를 이동시키는 것을 플로트라고 한다.

      • clear : 플로트 해제

    • display, position, float 속성 계층적인 규칙

      • display 속성이 none 아면 position 속성과 float속성을 무시

      • position 속성 값이 absolute, fixed 이면 display 속성 값은 block, float속성값은 none

      • float속성값이 none이외의 경우 display속성 값은 block

      • display 속성이 다른 값이 설정되면 그대로 적용

    • z-index : 요소들의 겹침으로 인해 겹치는 순서 지정(높은 값이 빠른순)

    • 텍스트 표기방향

      • direction : 텍스트 기본 표기 방향(ltr:왼쪽>오른쪽, rtl:오른쪽>왼쪽)

      • unicode-bidi

        • nomal : 기본값으로 Unicode의 표기방향

        • embed : directon 속성에서 설정한 방향

        • bidi-override : 인라인, <블록><인라인/></블록> unicode 표기방향 설정 무효

    • width , height 속성 규칙

      • 비치환 인라인 요소에는 width, height 속성 적용불가(높이는 line-height속성으로 지정)

      • 절대배치된 블록레벨의 요소의 포함블록 등식으로 결정

        • 폭 = left+margin-left+border-left-width+padding-left+width+padding-left+border-right-width+margin-right+right

        • 높이=top+margin-top+border-top-width+padding-top+height+padding-bottom+border-right-bottom+margin-bottom+bottom

    • 인라인 박스의 높이 : line-height속성으로 지정

    • 인라인 박스의 수직위치 : vertical-align 으로 지정

  • 시각효과

    • overflow 속성 : 요소의 크기가 벗어날 경우 처리하는 방법

      • visible : 박스 밖으로 나가는 내용을 자른다 박스 바깥쪽에도 표시 0

      • hidden : 박스 밖으로 나가는 내용을 자른다 박스 바깥쪽 표시 x

      • scroll : 박스 밖으로 나가는 내용을 자른다 스크롤바 생성 스크롤바를 이용하여 내용을 볼수 있다.

      • auto : 브라우저에 의존하여 유동적으로 보여줌

    • clip 속성 : 요소의 일부를 추출

      • rect : 요소 중심으로 사각형을 이용하여 추출(+요소 안쪽, -요소 바깥쪽)

      • auto : 요소와 같은크기로 지정

    • visibility 속성 : 요소 박스가 보일지 않보일지 지정 역역 x(visible 보이게한다, hidden : 보이지 않게 한다. 레이아웃에 영향을 끼친다)

  • 문자색

    • color 속성 : 텍스트 요소에 색지정

      • 텍스트를 포함하지 않는 요소에 색상 속성 의미 : color 속성의 값을 참조할수 있도록 지정

  • 배경

    • background-color : 요소의 배경에 색, 이미지 지정

      • 배경은 요소가 생성하는 박스의 내용, 패딩, 보더 영역에 적용

      • 마진은 항상 투명

      • 규정값은 transparent 기본설정은 부모 요소의 배경에 비친다

      • 명도차 : 문자색과 배경색 각각의 RGB값을 0-255 10진수로 표기하여 {(R*299)+(G*587)+(B*114)}/1000 계산식으로 계산

      • 색차 : 문자색과 배경색 각각의 RGB값을 0-255 10진수로 표기 하여 (max(R, R)+{max(G, G)-min(G, G)}+max(B, B)-min(B,B))계산식으로 계산

    • background-repeat 속성 : 배경이미지의 반복을 지정

      • repeat : 수직, 수평 반복, repeat-x : 수평방향으로 반복, repeat-y : 수직방향으로 반복, no-repeat : 반복 x

    • background-attachment : 배경이미지 이동, 고정을 지정

      • scroll : 스크롤과 함께 배경이미지 이동

      • fixed : 브라우저 표시영영에 대해서 고정

    • background-position : 배경이미지의 초기 위치를 지정

    • background의 속성들을 일괄 지정할수 있다

  • 글꼴

    • font-family : 글골 패밀리명을 지정하여 대표 패밀리명을 지정한다

      • 글꼴 패밀리 : 굴림, 돋움........etc.

      • 대표 패밀리 : serif, sans-serif, cursive, fantasy, monospace

    • font-variant : 글꼴 변형 속성

      • nomal : 보통 글꼴

      • small-caps : 소문자를 대문자로 변환 폰트의 크기, 자리차지는 그대로

    • font-weight : 글꼴의 굵기 지정 

      • 100~900 : 크기가 클수록 굵게

      • nomal : 400과 같은 굵기

      • bold : 700과 같은 굵기

      • bolder : 상속한 굵기 최대치를 반영

      • lighter : 상속한 굵기 최소치를 반영

    • font-stretch : 글자폭 지정하는 속성

    • font-size : 글꼴의 크기지정

      • 절대단위 지정시 일부 브라우저 사용자가 설정을 변경하여 글꼴 크기를 바꿀수 없어 접근성이 낮아짐

    • font-size-adjust : 글꼴 크기를 조정

  • 텍스트

    • text-indent : 텍스트 최초에 등장하는 행의 들여쓰기 폭을 지정

    • text-align : 텍스트 정령을 지정

      • right, left, center : 오른쪽, 왼쪽, 중앙으로 정렬

      • justify : 텍스트 양끝 정렬, 인라인 박스 자체를 줄이거나 늘어남

    • text-decoration : 텍스트의 장식을 지정(밑줄, 윗선, 취소선)

    • text-shadow : 텍스트 그림자를 넣는다.(색상, 길이 지정)

    • letter-spacing : 텍스트의 문자 간격을 지정

    • word-spacing : 텍스트의 단어 간격을 지정

    • text-transform : 텍스트의 대문자 소문자 변환

      • capitalize : 각단어 첫번째 문자만 대문자로 변환

      • uppercase : 모든 문자를 대문자로 변환

      • lowercase : 모든 문자를 소문자로 변환

    • white-space : 요소 안 공백문자 처리 방법을 지정

      • pre : 연속하는 공백문자 압축을 금지(지정한 공백만큼 보여줌)

      • nomal : 연속하는 공백문자 한개로 압축

      • nowrap : 연속하는 공백문자 한개로 압축,  줄바꿈 없어짐(A로 강제 줄바꿈)

    • table : 블록레벨의 표

    • inline-table : 인라인레벨의 표

    • table-row : tr요소로 행생성

    • table-row-group : 행 그룹으로 만든다(tbody)

    • table-header-group : 요소를 해더 행그룹으로 만든다(thead)

    • table-footer-group : 요소를 풋터 행그룹으로 만든다(tfoot)

    • table-column : 그요소를 열로 만든다(col)

    • table-column-group : 요소를 열 그룹으로 만든다(colgroup)

    • table-cell : 요소를 셀로만든다(td,th)

    • table-caption : 그요소를 캡션으로 만든다(caption)

    • 테이블 시각 정형 모델

___________________

|<캡션요소>           |

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

|<테이블 요소 박스> |

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

  • cation-side : 캡션의 위치를 지정
  • table-layout : 테이블 관련 요소에 레이아웃 방법을 지정한다.
  • border-collapse : 보더 표시모델을 지정

    • separate : 분리 보더 모델을 사용한다 표 전체의 보더와 각셀의 보더가 분리

    • callapse : 결합 보더 모델을 사용 표와 보더가 결합   

    • 결합 보더 모델시 충돌

      • border-style값이 hidden인 경우 우선순위 최상이 된다.

      • border-style값이 none인 보더는 우선순위 최하가 된다.

      •  border-style 값이 hidden이 없는 경우 폭이 넓은 보더가 우선순위가 된다.

      • border-stylle 값이 border-width값이 일치할 경우 셀에 대한 지정이 최우선 된다.

    • border-spacing : 분리모델시 인접할 셀의 보더 공간을 지정

    • empty-cells : 분리 모델시 빈 셀의 보더와 배경표시 방법을 지정(show, hide)

  • 생성내용 : before, after 가상요소를 조합하여 문서안에 임의의 텍스트를 생성하서나 인용부호를 생성

  • 목록

    • list-style-type : 목록의 마커 지정

    • list-style-image : 목록의 마커 이미지 지정

    • list-style-position : 목록 마커 위치를 마커박스를 기본블록 박스의 안쪽(inside), 기본블록박스의 바깥쪽(ouside)

  • @규칙과 미디어 컨트롤

    • media 타입

      • all : 모든미디어, screen(pc디스플레이), print(인쇄 출력), aural(음성출력), handhold(휴대단말기)

    • @import : 외부 스타일 시트 참조시 사용

      • @import url(URL); , @import "URL"

    • @charset : 외부 스타일 시트의 문자코드 세트 지정

      • 외부 스타일 시트 가장 최초에 기술

      • 한개의 외부 스타일 시트에 복수 지정 불가

      • style요소로 문서내에 작성된 스타일 시트에는 지정할수 없다

제 4장 상호작용 -웹사이트를 장식하는 다양한 콘텐츠

  • 폼설치

    • 폼이란?

      • 사용자가 내용을 입력하여 서버안의 프로그램에 데이터를 송신하기 위한 장치이다.

      • 동적으로 문서를 생성/처리한다

    • 폼의 정의

      • atrion="URL" : 해당 URL로 데이터를 메서드 방식으로 전송한다

      • method="메소드" : 폼의 내용을 처리하는 방법(기본 get)

        • get : 데이터를 URL을 통해 전송한다.

        • post : 데이터를 캡슐화를 통해 전송한다.

      • enctype : 파일을 전송할때 사용되는 속성

      • name : 폼을 참소할수 있는 식별자를 사용할때 사용

    • input 요소

      • type속성

        • text : 단일행 텍스트 입력 필드

        • password : text요소랑 같지만 영문 숫자로 한정되며 '*'등으로 내용을 감춰 표시

        • checkbox : 복수 선택이 가능한 입력 박스

        • adio : 단일 선택이 가능한 입력 박스

        • submit : 폼에 저장된 내용을 action에 기입된 url을 통해서 전송

        • reset : 폼의 모든 데이터를 초기화

        • buttom : 버튼요소 스크립트나 프로그램에 임의의 지시를 한다.

        • hidden : 폼에 감춰진 필드로 실제 표시하지 않고 데이터를 전송할때 쓰인다.

          • hiddne필드 사용시 화면에 표시되지 않지만 중요한 데이터를 전송할때는 피하도록한다.

    • textare : 여러줄로 된 텍스트 필드를 생성, 인라인 요소 사용

    • select요소, option 요소

      • 셀렉트메뉴를 생성하는데 인라인 요소인 select, option 요소를 사용한다.

    • label 요소

      • 요소에 대해 접근성을 강화하기 위한태그로 화면에서는 확인이 불가능하지만 요소에 컨트롤과 관련시킬수 있고 동기화가 가능하다

      • 명시적 라벨 부여 : label 속성에 요소의 id값을 for속성이 기입한다.

      • 암묵적 라벨 부여 : 특정 요소를 label로 묶어 요소를 포함하는 방법이다.

        • 복수 라벨을 붙이는 것이 불가능하다.

    • fieldset, legend요소

      • fieldset : 폼안에 복수의 여러 요소를 그룸화하여 폼을 더욱 정밀하게 구조화

      • legent : fieldset으로 그룹화한 것들에 대한 제목

  • 스크립트 삽입

    • 스크립트는 움직임이 있는 쌍방향 콘텐츠를 구현하기 위한 프로그래밍 언어로 주로 클라이언트 내에서 처리된다.

      • java script _: 스크립트언어의 실질적인 표준으로 지금까지 CGI를 사용하지 않으면 불가능한 처리가 java script에 의해 구현됨

      • ECMA script : 유럽 전자계산기 ECMA가 표준화한 java script의 표준규격이다.

      • J script : microsoft사가 독자적으로javascript를 독자 확장시킨 스크립트 언어이다. 때문에 IE이외의 브라우저에서는 안정적인 동작이 보장되지 않는다.

      • VB script _: Visual Basic 의 서브 세트인 스크립트 언어로 IE이외에 브라우저에서는 안정적이지 않다.

      • Tcl : 켈리포니아 버클리대학에서 개발한 스크립트 언어 UNIX환경에서 GUI나 메크로를 동일하게 처리하기 위해 개발   

    • 스크립트 언어 지정

      • meta요소에 스크립트 언어를 지정해줄 필요가있음 (<meta http-equiv="Content-Script-Type" content="text/javascript"/>)

    • 스크립트의 지정 : type(스크립트의 MINE타입을 지정), src(외부 스크립트 URI를 지정), charset(외부 스크립트의 문자코드세트)

    • 스크립트 기입시 <![CDATA[ 자바 스크립트 내용부 ]]>(자바 스크립트 내용부는 일반 charactor 이다.) 지정

      • //<![CDATA[

        • 내용부

      • //]]>

    • noscript요소 : 스크립트 사용할수 없는 환경에서 스크립트 실행이 안될시 대체요소이다. 접근성 향상에 도움이 된다.

    • 이벤트 핸들러

      • onload : 해당 속성 요소가 읽어드린후 이벤트 발생 지정

      • onunload : 해당 속성요소에서 다른 문서로 이동할 때 발생

      • onclick : 입력장치로 버튼 클릭시 발생하는 이벤트 지정

      • onmousedown : 해당 요소에 마우스 커서가 눌렀을때 발생

      • onmouseup : 해당 요소에 마우스 커서가 눌려진상테에서 떠었을때 발생

      • onmouseover : 해당 요소에 마우스 커서가 올려와 있을때 발생

      • onmousemove : 해당요소에 마우스 커서가 움직였을 경우 발생

      • onmouseout : 해당요소에 마우스 커서가 벗어 났을경우 발생

      • onfocus : 해당 요소에 포커스가 활성화 될 경우 발생

      • onblur : 해당 요소에 포커스 비활성화 될 경우 발생

      • onkeypress : 해당요소에 특정 키가 눌렸을 경우 발생

      • onkeydown : 해당요소에 특정 키가 눌려 있을때 발생

      • onkeyup : 해당요소에 특정키가 눌려있다가 떼었을때 발생

      • onsubmit : 폼 범위에서 내용이 송신될을 때 발생

      • onreset : 폼 범위에서 내용이 초기화 됬을때 발생

      • onselect : 텍스트 필드, 텍스트에리어의 텍스트가 선택될때 발생

      • onchange : 폼 컨트롤의 내용이 변경된 뒤 포커스가 해제될 때 발생

      • 이벤트 핸들러 속성 접근성

        • 키보드, 마우스 움직임 대상의 속성을 사용하는 경우 접근성 저하시키지 않기 위해 키보드, 마우스 움직임 대상 속성을 함께지정해준다.

        • ondblclick 속성이나 마우스 커서에 의존하는 속성은 대체 키보드 속성이 없기 때문에 지정을 피한다.

  • 프레임 삽입

    • 프레임은 문서안에 다른 문서를 삽입하는 기능을 한다. (사용을 권장하지 않는다)

    • 프레임을 사용하는 경우 문서정의(DTD)에 Frameset 문서형을 선언한다.(XHTML에서는 사용할수 없다)

    • iframe 요소를 지정하는 경우하면 사용시 title에 제목을 지정해 준다.

    • 다른 문서삽입은 iframe요소 외에 object요소로도 구현이 가능하다.

  • object삽입

    • 오브젝트 요소(인라인 요소이다.)

      • 이미지 : img요소

        • <object data="/images/mg.gif" tyle="image/gif" title="이미지"> 내용부 </object>

      • 다른문서 : iframe

      • object요소의 자식요소에 의한 계층화: object요소에는 자식 요소(object)를 넣을수 있다.

        • 우선된 오브젝트의 순서로 계층적으로 지정이 가능하다.

        • 특정 브라우저나 데이터 형식에 대응하지 않는 브라우저는 대체할수 없다.

        • <object data="/movie/overview.mpg" type="video/mpeg" title="비디오오브젝트">

          • <object data="/image/overview.gif" type="image/gif" title="이미지오브젝트">

          • 내용부.,..

          • </object>

        • </object>

 

 5장 리디자인- 웹표준으로 매끄러운 전환

  • XHTML1.0과 XHTML1.1 의 차이

    • 문서 형식 선언과 차이

      • XHTML 1.0 : html4.01처럼 Strict, Transitional, Frameset 세가지 형식 사용가능

      • XHTML 1.1: Strict에 해당하는 형식만 사용가능

    • html 요소들의 언어코드를 지정하는 방법

      • XHTML 1.0 : lang 속성, xml:lang속성으로 언어코드지장

      • XHTML 1.1 : xml:lang속성으로 만 지정

    • name속성과 id속성을 지정하는 방법의 차이

      • XHTML 1.0 : name속성과 id속성으로 플래그먼트 식별자를 지정

      • XHTML  1.1 : name속성을 폐지되어 id속성만 지정

  • html에서 xhtml으로 전환

    • XML선언

      • XHTML 에서는 문서의 시작에 XML선언을 한다 : <?xml version="1.0" encoding="euc-kr"?>

      • version은 xml버전, encoding 은 문자코드셋

    • XML 네임스페이스, 언어코드

      • XHTML  1.0

      • XHTML 1.1

      • MIME타입

        • XHTML에서는 <meta http-equiv=""/> 지정

        • 서버가 HTTP헤더와 같은 정보를 추가적 또는 우선적으로 출력되도록 지정

        • XHTML1.1에서는 사용을 인정하지 않는다.

      • script, style 요소

        • script, style요소의 내용은 '#CDATA'이며 주석을 처리하지만 XHTML에서의 내용은 '#PCDATA'로 변경 되어있어서 기술해줘야할 필요성이있다.

          • //<![CDATA[

            • 내용부
          • //]]>
      •  요소와 속성은 반드시 소문자로 작성한다

        •  XHTML에서는 대소문자를 구별하고 또한 요소와 속성이 소문자로 정의 되어있기 때문에 소문자로 정의
      • 속성값은 반드시 인용부호로 둘러싼다
      • 빈요소의 시식

        • HTML은 빈요소에 종료태그 필요없이 특별히 기술하지 않앟지만(ex <br>) XHTML에서는 태그 종표를 표시하여야 한다(ex <br/>)
      • 태그는 생략할수 없다 

        • XHTML에서는 시작테그와 종료태그를 반드시 생략없이 기술하여야 한다.
      • 태그는 정형식(well-formed)으로 기술

        • 정형식 : 시작태그와 종료태그의 위치가 엄격하여 XML의 서식에 준거 힌 향ㅅ;ㄱ
      • 속성은 약술할수 없다 (ex) <input type="radio" checked   (x)>)
      • 공백문자는 스페이스, 탭, 라인피드, 캐리지리턴의 네가지 공백문자로 여겨진다
      • name속성과 id속성

        • HTML에서는 각요소에 대하여 name속성과 id속성의 역활을 혼용하였지만 XHTML1.0은 form, img요소의 name속성이 폐지되고 XHTML1.1 a,map요소의 name속성이 페지됨
      • 그 밖에 주요한 차이

        • 속성값의 최초 공백문자와 최후 공백문자는 무시한다 또한 속성값 안에 연속한 두개이상의 공백문자는 하나의 공백문자로 처리
        • a요소에 a요소를 포함할수 없다
        • pre요소에 img, object, big, small, sub, sup각요소를 포함할수 없다
        • button요소에 input, select, textarea, label, button, form, fildset, iframe, isindex의 각요소를 포함할수 없다
        • label요소에 또다른 label요소를 포함할수 없다
        • form요소에 form요소를 포함할수 없다. 
  • XHTML 폐지요소 대체

    • applet요소 -> object요소로 대체
    • basefont요소 -> CSS으의 font-size요소로 대체
    • center요소->인라인요소, 텍스트에 대해서 부모요소인 블록레벨요소에text-align속성에 center로 대체
    • dir요소->ul요소로 대체
    • font요소->CSS의 color, font-size,font-family로 대체
    • menu요소->ul요소로 대체
  • XHTML폐지 속성대체

    • lang속성->xml:lang속성으로 대체(1.0에서는 두가지 속성사용, 1.1에서는 xml:lang속성만사용)


6장 크로스 브라우저 레이아웃-블라우저를 차별하지 않는 레이아웃 기법

  • 브라우저의 구현과 호환성

    • CSS기본 규칙

      • IE 5/5.5/6, 에서 자식 선택자 '>', 인접 선택자'+', 속성선택자 무시

      • IE 5, Opera7 에서 클래스 선택자의 대문자, 소문자는 구별하지 않는다.

      • IE 5, Opera7에서 ID선택자의 대,소문자를 구별하지 않는다.

    • 브라우저의 독자 확장(웹표준을 지키지 않게 구현한 브라우저)

    • 하위호환성과 상위호환성

      • 하위호환성 : 기존, 과거에 만들어진 브라우저들과 자신의 코드가 문제없이 표현되고 동작하는 것

      • 상위호환성 : 앞으로, 미래에 만들어질 브라우저들과 자신의 코드가 문제없이 표현되고 동작하는 것

        • 과도기적 상위호환성

          • 올바른 XHTML을 이용한 마크업을 사용

          • 올바른 CSS를 이용한 폰트/텍스트, 색상, 여백 등의 제어

          • 레이아웃을 구성하기 위해 테이블 요소를 조금만 사용

          • 중첩테이블 x, CSS로 동일한 효과 구햔

        • 엄격한 상위호환성

          • 올바른 XHTML 1.0 Strict나 Transitional마크업 사용

          • 올바른 CSS를 레이아웃에 사용

          • 시각표현에서 구조를 분리

          • 구조의 강조, 시각표현을 위한 기법을 마크업으로 사용하지 않거나 가급적 사용하지 않는다.

  • 문서형식 전환과 표현방식

    • 두종류 표현방식을 가춘 브라우저

      • 표준방식(Standards) : 웹표준을 준수한 표현방식

      • 호환방식(quirks) : 하위호환성을 우선 표현한 방식

    • 세종류 표현방식을 갖춘 브라우저

      • 표준방식(Standards) : 웹표준을 준수한 표현방식

      • 거의표준방식(almost standards) : 기본적으로 웹표준 준수하여 표현하지만 표나 중앙 정렬등 일부의 표현에서는 하위호환성을 유지한 표현방식.

      • 호환방식(quirks) : 하위호환성을 우선 표현한 방식

  • CSS 핵

    • 비표준, 그러나 핵을 통하여 일부의 브라우저를 제외하여 CSS를 적용하는 방법

    • 스타핵 : 선택자 앞에 html을 붙여 IE4-6등 스타일이 적용되고 다른 브라우저에는 적용되지 않음

    • 언더스코어 핵 :속성 가장 앞부분에 언더스코어(_)를 붙인다. IE 4-6등에서 스타일이 적용되고 다른 브라우저에서 적용되지 않음

  • 외부 스타일 시트 만들기

    • 브라우저 초기화 : 선택자 앞에 '*'을 붙여 초기 스타일을 지정 (*{ 속성 변경 })

    • 속성을 지정하는 순서

      • 표현이나 위치등 시각화에 관한 속성

      • 마진이나 패딩, 선 등 박스모델에 관한 속성

      • 배경과 색상에 관한 속성

      • 폰트와 텍스트에 관한 속성

      • 생성내용에 관한 속성 ....순이다.

  • 레이아웃 기법

    • 문서 본체

      • 중앙정렬

        • 블럭요소 : 좌, 우 마진에 auto값을 지정

        • 인라인 요소 : text-align요소에 center값을 지정

    • 이미지 대체기법

      • img요소 사용시 검색이 불가능하고, 유지보수 측면에서 텍스트 보다 효율이 떨어진다.(가급적 이미지요소사용은 피한다.)

      • display를 이용한 이미지 대체기법

        • ex)<div>

          • <p>1/</p>

        • </div>

        • ....div에 이미지를 입히고 p요소는 감춤으로써 CSS적용이되면 이미지를 입힌 div가표현되고 그렇지 않을 경우는 p요소가 표현된다.

      • text-indent속성

        • text-indent속성을 이용하여 로고 표현 영역에 링크를 설정(여백을 줄이기위해 a요소에 block지정, 로고의 폭과길이같게 텍스트 속성없이, 보더 마진, 패딩속성 0으로 지정하면 깔끔한 링크가 표현된 로고를 만들수 있다.)

    • 다단레이아웃

      • float를 이용한 레이아웃 구성

        • 블럭요소에 float속속을 이용하여 레이아웃을 전개하는 방식

        • ex) 중앙정렬된 레이아웃 전개

          • body{

            • text-align : center;

          • }

          • div#header{

            • width : 400px;

            • margin-right : auto;

            • margin-left : auto;

            • }

          • div#footer{

            • clear:both;//플로트 하지않아도 양 옆으로 붙여질 공간이 없기 때문에 아래로 내려간다.

            • width:400px;

            • margin-right : auto;

            • margin-left : auto;

            • }

          • div#conteiner{

            • width : 400px;

            • margin-right : auto;
            • margin-left : auto;
            • }
            • div#content{

              • width:400px;
              • float : right
              • }
            • div#sidebar{

              • width:120px;
              • float:left;
              • }
        • 포지셔닝을 이용한 레이아웃 전개

          • 절대위치와 상대적 위치 조합

            • 하나의 박스요소를 절대위치로 위치시키고 다음 붙여질 요소를 상대적으로 위치시켜 구현
          • 절대적위치와 플로트 조합

            • 하나의 박스요소를 절대위치로 위치시키고 다음 붙여질 요소를 float속성으로 이용하여 원하는 위치에(좌, 우)구현
          • 절대적 위치와 마진조합

            • 하나의 박스요소를 절대위치로 위치시키고 다음 붙여질 요소를 좌, 우 margin속성을 이용하여 위치시킨다.
          • fixed : 비표준이므로 사용을 권장하지 않음


7장 다양한 사용자를 위한 설계

  • 접근성

    • 접근성을 지켜야하는 이유

      • 사회의 모든 영역에서 웹이용자가 급속하게 증가됨에 따라 다양한 사용자 발생
      • 장애있는 사람이 웹이용에 기능적 장벽이나 불편함이 있다.
      • 접근성이 높아지면 장애가 없는 사람의 편의성도 높아짐
    • 보편적 접근

      • W3C에서 보편적 접근 : 웹을  네트워크로 접근 할 수 있는 정보의 보편적 공간이라 정의한다. 오늘날 웹은 인간이 지식을 공유하기 위한 새로운 통신 수단이나 기회를 제공하여 사회에 기여하고 있다. W3C의 주요목표는 하드웨어, 소프트웨어, 네트워크 인프라, 사용언어, 문화, 장소, 신체능력, 지적능력에 상관없이 이러한 이익을 모든 사람이 누릴 수 있게 하는데 있다.
    • 장치 독립성

      • 일부의 입출력 장치에 의존하지 않고 다양한 입출력 장치를 이용해 웹의 정보에 접근, 인식 및 제어한다.
      • W3C워킹 그룹 공표한 자료

        • 장치 독립성 원칙(DIP)-다양한 입출력 장치를 통해서 좀더 좋은 사용자 경험을 실현할 수 있게 웹 콘텐츠나 응용 프로그램을 어떻게 제작하는지를 설명한 자료
        • 장치 독립성 제작 도전 과제(DIAC)-다양한 입출력 창치로부터의 접근을 지원하기 위해 웹 페이지 제작자가 직면한 문제를 컴토한자료로 다양한 능력, 다양한 입출력 창치를 지닌 사용자에 대응해서 콘텐츠나 응용 프로그램으루 제작방법
        • 장치 독립성 제작기법(DIAT)-콘텐츠나 응용 프로그램을 다양한 입출력 장치에 전달하기 위한 기법이나 사례를 설명한 것으로 스타일, 배치,콘텐츠,구조,탐색,응용프로그램의 상호작용의 여섯개 관점으로 설명
    • WAI

      • W3C에서 접근성에 관한 다양한 활동을 하는 조직
      • WCAG1.0 : 1995년 5월에 W3C권고안으로 공표, 접근 가능한 웹사이트를 제작하기 위한 14개의 지침과 65개 체크포인트로 구성
      • ATAG1.0 : 2000년 2월 권고안으로 공표로, 접근 가능한 웹 저작 도구 개발을 위한지침
      • UAAG1.0 : 2002년 12월에 권고안으로 공표, 접근 가능한 웹 표시장치를 개발하기 위한 지침
    • WCAG1.0

      • 열악한 환경에서도 문서가 잘 변환되어 보이게 한다 라는 주제

        • 문서 구조와 시각표현분리
        • 텍스트로 정보를 제공하여 접근성 향상
        • 사용자가 보거나 들을수 없어도 이용할수 있는 문서를 제작 (screen reader)
        • 한 가지 종류의 하드웨어에 종속적인 문서는 제작하지 않는다.
      • 콘텐츠를  이해할수 있고 탐색이 가능하게 한다 하는 주제

        • 페이지 사이를 이동할때 쉬운구조로 작성
        • 네비게이션, 위치정보제공으로 접근성과 편의성 향상
      • 14가지 지침

        • 시각적 청각적인 콘텐츠는 그것을 대신할수 있는 대체 텍스트를 제공

          • 텍스트 이외의 요소에는 반드시 동등한 역활을 수행하는 텍스트를 붙인다.(alt...등등)
          • 프레임 요소에는 내용에 noframes요소를 포함시키고 프레임을 지원하지 않을때 표시될 내용을 지정한다.
          • 서버측 이미지 맵을 사용할 경우 각영역에 충분한 양의 텍스트를 갖는 링크를 넣는다.
          • 웹표시장치가 동영상과 동일한 역활을 수행하는 경우 텍스트를 자동적으로 읽어들일때까지 멀티미디어 영상의 중요한 정보의 음성 설명을 제공한다.
          • 시간의 경과에 근거하는 멀티미디어 표현은 동일한 역활을 수행하는 대체정보(자막 음성)를 그표현에 동기시켜 제공
        • 색깔만으로 정보를 구분하면 안된다.

          • 컬러가 아닌 흑백으로 보았을 때에도 텍스트와 그래픽을 이해할수 있도록한다.
          • 색으로 식별할 수없는 환경에서도 관계나 마크업등으로 이해가 가능하도록한다.
          • 전경색과 배경색의 구성은 흑백화면 이용자에게도 색대비를 해야한다.
        • 마크업과 스타일 시트를 적절히 사용

          • 문서구조를 지정하기 위한 요소로 문서를 적절히 마크업하고 시각표현을 지정하기 위해 요소나 속성이 아닌 스타일 시트로 표현을 제어   
          • 정보제공시 이미지가 아니라 마크업을 사용(이미지는 가능한 텍스트로 대체)
          • 문법에 맞는 문서를 작성
          • 레이아웃이나 표현방식을 조절시 스타일 시트로 이용
          • 마크업, 스타일시트 속성값은 상대 단위로 사용
          • 제목요소는 문서의 구조화를 위해 사용하고 사양에 맞게 사용
          • 목록, 목록항목은 적절히 마크업한다.
          • 인용문은 그것을 나타내는 마크업을 사용한다. 모양조절목적으로 인용문을 사용하지 말것
        • 내용에 쓰인 언어가 무엇인지 명시한다.
        • 문서안의 텍스트나 대체 텍스트의 언어가 바뀌는 부분에서 바뀌는 것을 명시
        • 문서안의 약어등 그 단어가 처음 나올때 본디만을 표시한다,
        • 문서의 주사용언어를 지정(lang, xml:lang 속성)
      • 표는 표를 지원하지 않는 환경에서도 유연하게 변경될수 있게 만든다.

        • 테이터가 들어있는 표에는 제목행과 제목열을 명시한다.
        • 표가 논리적으로 대응하는 제목행 또는 제목열을 갖춘 경우에는 데이터 셀과 헤더 셀을 관련짓는 마크업을 사용한다.(thead,tbody,tfoot....)
        • 테이블을 선형화해서 의미가 통하지 않으면 테이블을 레이아웃 목적으로 사용하지 않는다.
        • 테이블을 레이아웃 목적으로 사용하는 경우 시각적인 꾸밈 목적으로 마크업을 사용하지 않는다
        • 테이블에는 요약을 붙인다.(caption)
        • 해더부분에 셀내용의 약자를 제공
      • 새로운 기숼을 사용한 페이지는 그기술을 지원하지 않는 환경에서도 내용을 보전하면서 표시가 가능하도록한다

        • 스타일 시트없이도 읽을수 있게 구조화한다.
        • 컨텐츠가 변할 경우 대응하는 대체 텍스트도 따라서 변한다.
        • 다른 프로그램 객체를 지원하지 않는 경우에도 페이지의 내용을 이해할수 있도록 해야한다.
        • 다른 프로그램 객체에서 이벤트 핸들러는 이벤트 장치에 독립적으로 사용한다.
        • 동적인 콘텐츠가 접근 가능한지 확인하고 그렇지 않으면 대아적인 제시를 하거나 대안적인 페이지를 제공한다.
      • 시간의 경과와 함께 변화하는 내용은 사용자가 제어할 수 있게 한다.

        • 이동, 점멸,스크롤,자동갱긴등 페이지 정지시 중지할수 있게한다.
        • 화면이 깜박이는 것은 피한다.
        • 장치가 움직임을 중지할수 을때까지 페이지내에서 움직임을 넣는것은 피한다.
        • 페이지 자동갱신을 중지할 경우 정기적으로 자동갱신 하는 페이지는 피한다.
        • 페이지에서 자동 리디렉트를 중지할수 있게 될때까지 자동적으로 다른페이지에 리디렉트하는 마크업은 사용하지 않는다.
      • 별도로 포함된 사용자 인터페이스에 대해서도 직접적인 접근성을 보장한다.

        • 사용자 인터페이스는 입출력 장치에 의존하지 않고 키보드로 조작 가능하며 음성변환이 가능하게 하는등 접근 가능한 디자인 원칙에 따라야한다.
        • 다른 프로그램 객체에 근거하는 컨텐츠는 직접적인 접근성이 있는지 보조기술을 통해 접근할수 있게 호환성을 유지
      • 입출력 장치에 의존하지 않게 디자인한다

        • 다양한 입출력장치를 통해서 페이지 안의 요소를 조작할 수 있게 한다.
        • 이벤트 핸들러는 특정 입출력장치에 의존하지 않도록 사용한다.
        • 링크나 폼 컨트롤, 객체는 문서 전체를 통해 논리적인 탭 이동 순서를 설정한다
      • 잠정적인 접근성 보장 기법을 사용한다

        • 장애인을 위한 보조장치나 오래된 브라우저에서 제대로 작동하게 한다.
        • 웹표시 장치가 새창을 열지 않게 설정할 수 있을 때까지는 사용자에게 알림없이 새창을 열거나 활성화된 현재의 창을 변경하지 않게 한다.
        • 웹표시 장치가 레이블과 폼 컨트롤을 명확하게 짝지을수 있을때 까지는 폼컨트롤과 짝지어지는 모든 레이블을 적절한 위치에 배치한다.
      • W3C의 기술과 지침을 준수한다.

        • 옛기술과 호환성이 문제가 발생한 경우에는 접근 가능한 다른버전의 콘텐츠를 따로 제공해준다.
      • 전후 관계나 위치를 나타내는 정보를 제공한다.

        • 사용자가 복잡한 페이지나 요소를 이해핳 수 있게 전후관계나 위치를 나타내는 정보를 제공한다.
        • 프레임을 구분하고 사이에 탐색이 쉽게 모든프레임에 제목을 붙인다. 그리고 목적, 관계기술한다.
        • 큰 덩어리로 이루어진 정보는 적절히 모듈화하여 표현해준다.
      • 명확한 내비게이션 구조를 제공한다

        • 링크는 목적지를 명확하게 표현하여 준다.
        • 메타데이터를 통해 페이지에 의미적인 정보를 부여한다.
        • 전체사이트의 구성에 관한 정보를 제공한다,
        • 네비게이션의 구조를 강조하고 편리하게 이용할수 있도록 네비게이션바 제공
      • 문서는 간단 명료하게 작성한다

        • 문서를 이해하기 쉽도록 명확하고 단순하게 작성한다.
    • 미국 재활법 508조

      • 웹을 포함한 모든 컨텐츠에 관한 것들의 지침
twitter facebook me2day 요즘
97개(1/5페이지)
소스자료실
번호 제목 글쓴이 조회 날짜
97 [html/css] 배경고정 스크롤 구구 389 2020.03.16 21:28
96 [html/css] 가로 세로 가운데 정렬 구구 1952 2017.04.14 17:54
95 [etc] 유튜브, 네이버 동영상 자동재생 구구 3950 2015.08.26 17:28
94 [html/css] 폰트 글꼴 단위비교 구구 3176 2014.11.20 18:45
93 [html/css] 맵(Map)의 이해 - 이미지맵걸기 사진 첨부파일 구구 5172 2014.11.06 17:05
92 [html/css] Image Sprites 또는 CSS SPRITE 첨부파일 구구 3449 2014.09.18 17:39
91 [etc] 킴스큐 Tip 구구 3621 2014.06.16 11:23
90 [모바일] PC홈페이지 > 모바일홈페이지 연결소스 구구 6363 2013.07.26 14:22
89 [기획] 색체 이미지맵 첨부파일 구구 12832 2013.03.29 13:26
88 [html/css] 검색폼 만들기 개념 사진 첨부파일 구구 5604 2013.03.07 10:28
87 [html/css] 간단한 롤오버 이미지 만들기 사진 첨부파일 구구 8675 2012.12.05 14:59
86 [etc] 저작권 표시방법 4가지 [1] 구구 12540 2012.07.04 10:14
85 [html/css] float 정렬 해제 등~ 코딩관련정보 사진 첨부파일 구구 5012 2012.06.15 13:39
84 [html/css] 플래시 대체 문구 넣기 구구 5307 2012.06.15 13:36
83 [html/css] 메타태그 총정리 구구 6267 2012.06.15 13:35
82 [html/css] 텍스트에 효과를 주자! 구구 5071 2012.06.15 13:34
81 [html/css] 레어어(div)를 투명하게~ (익스,오페라,파이어폭스) 구구 9265 2012.06.15 13:33
80 [html/css] tr 에 스타일 줘서 링크걸기 구구 6205 2012.06.15 13:33
>> [html/css] 웹표준 교과서 요약 (속성) 구구 8896 2012.06.15 13:32
78 [html/css] 텍스트를 들여쓸때! 구구 5532 2012.06.15 13:31