2011웹표준[05] 실전예제(대체택스트,폼,필드셋)

2011년 02월 15일

[ABYDOS] 웹 표준

(4강) 실전예제-이미지대체텍스트,폼 마크업

1. 이미지 대체 텍스트

목차(INDEX)

2. 폼 마크업

3. Fieldset 그룹핑

4. CSS팁 -클래스통합

ABYDOS Copyright abydos All rights Reserved.

이미지 대체 텍스트

FIR 방법 / LIR 방법 / 파크 방법

<h1 class=‚fir‛><span>FIR 방법</span></h1> .fir span{display:none;} .fir { width:287px; height:29px; Background:url(‘fir.gif’) no-repeat }

단점 : 의미없는 span 태그 사용 이미지표시 기능끄기/CSS기능 활성화 할 경우 안보임 Display:none 속성때문에 스크린리더에서 제대로 읽히지 않는다

1.FIR 방법




<h1 class=‚lir‛>LIR 방법</h1> .Lir { Padding : 90px 0 0 0; Overflow:hidden; Background:url(‘Lir.gif’) no-repeat; Height:0px !important; /*대부분의 웹브라우저를 위한 명령*/ Height /**/:90px; /*윈도우 IE5를 위한 명령*/ }

대부분의 웹브라우저에서 높이를 0 으로 지정하면 텍스트가 표시되지 않는다. 단점 : IE5 를 위해 hack 을 써야 한다. 이미지표시 기능끄기/CSS기능 활성화 할 경우 안보임

2.LIR 방법




<h1 class=‚park‛>Park 방법</h1> .park { Height:26px; Text-indent:-5000px; Background:url(‘Lir.gif’) no-repeat; }

스크린 리더에서는 텍스트를 제대로 들을 수 있다. 단점: 이미지끄고/css 활성화시 안보인다.

3.파크 방법


폼 마크업

테이블 이용 / 테이블 미사용 / 접근성을 높인 방법 / 정의리스트 활용하기

<form> <table border="1"> <tr> <th>아이디 : </th> <td><input type="text" name="name"/></td> </tr> <tr> <th>비밀번호 : </th> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" value="로그인"></td> </tr> </table> </form>

의미없는 마크업과 태그남발

1.테이블 이용


폼 마크업


<form> <p> 아이디 : <input type="text" name="name"/><br /> 비밀번호 : <input type="password" name="password"><br /> <input type="submit" value="로그인"> </p> </form>

의미있는 마크업이 아니다.

2.테이블 미사용


폼 마크업


<form> <p> <label for="name">아이디 : </label> <input type="text" name="name"/> </p> <p> <label for="password">비밀번호 : </label> <input type="password" name="password"> </p> <input type="submit" value="로그인"> </form>

• Label 을 사용함으로써 레이아웃의 위치와 상관없이 각 폼컨트롤의 레이블과 연결 (for~id)

• Label 태그는 form의 레이블을 마크업하기위한 목적으로 만들어진 태그 • 선택영역확장기능

3.접근성을 높인 방법


폼 마크업


<form> <dl> <dt><label for="name">아이디 : </dt> <dd><input type="text" name="name"/><dd> <dt><label for="password">비밀번호 : </label></dt> <dd><input type="password" name="password"></dd> <dd><input type="checkbox" id="check"><label for="check">ID 저장하기</label></dd> <dt><input type="submit" value="로그인"></dt> </dl> </form>

• 정의 리스트를 이용하여 레이블과 폼컨트롤 쌍을 정의하여 시멘틱한 마크업 • <p>나 <br /> 태그없이 들여쓰기가능

4.정의 리스트 활용


Fieldset로 폼 요소 묶기

Fieldset를 사용해 그룹핑/ legend를 이용 네이밍

<form class="design"> <fieldset> <legend>로그인하기</legend> <dl> <dt><label for="name">아이디 : </dt> <dd><input type="text" name="name"/><dd> <dt><label for="password">비밀번호 : </label></dt> <dd><input type="password" name="password"></dd> <dd><input type="checkbox" id="check2"><label for="check2">ID 저장하기</label></dd> </dl> <p><span><input type="submit" value="로그인"></span></p> </fieldset> </form>

• Border:0; display:none; 속성으로 안보이게 할 수 있다.


CSS-Tip(class 통합)

여러 개의 css를 적용할 수 있다.

보통 class는 한번에 하나를 지정해야할것 같지만 사실은 원하는 만큼 지정할 수 있다. Space로 분리해주면 두 class가 동시에 적용된다. 만약 속성이 중복되면 나중에 위치한 css가 이젂 규정을 대싞한다.

.red{color:red} .size20{font-size:20px} .bold{font-weight:bold} <div class="red size20 bold">두가지 스타일 적용하기</div>

감사합니다. ABYDOS


과제

1. 현재 진행중인 프로젝트

‘용식이v1.0’의 로그인폼을 디자인 해 본다.

2. 이미지 대체 텍스트를 이용하여 실습해보기.

2011웹표준[05] 실전예제(대체택스트,폼,필드셋)

Documents