1. - 1 -
2019학년도 1학기 과제물시험 (중간)
❍ 교과목명 : HTML 웹프로그래밍
❍ 학 번 : 201934-363698
❍ 성 명 : 이상호
❍ 연 락 처 : 010-4078-7412
l 과 제 명 : HTML 5.2 표준안 (https://www.w3.org/TR/html5/)에서 지원하는 태그(요소) 중에서 교
재 1장~6장에서 다루지 않은 것들을 모두 찾아서 다음 조건을 만족하도록 정리하시오.
Ÿ 교재에서 다룬 태그의 경우에는 교재의 각 장의 주요 용어를 참조한다.
※ 교재의 주요 용어 부분에서 언급된 태그와 그것의 하위 태그, 그리고 HTML5에서 더 이상 지원되
지 않는 태그의 경우에는 정리 대상에서 제외한다.
Ÿ 태그는 알파벳순으로 각각 번호를 매겨서 정리한다. 각 태그의 설명에는 태그의 기능, 주요 속성, 그
리고 간단한 활용 예시를 반드시 포함해야 한다.
※ 태그의 속성이 없는 경우에는 속성 설명은 생략 가능하며, 해당 태그(속성 포함)의 사용 방법을
간단히 설명하는 수준의 예시를 작성한다.
※ 태그의 속성 설명에서 전역 속성은 포함하지 않는다.
Ÿ <과제 작성시 지시사항>을 반드시 따라야 한다.
< 목 차 >
I. HTML 태그 ·················································································································· 2
II. 참고문헌 ······················································································································ 7
2. - 2 -
I. HTML 태그
1. 이미지 맵의 링크 영역을 설정하는 <area> 태그
- <area> 요소는 이미지 맵의 링크 영역을 설정하고 일반적으로 <map> 요소에서 사용한다.
- 해당 요소의 속성은 shape, coords, href, alt, rel, download으로 구성된다. 즉 shape은 영역의 모양으로
서 rect (사각형 초기값), circle (원), poly (다각형), default (전체 이미지)이고 coords은 영역의 모양에
따라 좌표를 지정하는 방법이 다르다 (rect: 좌측 하단과 우측 하단 좌표; circle: 중심점의 좌표와 반
경; poly: 모든 모서리의 좌표, default: 지정 불가). href와 alt 및 rel 그리고 download는 각각 URL 링
크, 맵이 없을 경우 대체 텍스트, 공백 구분, 다운로드 링크 지정할 수 있다.
- <area shape="rect" coords="50,50,150,150" href="map1.html" alt="사각형">
- <area shape="circle" coords="250,100,50" href="map2.html" alt="원">
- <area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="다각형">
- <area shape="default" href="map4.html" alt="전체 이미지">
2. 완성된 구성을 나타내는 <article> 태그
- <artcle> 요소는 하나의 독립적인 기사를 나타낸다. 예를 들면 포럼의 게시판 게시글, 신문 기사, 블
로그 기사, 댓글 등이 있다. 또한 해당 요소를 중첩 배치하면 기사에 대한 사용자 의견을 표시하고
<address> 요소를 사용하면 해당 기사에 대한 연락처를 표시할 수 있다.
- <article>기사</article>
- <article><address>이메일 주소<br>sangho.lee.1990@gmail.com</address></article>
3. 추가적인 구성을 나타내는 <aside> 태그
- <aside> 요소는 본문과 관계가 있으나 본론에서 벗어난 내용을 나타내는 데 사용한다. 예를 들어 추
가 정보 (본문을 보충하는 기사/정보), 여담 (본론에서 벗어난 정보), 용어 설명 (본문 중의 용어에 대
한 설명)뿐만 아니라 윙 배너 및 광고 분야에서도 사용한다.
- <aside>여담</aside>
- <aside><nav><li>HTML5</li><li>CSS</li></nav></aside>
4. 고립된 텍스트를 나타내는 <bdi> 태그
- <bdi> 요소는 고립된 텍스트를 나타내고 이러한 텍스트는 주위의 글씨 방향에 영향을 미치지 않는
다. 또한 해당 요소는 글씨 방향이 혼재하는 곳에서 사용할 수 있다.
- <li>사용자 : 2019-04-21</li>
- <li><bdi>사용자</bdi> : 2019-04-21</li>
5. 글자 방향을 지정하는 <bdo> 태그
- <bdo> 요소는 텍스트의 글씨 방향을 지정하고 양방향 알고리즘을 재정의할 경우에 사용한다. 예를
들어 언어의 부분에 한국어, 영어, 아랍어의 이름을 기술한다. 즉 한국어와 영어의 경우는 관계없으
나 오른쪽에서 왼쪽으로 표기하는 아랍어에서는 양방향 알고리즘의 영향으로 인해 다르게 위치된
다.
- <li>사용자 Eric : 2019-04-21</li>
- <li>사용자 أَسْعَد : 2019-04-21</li>
- <li>사용자 Eric : 2019-04-21</li>
- <li>사용자 أَسْعَد <bdo dir="ltr">:
2019-04-21</bdo></li>
6. 스크립트 사용하여 그래픽을 그리는 <canvas> 태그
- <canvas> 요소는 그래픽을 그리기 위한 공간을 생성하고 게임 등의 동적 그래픽으로 랜더링을 할 수
있다.
- 해당 요소의 속성은 width, height로 구성된다. 즉 width은 영역의 폭 (기본값: 300 px)을 나타내고
3. - 3 -
height은 영역의 높이 (기본값: 150 px)를 지정한다.
- <canvas width="300" height="150"><p>그래픽</p></canvas>
7. 삭제된 부분을 나타내는 <del> 태그
- <del> 요소는 취소선과 같이 삭제된 부분을 나타낼 때 사용한다.
- 해당 요소의 속성은 cite, datetime로 구성된다. 즉 cite는 변경을 설명하는 문서가 있는 경우에 해당
URL을 지정한다. 이러한 속성은 해당 문서의 어떤 부분이 변경에 대한 설명을 알 수 있다. 그리고
datetime는 YYYY-MM-DDhh:mm:ssTZD 형식으로 수정한 날짜와 시간을 나타낸다.
- <del cite="https://www.google.co.kr" datetime="2019-04-21">취소선</del>
8. 요청에 따라 정보를 제공하는 <details> 태그
- <details> 요소는 사용자 요청에 따라 추가 정보를 나타낸다. 해당 요소의 자식 요소로 <summary> 요
소를 이용하면 그 정보의 캡션 등을 표시할 수 있다.
- 해당 요소의 open 속성은 정보가 표시된 상태를 지정한다 (기본값: 비표시).
- <details open><summary>요약</summary></details>
9. 그림의 범례를 정의하는 <figcaption> 태그
- <figcaption> 요소는 참조되는 그림의 범례 (제목 및 설명)을 나타내고 <figure> 요소의 시작 또는 끝
중 하나만 위치할 수 있다.
- <figure><figcaption>그림 범례</figcaption></figure>
10. 그림을 나타내는 <figure> 태그
- <figure> 요소는 본문에서 참조되는 그림 (삽화, 도표, 사진, 소스 코드 등)을 나타낸다 (기본값: 상하
좌우 여백).
- <figure><p><img src="" alt="이미지"></p></figure>
11. 꼬리말을 나타내는 <footer> 태그
- <footer> 요소는 문서 또는 문서 내 꼬리말로서 섹션 (또는 전체 문서)에 대한 정보를 나타낸다. 예를
들면 저작자, 연락처, 저작권, 발행 일자 (문서 및 기사 발행 일자), 관련 문서에 대한 링크, 돌아가기
링크 (이전 페이지 맨위)와 같이 위치한다. 또한 <artcle> 요소의 자식 요소로 위치한 경우 해당 기사
에 대한 꼬리말을 나타낸다.
- <article><footer>꼬리말</footer></article>
12. 프레임의 경계를 지우는 <frameset> 태그
- <frameset> 요소에 지정하면 프레임의 경계를 지울 수 있다.
- 해당 요소의 frameborder 속성은 브라우저에 따른 다른 차이를 나타낸다. 즉 IE의 경우 2 px 정보 공
간이 생기나 Firefox에서는 공간이 없다.
- <frameset frameborder="0"></frameset>
13. 헤더를 나타내는 <header> 태그
- <header>은 문서 또는 섹션의 헤더로서 섹션 (또는 전체 문서)에 대한 소개 및 탐색에 도움이 되는
내용을 나타낸다. 예를 들면 제목 (페이지의 제목 섹션 머리글), 링크 메뉴 (글로벌 내비게이션 페이
지에 링크 메뉴, 보조 링크 메뉴), 서론, 발행 일자 (문서 및 기사 발행 일자), 검색 양식 (사이트 내
검색, 상품 검색), 관련 로고 (사이트 또는 회사 로고)와 같이 위치한다.
- <header>헤더</header>
14. 인라인 프레임을 생성하는 <iframe> 태그
- <iframe>요소는 인라인 프레임 (중첩된 브라우징 컨텍스트)을 나타낸다.
- 해당 요소의 속성은 width, height, name, sandbox, src, srcdoc으로 구성된다. 즉 width, height, name은
각각 프레임의 폭, 높이, 이름을 나타내고 sandbox, src, srcdoc은 특정 키워드를 지정, 문서 지정 URL,
4. - 4 -
HTML 코드를 지정한다. 특히 src와 srcdoc이 동시에 지정된 경우 srcdoc이 우선시 된다.
- <iframe src="https://www.google.co.kr"></iframe>
15. 이미지를 볼 수 있는 <img> 태그
- <img> 요소는 이미지를 문서에 포함한다.
- 해당 요소의 속성은 src, alt, width, height, usemap, ismap, crossorigin으로 구성된다. 즉 src, alt은 각각
삽입 이미지 URL와 이미지가 없을 경우 대체 텍스트를 지정하고 width, height은 이미지의 폭과 높이
를 나타낸다. 또한 usemap은 클라이언트측 이미지 맵의 이름이고 ismap은 서버측 이미지 맵을 의미
한다. 그리고 crossorigin은 CORS (Cross-Origin Resource Sharing) 방식을 이용하여 다른 도메인의 리
소스에 액세스 할 때의 취급을 지정한다. 일반적으로 기본값은 anonymous 속성 자체가 생략된 경우
CORS를 사용하지 않고 액세스한다.
- <img src="http://tourdb.gwd.go.kr/img/512/additional/2016/12/13/AAO10001_I_10.JPG" alt="정동심곡바다
부채길 10" width="300" height="300">
16. 추가된 부분을 나타내는 <ins> 태그
- <ins> 요소는 추후에 추가된 내용을 명시할 때 사용한다.
- 해당 요소의 속성은 cite, datetime으로 구성된다. 즉 cite은 변경을 설명하는 문서가 있는 경우에 해당
URL을 지정하고 datetime은 글로벌 변경 시간을 지정하는 데 사용한다.
- <ins>추가된 부분</ins>
17. 그룹에 자막을 넣는 <legend> 태그
- <legend> 요소는 부품 그룹의 캡션 (제목 및 설명)를 나타내고 <fieldset> 요소에서 사용한다. 일반적
으로 브라우저에서는 <legend> 요소의 텍스트가 좌측 상단에 표시된다.
- <fieldset><legend>자막</legend></fieldset>
18. 다른 문서와의 관계를 나타내는 <link> 태그
- <link> 요소는 문서 전체를 다른 문서와 연결하고 <head> 요소에서 사용한다. 또한 현재 문서에서 이
전 페이지, 다음 페이지, 목차 페이지 등을 나타내거나 외부 스타일 시트를 참조할 수 있다.
- 해당 요소의 속성은 rel, href, hreflang, type, media, sizes, crossorigin, rev로 구성된다. 즉 rel, href는 필
수 속성으로서 각각 현재 문서에서 대상의 관계 그리고 대상 지정 URL를 의미한다. 또한 hreflang는
언어 코드이고 type은 링크된 MIME 타입이고 media는 대상으로 하는 미디어를 의미한다. 그리고
sizes는 아이콘의 크기이고 crossorigin는 앞서 <img> 태그에서 설명한 바와 동일하다. 그 밖에 rev는
링크에서 현재 문서와의 관계를 나타낸다.
- <link rel="alternate" href="english.html" hreflang="en" title="English">
19. 이미지 맵을 생성하는 <map> 태그
- <map> 요소는 클라이언트 측 이미지 맵을 정의한다.
- 해당 요소의 name 속성은 필수 속성으로서 이미지 맵의 이름을 지정한다. 또한 동시에 id 속성을 지
정한 경우 name과 id 속성의 값은 일치해야 한다.
- <map name="map"><area shape="rect" coords="0,0,149,30" href="https://www.google.co.kr" alt="사각형
"></map>
20. 팝업 메뉴를 나타내는 <menu> 태그
- <menu> 요소는 사용자의 조작에 나타나는 팝업 메뉴를 나타내고
- 해당 요소의 속성은 type, label로 구성된다. 즉 type은 명령 목록의 유형을 지정하고 label은 하위 메
뉴의 레이블을 지정한다.
- <p contextmenu="example">메뉴</p>
- <menu type="context" id="example"><menuitem label="A"><menuitem label="B"><menuitem
label="C"></menu>
5. - 5 -
21. 팝업 메뉴의 항목을 나타내는 <menuitem> 태그
- <menuitem> 요소는 팝업 메뉴의 항목을 나타낸다
- 해당 요소의 속성은 type, label, icon, radiogroup로 구성된다. 즉 type은 메뉴 항목의 유형으로서
command (일반 명령), radio (라디오 버튼), checkbox (콤보 박스)를 가지고 label은 메뉴 항목의 레이
블을 지정한다. 또한 icon은 메뉴 항목의 아이콘이고 radiogroup은 라디오 버튼 형식의 그룹 이름을
지정한다.
- 예제는 <menu> 태그 참조
22. 문서에 대한 다양한 메타 데이터를 나타내는 <meta> 태그
- <meta> 요소는 다른 메타 데이터 내용 (title, base, link, style, script 요소)와 달리 다양한 메타 데이터
를 나타내고 일반적으로 <head> 요소에서 사용한다.
- 해당 요소의 속성은 charset, http-equiv, name, content로 구성된다. 즉 charset, http-equiv, name은 각각
문서의 문자 인코딩 및 지시의 종류 그리고 문서 정보의 종류를 지정한다. 또한 content는 지시 또는
문서 정보의 내용을 지정한다.
23. 특정 범위 내의 수량 및 비율을 나타내는 <meter> 태그
- <meter> 요소는 특정한 범위 내의 수량 및 비율을 보여줌으로써 전체의 총량이 확정된 경우에 사용
한다. 예를 들면 100점 만점에 70점을 획득한 것을 나타낼 때 사용한다.
- 해당 요소의 속성은 value, min, max, low, high, optimum으로 구성된다. 즉 value는 필수 속성으로서
min과 max의 속성값 사이를 의미한다. 그리고 min, max, low, high, optimum은 각각 최소값 (기본값:
0), 최대값 (기본값: 1), 낮은 영역의 상한값, 높은 영역의 하한값, 최적값을 의미한다.
- <meter value="70" min="0" max="300"></meter>
- <p>최적값<meter value="85" high="80" max="100" optimum="100"></meter></p>
24. 네비게이션을 나타내는 <nav> 태그
- <nav> 요소는 사이트 또는 페이지의 이동에 필요한 주요 링크 메뉴 섹션으로 다른 링크 메뉴와 네비
게이션을 구별하기 위해 사용한다. 예를 들면 글로벌 네비게이션 (주로 헤더와 사이드 바에 배치되
는 링크 메뉴), 빵 부스러기 (계층 구조를 나타내는 링크 메뉴). 페이저 (페이징 링크 메뉴), 페이지
링크 (각 섹션으로 이동하는 링크 메뉴)과 같이 배치하나 그 이외 링크 메뉴 (약관 및 저작권 페이지
링크, 외부 사이트로의 링크)에는 적절치 않다.
- <nav><ul><li>사과</li></ul></nav>
25. 프레임의 대체 내용을 표시하는 <noframes> 태그
- <noframes> 요소는 사용할 수 없는 브라우저에 대한 대체가 되는 내용을 제공하고 <frameset> 요소에
위치한다.
- <noframes><body><p>프레임 대체 내용 </p></body></noframes>
26. 브라우저가 스크립팅을 지원하지 않을 시 대체 표시하는 <noscript> 태그
- <noscript> 요소는 스크립트를 사용할 수 없는 환경에 대한 내용을 나타내고 <head>와 <body> 요소
의 어디든지 위치할 수 있다.
- <noscript>스크립팅 대체</noscript>
27. 외부 리소스를 포함하는 <object> 태그
- <object> 요소는 다양한 형식의 콘텐츠 (이미지, 오디오, 비디오, HTML 문서, Java 애플릿 등)을 문서
에 포함한다.
- 해당 요소의 속성은 data, type, width, height, name, usemap, typemustmatch, form으로 구성된다. 즉
data, type은 필수 속성으로서 콘텐츠의 URL 및 MIME 타입을 지정한다. 그리고 width, height, name
은 각각 콘텐츠의 폭, 높이, 영역 이름을 나타낸다. 그 밖에 usemap, typemustmatch, form은 클라이언
트측 이미지 맵, MIME 타입의 일치 여부, form 양식을 의미한다.
- <object type="application/pdf" data="/media/examples/In-CC0.pdf" width="250" height="200"></object>
6. - 6 -
28. 계산 결과를 나타내는 <output> 태그
- <output> 요소는 계산 결과를 표시할 때 사용한다.
- 해당 요소의 속성은 name, for, form으로 구성된다. 즉 name은 출력 필드를 식별하기 위해 이름을 지
정하고 for 속성은 계산의 대상이 되는 폼 부품을 나타낸다. 그리고 form은 출력 열을 어떤 form 요
소에 연관 여부를 지정한다.
- <form onsubmit="return false" id="example" oninput="result.value = Number(a.value) +
Number(b.value);">
- <p><input type="number" name="a" value="0"> + <input type="number" name="b" value="0"></p>
- </form>
- <p>합계 ：<output name="result" form="example">10</output></p>
29. 매개 변수를 정의하는 <param> 태그
- <param> 요소는 플러그인에 전달할 매개 변수을 지정하고 <object> 요소의 자식 요소로 사용된다.
- 해당 요소의 속성은 name, value로 구성된다. 즉 name, value는 필수 속성으로서 각각 매개 변수의 이
름과 값을 지정한다.
- <object data="example.swf" type="application/x-shockwave-flash" width="300" height="150"><param
name="movie" value="example.swf">
- <param name="quality" value="high"><param name="bgcolor" value="#ffffff">
- </object>
30. 작업의 진척 상황을 나타내는 <progress> 태그
- <progress> 요소는 실시간 작업의 진행 상황을 나타내고 이 요소를 스크립트와 결합할 경우 실시간
표시될 뿐만 아니라 여러 페이지로 구성된 양식 등에서도 현 상황을 전해준다.
- 해당 요소의 속성은 value, max로 구성된다. 즉 value는 현재의 진행 상황을 0 이상의 수치로 지정하
고 max는 기본값 1로서 전체 작업량을 0보다 큰 수치로 지정한다.
- <progress value="0.5"></progress>
- <progress value="50" max="100">50%</progress>
31. Ruby 텍스트를 괄호로 묶어주는 <rp> 태그
- <rp> 요소는 Ruby Text의 약자로서 Ruby 주석을 지원하지 않는 브라우저에 대해 대체 괄호를 제공
하고 해당 요소의 자식 요소로 사용된다.
- <ruby><rp>(</rp>괄호<rp></rp></ruby>
32. Ruby 텍스트를 나타내는 <rt> 태그
- <rt> 요소는 Ruby Text의 약자로서 Ruby 텍스트를 나타내고 <rtc> 요소의 자식 요소로 사용된다.
- <ruby><rt>글자</rt></ruby>
33. Ruby를 할 때 사용하는 <ruby> 태그
- <ruby> 요소는 텍스트의 범위를 나타낸다.
34. JavaScript를 포함하는 <script> 태그
- <script> 요소는 문서에 스크립트 (주로 JavaScript)를 포함하고 <head>와 <body> 요소의 어디든지 위
치할 수 있다.
- 해당 요소의 속성은 src, type, crossorigin, nonce, charset, async, defer로 구성된다. 즉 src, type은 각각
외부 스크립트의 파일 경로 및 MIME 타입을 지정한다. 그리고 crossorigin는 앞서 <img> 태그에서
설명한 바와 동일하고 nonce은 콘텐츠 보안 정책에서 사용되는 암호화이다. 그 밖에 charset는 외부
스크립트의 인코딩이고 async는 사용 가능한 시점에서 실행이고 defer은 읽기 완료 후에 실행을 의미
한다.
- <script src="example.js" charset="UTF-8"></script>
7. - 7 -
35. 일반 섹션을 나타내는 <section> 태그
- <section> 요소는 일반 섹션으로서 단위 범위를 지닌다. 예를 들면 1개 기사에서 여러 항목이 있을
경우 사용한다. 또한 해당 요소를 중첩하여 장 섹션의 절 부분을 나타낼 수도 있다.
- <section><h3>섹션</h3></section>
36. 스타일 시트를 지정하는 <style> 태그
- <style> 요소는 문서에 스타일 시트를 설명하고 <head> 요소에서 사용한다. 또한 이 요소는 문서 단
위로 스타일을 적용할 때 사용하고 사이트 전체에 적용할 경우 <link> 요소로 설정하는 것이 효율적
이다.
- 해당 요소의 속성은 type, media, nonce로 구성된다. 즉 type은 스타일 시트의 MIME 타입이고 media
는 대상으로 하는 미디어를 지정한다. 또한 nonce는 콘텐츠 보안 정책에서 사용하는 암호화를 의미
한다.
- <style type="text/css">h1 { color: #ff0000; } p { line-height: 140%; }</style>
37. 자세한 정보 캡션이나 요약을 나타내는 <summary> 태그
- <summary> 요소는 정보의 캡션, 요약, 설명을 나타냄으로써 <details> 요소의 첫 번째 자식 요소로
사용한다. 또한 지원하는 브라우저에서는 summary 요소의 텍스트를 클릭하면 자세한 정보 표시/비
표시를 전환할 수 있다.
- <details><summary>요약</summary></details>
38. 테이블 행을 그룹화 (꼬리말 부분)하는 <tfoot> 태그
- <tfoot> 요소는 테이블 꼬리말 부분이 되는 행의 그룹을 나타내고 <label> 요소의 다음 위치에 위치
한다.
- <tfoot><tr><td>테이블 꼬리말</td></tr></tfoot>
39. 날짜와 시간을 나타내는 <time> 태그
- <time> 요소는 정확한 날짜와 시간을 나타낸다.
- 해당 요소의 datetime 속성은 YYYY-MM-DDThh:mm:ssTZD 형식으로 날짜와 시간을 지정한다.
- <time>2019-04-21</time>
40. 문서의 제목을 나타내는 <title> 태그
- <title> 요소는 문서의 제목으로서 <head> 요소에서 사용한다. 예를 들면 다음과 같은 용도로 사용된
다. 브라우저의 제목 표시 줄과 탭 표시 줄에 표시, 문서를 즐겨 찾기에 등록, 검색 엔진의 검색 결과
화면에 표시, 검색 엔진의 검색 키워드 시 사용된다.
- <title>제목</title>
II. 참고문헌
1. TAG index. (2012). “HTML5”, https://www.tagindex.com/html5 (accessed April 21, 2019).
2. MDN web docs. (2015). “개발자를 위한 웹 기술”, https://developer.mozilla.org/ko/docs/Web (accessed
April 21, 2019).
