html dyth

, ,<hr>,<address>,
<a>,<img>,<map>,<area>요소

발표자:최용진

요소

· p는 paragraph의 약자로 문단을 의미, 텍스트를 문단으로 정의할 때 사용

· 단락 요소 안에는 a, img 등 인라인 요소와 텍스트만 포함할 수 있으며,
블록요소는 사용할 수 없다.

· 브라우저에서의 문단 구분 및 줄바꿈 역할이라 할 수 있다.

예제

<p요소를 뺀 엔터만 입력했을 때의 결과값>

<p요소를 포함했을 때의 결과값>

요소

· 단락에서 텍스트를 강제로 줄바꿈할 때 „line break‟의 의미인 br 요소를 사용

· 빈 요소이므로 로 쓰는 경우가 있는데,
html이나 html 모두 태그를 닫는게 표준. 다만 dtd선언에 따라
html 은 규칙이 느슨하여 태그를 안닫거나 태그를 닫는 순서가 바뀌어도
문제되지 않지만 xhtml 은 규칙이 엄격하여 태그를 꼭닫아주어야 하고
태그를 닫는 순서도 엄격하게 적용.
(xhtml 의 경우, 이를 어길시 경우에 따라서 레이아웃이 깨지는 현상 발생)

출처 http://naradesign.net/open_content/lecture/wp/#section3

와 요소는?

· p와 br태그는 줄바꿈을 해주는 태그이기 때문에, 문장과 문장 사이의 간격을
넓히기 위해(가독성 문제 등), 또는 p요소를 사용하지 않고 단락처럼 보이도록
br태그를 남용하는 경우가 있는데 문서구조상 견고하지 못할 뿐 아니라 올바른
사용법이 아님.

· p태그는 문단과의 구분을 위한 줄바꿈이고, 앞서 말했듯 br태그는 강제적인
줄바꿈을 의미한다.

와 요소의 예제

<잘못된 예시>

<권장 예시>

<hr>요소

· 수평선으로 표현되어 구분선 역할을 하고, 빈 요소이며, <hr/>로 종료함.

· 논리적인 의미의 구분이라기 보다는 콘텐츠 전후의 내용을 구분할 수 있도록
선으로 나타내는 것이고, 텍스트 브라우저나 CSS가 제공되지 않는 환경에서
콘텐츠의 구조적 구분을 표현할 수 있기 때문에 사용자에게 유용

· width(px과 %), align(left와 right, center), size, color의 속성을 사용 할 수 있음
(하지만 인라인 속성은 쓰지 않는 것이 좋다)

<address>

· 문서의 시작이나 끝에 위치하며, 주로 끝에 위치

· 연락처(이메일 주소 포함)정보를 표시

· 저작권(copyright)는 address 요소가 아님

· 인라인 요소와 텍스트를 포함할 수 있지만 블록 요소는 포함할 수 없음

· dtd 종류에 따라 Transitional의 경우에 인라인 요소나 p요소를 사용할 수
있고, strict 일 경우에는 인라인 요소만 사용가능

· 문서의 제작자 정보 및 연락처의 의미가 아닌 일반 주소나 약도의 주소를
나타낼 때는 사용하지 않는다

<address> 예제

(정부홈페이지, copyright 부분을 분리 로 따로 분리 하였다.)

<a> 요소

· <a>요소는 Anchor를 의미하며 텍스트나 이미지 콘텐츠에 링크를 설정할 때 사용,
target 속성(transitional에는 있지만 strict에서는 target속성이 적용 안됨),
title 속성 등을 사용 할 수 있다.

· 링크가 연결될 경우에는 의미에 맞게 적용하여야 한다.
예) “보다 자세한 사항은 이곳을 클릭해 주세요! (x)
“보다 자세한 사항은 고객센터를 클릭해 주세요!” (o)

· KWCAG 2.0에서는 a 요소를 설정할 때 구체적인 의미(용도와 목적)을 가지는
텍스트를 포함하여 작성하도록 권고(이미지 사용시 대체텍스트 사용)

예시

<a href=“naver.com”><img src=“naver.gif” alt=“네이버” /></a>

<img>

· 텍스트가 아닌 이미지 개체를 삽입 할 때 사용

· img 사용의 경우 src(그림 파일의 주소)와 alt(이미지 설명 텍스트;대체텍스트)
속성은 필수 삽입

· 필요에 따라 align(left, right, center), width와height(만약 이미지가 나오지 않을
경우, 브라우저는 여기서 지정한 만큼의 빈 공간을 만들어 줌), title(이미지
마우스오버 시 텍스트 설명), border(기본값은 0) 등 속성을 적용할 수 있음

· 보통은 width와height 값을 생략하는 경우가 많은데 지정하면 브라우저에서
이미지 렌더링이 좀 더 빠르다고 함

<map>과 <area>

· 이미지 맵은 하나의 그림에 부분적,복수영역에 링크를 걸어서 각각 다른
경로로 링크시키는 것을 의미

· 이미지 맵에서 사용되는 영역(area)을 정의하는 형태(Shape), coords(이미지
내의 링크영역의 좌표값)을 사용

· shape는 rect(사각형),circle(원모양), poly(다각형)을 쓸 수 있다.

<map>과 <area> 예제

Coords는 드림위버를 사용하면 편하다.
(드림위버를 지워버리는 바람에 드림위버
를 이용한 예시는 생략합니다.)

html dyth

Recommended

Recommended

More Related Content

Featured

Featured (20)

html dyth