1. <p>,<br>,<hr>,<address>,
<a>,<img>,<map>,<area>요소
발표자:최용진

2. <p>요소
· p는 paragraph의 약자로 문단을 의미, 텍스트를 문단으로 정의할 때 사용
· 단락 요소 안에는 a, img 등 인라인 요소와 텍스트만 포함할 수 있으며,
블록요소는 사용할 수 없다.
· 브라우저에서의 문단 구분 및 줄바꿈 역할이라 할 수 있다.

3. 예제
<p요소를 뺀 엔터만 입력했을 때의 결과값>
<p요소를 포함했을 때의 결과값>

4. <br>요소
· 단락에서 텍스트를 강제로 줄바꿈할 때 „line break‟의 의미인 br 요소를 사용
· 빈 요소이므로 <br>로 쓰는 경우가 있는데,
html이나 html 모두 태그를 닫는게 표준. 다만 dtd선언에 따라
html 은 규칙이 느슨하여 태그를 안닫거나 태그를 닫는 순서가 바뀌어도
문제되지 않지만 xhtml 은 규칙이 엄격하여 태그를 꼭닫아주어야 하고
태그를 닫는 순서도 엄격하게 적용.
(xhtml 의 경우, 이를 어길시 경우에 따라서 레이아웃이 깨지는 현상 발생)
출처 http://naradesign.net/open_content/lecture/wp/#section3

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

6. <p>와 <br>요소의 예제
<잘못된 예시>
<권장 예시>

7. <hr>요소
· 수평선으로 표현되어 구분선 역할을 하고, 빈 요소이며, <hr/>로 종료함.
· 논리적인 의미의 구분이라기 보다는 콘텐츠 전후의 내용을 구분할 수 있도록
선으로 나타내는 것이고, 텍스트 브라우저나 CSS가 제공되지 않는 환경에서
콘텐츠의 구조적 구분을 표현할 수 있기 때문에 사용자에게 유용
· width(px과 %), align(left와 right, center), size, color의 속성을 사용 할 수 있음
(하지만 인라인 속성은 쓰지 않는 것이 좋다)

8. <hr>예제

9. <address>
· 문서의 시작이나 끝에 위치하며, 주로 끝에 위치
· 연락처(이메일 주소 포함)정보를 표시
· 저작권(copyright)는 address 요소가 아님
· 인라인 요소와 텍스트를 포함할 수 있지만 블록 요소는 포함할 수 없음
· dtd 종류에 따라 Transitional의 경우에 인라인 요소나 p요소를 사용할 수
있고, strict 일 경우에는 인라인 요소만 사용가능
· 문서의 제작자 정보 및 연락처의 의미가 아닌 일반 주소나 약도의 주소를
나타낼 때는 사용하지 않는다

10. <address> 예제
(정부홈페이지, copyright 부분을 분리 <p>로 따로 분리 하였다.)

11. <a> 요소
· <a>요소는 Anchor를 의미하며 텍스트나 이미지 콘텐츠에 링크를 설정할 때 사용,
target 속성(transitional에는 있지만 strict에서는 target속성이 적용 안됨),
title 속성 등을 사용 할 수 있다.
· 링크가 연결될 경우에는 의미에 맞게 적용하여야 한다.
예) “보다 자세한 사항은 이곳을 클릭해 주세요! (x)
“보다 자세한 사항은 고객센터를 클릭해 주세요!” (o)
· KWCAG 2.0에서는 a 요소를 설정할 때 구체적인 의미(용도와 목적)을 가지는
텍스트를 포함하여 작성하도록 권고(이미지 사용시 대체텍스트 사용)
예시
<a href=“naver.com”><img src=“naver.gif” alt=“네이버” /></a>

12. <img>
· 텍스트가 아닌 이미지 개체를 삽입 할 때 사용
· img 사용의 경우 src(그림 파일의 주소)와 alt(이미지 설명 텍스트;대체텍스트)
속성은 필수 삽입
· 필요에 따라 align(left, right, center), width와height(만약 이미지가 나오지 않을
경우, 브라우저는 여기서 지정한 만큼의 빈 공간을 만들어 줌), title(이미지
마우스오버 시 텍스트 설명), border(기본값은 0) 등 속성을 적용할 수 있음
· 보통은 width와height 값을 생략하는 경우가 많은데 지정하면 브라우저에서
이미지 렌더링이 좀 더 빠르다고 함

13. <img> 예제

14. <map>과 <area>
· 이미지 맵은 하나의 그림에 부분적,복수영역에 링크를 걸어서 각각 다른
경로로 링크시키는 것을 의미
· 이미지 맵에서 사용되는 영역(area)을 정의하는 형태(Shape), coords(이미지
내의 링크영역의 좌표값)을 사용
· shape는 rect(사각형),circle(원모양), poly(다각형)을 쓸 수 있다.

15. Coords 좌표 설정

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

17. 감사합니다