HTML5 07 추가 태그

HTML5 07 추가 태그

폼, 텍스트, 콘텐츠 그룹화 태그

1. 폼 태그(Form Tag)

폼, 텍스트, 콘텐츠 그룹화 태그

HTML5가 등장하면서 새로운 태그들이 추가 되었습니다. 그럼 새로운 태그들이 추가 되어서 문서의 구조가 복잡해졌을까요? 아닙니다. 오히려 새로운 태그들이 등장하면서 사용자가 프로그램 코드를 작성하기가 더 편리해졌고, 문서의 구조도 기존과는 큰 차이가 없습니다.

HTML5에서 추가되어 더욱 편리해진 태그들을 유형별로 나누어 살펴보면 이해하는데 도움이 될 것입니다. 그래서 추가 태그(1)에서는 폼 태그와 텍스트 태그, 그리고 콘텐츠 그룹화 태그에서 추가된 태그에 대해 준비했습니다. 우선, 폼 태그에서 새롭게 추가된 태그는 <datalist>, <keygen>, <meter>, <output>, <progress>입니다.

이에 대해 자세히 살펴 보겠습니다.

<datalist>는 <input>태그와 함께 사용하며 미리 정의된 옵션의 드롭 다운 목록을 지정할 때 사용합니다. 다음과 같이 소스를 입력하면 이런 결과창이 나오게 되며 네모 칸에 마우스를 가져가서 클릭을 하면 다음과 같이 option value로 지정했던 목록들이 아래로 나열됩니다. 목록들 중에 하나를 선택하면 빈 칸에 선택한 목록이 자동으로 채워집니다.

<keygen>은 인증서 관리 시스템과 웹 폼을 처리하는 데 사용되며, 보안 키를 생성하고 공개 키를 제출합니다. 이때, 개인 키는 로컬에 저장되고 공개 키는 서버로 전송됩니다. <keygen>의 대표적인 속성으로 Keytype, Name, Challenge가 있습니다. Keytype은 생성된 키의 형식을 지정하는 속성으로 기본값은 RSA로 설정됩니다. Name은 엘리먼트의 이름이며 Challenge는 공개키와 함께 전송되는 챌린지 문자열을 나타내는 속성입니다.

<meter>는 알려진 범위 내에서 스칼라 측정 또는 소수 값을 나타내는데 사용되며, 웹 페이지에 그래픽 형식에서 데이터를 표시 할 때 유용한 태그입니다. <meter> 태그는 익스플로러와 사파리에서는 실행되지 않음에 유의해야 합니다. 다음과 같이 소스창에 meter 태그를 이용하면 이러한 결과 창이 뜨게 됩니다. 예제에서는 두 개의 meter 태그를 사용하였는데, 첫 번째 meter 태그의 meter 값은 2이며 최소값은 0이고 최대값은 10입니다. 이것을 meter 태그를 이용해 0~10 중 2값 만큼을 그래프로 나타낸 것입니다. 다음 두 번째 줄의 meter태그는 100% 중 60%만 그래프로 나타낸 것입니다.

<output>은 스크립트에 의해 수행 계산의 결과를 나타내는 태그입니다. <output> 태그를 사용해도 화면에는 다르게 표시되지 않지만 이 태그로 묶인 부분이 일반 텍스트가 아닌 계산의 결과 값이라는 것을 브라우저에서 정확히 인식할 수 있습니다. <output> 태그에서 많이 사용되는 속성은 for와 name으로 for는 계산에 사용되는 요소들의 ID를 지정하며 name은 엘리먼트의 이름을 지정하는 속성입니다. <output> 태그는 다음과 같이 <output [속성=“속성 값”]> 내용 </output>으로 사용합니다.

<progress>는 작업의 진행 상황을 나타내는 태그입니다. Progress의 속성은 value와 맥스가 있습니다. Value는 작업이 얼마나 진행되었는지를 나타내며, max는 작업이 완료되는 양을 나타내는 속성입니다. 이 두 속성 모두 부동 소수점으로 표현합니다. 다음과 같은 소스를 입력하면 이러한 결과창이 뜨게 됩니다. 예제에서는 value 값을 680으로 max 값을 1000으로 했으며, 그것을 1000의 680만큼의 진행상황을 그래프로 표시되었습니다.

2. 텍스트 태그(Text-level semantics Tag)

다음은 텍스트 태그에서 추가된 태그를 알아보겠습니다. 텍스트 태그에서 추가된 태그는 <bdi>,<mark>,<ruby>,<time>, <wbr>이 있습니다. 이에 대해 자세히 살펴보겠습니다.

<bdi>는 텍스트 방향을 주위와는 별도로 표시하도록 지시하는데 사용하며, 사용자가 텍스트의 방향성을 모를 때 사용하면 유용한 태그로 브라우저가 <bdi> 태그의 텍스트를 보고 방향성을 판단하여 화면에 출력하게 됩니다. 그러나 자동으로 텍스트방향을 제어하다 보니 해석 오류로 인해 비정상적으로 출력될 수도 있기 때문에 w3c는 <bdi>태그의 사용을 텍스트의 방향성을 정말 알 수 없고, 서버 쪽에서 사용할 수 있는 더 좋은 알고리즘이 없을 때 최후의 보루로 사용하기를 권하고 있습니다. 다음과 같이 한글과 영어 그리고 아랍어의 인사말을 <bdi>태그로 묶으면 이러한 결과창이 나옵니다. 한글과 영어 그리고 아랍어의 인사말이 정확히 적혀있어 결과창의 인사말도 그대로 출력되는 것을 확인할 수 있습니다.

<mark>는 텍스트를 하이라이트 형태로 표시하며 특정한 단어나 일부분을 강조하고 싶을 때 사용하는 태그입니다. 보통은 텍스트의 배경을 형광색으로 표시하는데 크롬 브라우저의 경우에는 노란색으로 배경을 표시하며, 텍스트의 배경색은 <style>태그를 사용 바꿀 수 있습니다. 예제를 통해 <mark>태그의 사용법에 대해 자세히 알아보겠습니다. 예제에서는 주어진 문장 속에 있는 우유를 마크로 묶었습니다. 그리고 그 결과값을 확인해 보니 우유의 배경이 노란색으로 바뀐 것을 볼 수 있습니다. <style> 태그를 이용하여 배경색을 바꾸는 방법도 익혀두면 유용하게 사용할 수 있습니다.

<ruby>는 동아시아 타이포그래피에 사용되는 루비 주석을 지정하는데 사용되는 태그입니다. <ruby> 태그에는 <rt>나 <rp>태그를 하나 이상 포함하게 되는데 <rt>는 작은 글씨를 주석으로 나타내는 태그이며, <rp>태그는 <rt>태그를 지원하지 않는 브라우저에서 괄호 안에 주석을 표현하게 하는 태그입니다. 브라우저에서 <rt>태그를 지원한다면 <rp> 태그의 값은 표시되지 않습니다. 예제의 화면은 대한민국 한글 표기를 한자표기 위에 주석으로 나타내는 소스입니다. 결과창을 보니 대한민국이라는 한글이 한자 위에 주석으로 표시된 것을 볼 수 있습니다. 소스에서는 rp값으로 양쪽 괄호를 사용하였는데, 만약 브라우저에서 <rt>태그를 지원하지 않는다면 이 소스의 결과는 다음과 같이 괄호 안에 주석을 표시하게 됩니다.

<time>은 HTML 문서 내의 날짜 및 시간을 선언하는데 사용됩니다. 하지만 웹 문서에서 날짜나 시간을 자동으로 표시해주는 것은 아닙니다. <time>태그를 사용하는 이유는 <time>를 사용하면 모든 브라우저에서 해당 내용을 정확히 인식할 수 있기 때문입니다. 그리하여 검색 사이트에서 검색 대상을 날짜나 시간으로 제한했을 때 원하는 정보를 검색할 수 있게 해줍니다. datetime속성을 이용하여 날짜와 시간 모두를 인식하게 할 것인지 아니면 날짜와 시간을 각각 따로 인식하게 하거나 정확하게 인지할지를 지정할 수 있습니다. 다음과 같이 시간요소를 <time> 태그로 묶어서 사용하며, 결과 창은 다르지 않게 표시되지만 브라우저에서는 10시를 시간요소로 인식하고 있음에 의미가 있습니다.

<wbr>은 강제로 원하는 위치에서 줄 바꿈을 하고자 할 때 사용되는 태그입니다. 강제로 줄 바꿈을 한다는 것은 <nobr>태그 안에서 사용됨을 의미합니다. <nobr> 태그는 화면 크기에 따라 줄이 바뀌는 것을 방지하는 태그로 이 태그를 사용하면 화면 밖의 내용은 스크롤을 사용하여 나타냅니다. 이때 <wbr> 태그를 사용하면 원하는 위치에서 줄 바꿈을 할 수 있으며, <wbr> 태그로 묶인 부분부터 줄이 바뀐다는 점을 유의해서 위치를 조정하면 됩니다. 예제를 통해 살펴보겠습니다. 다음은 <nobr> 태그와 <wbr> 태그를 이용한 소스입니다. 결과 창을 보면 <wbr> 태그로 묶인 부분부터 줄이 바뀌어 나타난 것을 확인할 수 있습니다.

3. 콘텐츠 그룹화 태그(Grouping content Tag)

콘텐츠 그룹화 태그에서 추가된 태그를 알아보겠습니다. 콘텐츠 그룹화 태그에서 추가된 태그는 <figure>, <figcation>태그가 있습니다. 이에 대해 자세히 살펴보겠습니다.

<figure>태그는 캡션을 붙일 대상을 지정합니다. <figure>태그는 이미지, 다이어그램, 비디오, 텍스트 단락과 같은 멀티미디어 요소를 묶을 수 있으며 태그 안에 <img>태그나 <code>태그와 같은 다른 태그도 사용이 가능합니다. <figure> 태그의 사용법은 다음과 같이 <figure>엘리먼트로 시작해서 캡션을 붙일 요소를 지정하고 </figure>엘리먼트로 종료합니다. 다음 <figcaption>태그는 <figure> 태그를 사용하여 지정한 대상에 캡션 내용을 붙이는 태그입니다. <figcaption>태그는 꼭 사용해야 하는 태그는 아니지만 사용할 때에는 반드시<figure>태그 다음에 사용해야 합니다. <figcaption> 없이 <figure>태그를 사용하는 것은 브라우저에게 미디어가 있다는 것을 알려주기 위한 것입니다. <figcaption> 태그의 사용법은 다음과 같이 <figcaption> 엘리먼트로 시작해서 내용을 적고 </figcaption>엘리멘트로 종료합니다.

4. <datalist> 태그를 이용한 실습

<!doctype html>

<head>

 <meta charset="UTF-8">

 <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

 <title>datalist 태그 실습예제</title>

</head>

<body>

<h1> 폼 태그 - datalist 태그 실습하기!!</h1>

<div>Choose a browser from this list:</div>

<input list="browsers" />

<datalist id="browsers">

<option value="Chrome">

<option value="Firefox">

<option value="Internet Explorer">

<option value="Opera">

<option value="Safari">

</datalist>

</body>

</html>

임베디드 콘텐츠, 섹션, 대화형 태그

1. 임베디드 콘텐츠 태그(Embedded content Tag)

임베디드 콘텐츠, 섹션, 대화형 태그

임베디드 콘텐츠 태그와 섹션 태그, 그리고 대화형 태그에서 추가된 태그에 대해 살펴보겠습니다. 우선, 임베디드 콘텐츠 태그에서 새롭게 추가된 태그는 <audio>, <video>, <canvas>, <embed>, <source>, <track>태그입니다. 이에 대해 자세히 살펴 보겠습니다.

<audio> 태그는 MP3, WAV, AIFF 등의 오디오 파일을 웹 페이지에 삽입하는데 사용되는 태그입니다. 이전에는 <object> 태그를 이용하였는데, HTML5에서 추가된 <audio> 태그는 <object> 태그에 비해 간편하게 경로 및 간단한 속성만으로 오디오 첨부가 가능하게 되었습니다. <audio> 태그에는 여러 개의 오디오 소스를 포함할 수 있으며 몇 개의 속성들을 사용하여 사용자의 요구에 맞게 표현 할 수 있습니다. Src 는 음악 파일의 경로를 지정하는 속성이고, controls은 음악 재생 도구를 출력할지 지정하는 속성입니다. Autoplay는 음악을 자동 재생할지를, loop는 음악을 반복 재생 할지를 지정하는 속성이고, preload는 음악을 재생하기 전에 모두 불러올지를 지정하는 속성입니다. <audio> 태그를 사용하는 방법은 다음과 같이 audio 태그 선언과 함께 속성을 입력합니다. 이때 src 속성은 오디오 파일의 경로를 지정하므로 반드시 입력해야 하며, 나머지 속성은 생략이 가능합니다.

<video>태그는 동영상 클립 또는 다른 비디오 스트림으로 비디오를 지정할 때 사용되는 태그입니다. <video> 태그는 PC와 Mobile 모두에서 사용 가능하지만, Mobile의 경우 자동재생은 지원하지 않습니다. 또한 익스플로러8 이하의 버전에서는 인식하지 못한다는 점에 유의해야 합니다. <video> 태그는 몇 개의 속성들을 사용하여 사용자의 요구에 맞게 표현 할 수 있습니다. Src 는 비디오 파일의 경로를 지정하는 속성이고, width와 height는 비디오의 크기를 지정하는 속성입니다. Muted는 음소거를 지정하며 Autoplay는 비디오를 자동 재생할지를, loop는 비디오를 반복재생 할지를 지정하는 속성입니다. 그리고 preload는 비디오를 재생하기 전에 모두 불러올지를 지정하는 속성입니다. <video> 태그를 사용하는 방법은 다음과 같이 video 태그 선언과 함께 속성을 입력합니다. 이때 src 속성은 비디오 파일의 경로를 지정하므로 반드시 입력해야 하며, 나머지 속성은 생략이 가능합니다.

<canvas>태그는 스크립트 언어를 통해 빠르게 그래픽을 그리는데 사용되는 태그입니다. <canvas> 태그 자체로는 아무런 기능이 없으며, canvas에 그래픽을 그릴 때에는 스크립트 언어를 사용해야 합니다. canvas의 속성 중 id는 canvas를 인식하는 속성으로 속성 값은 canvas가 되며, width와 height는 canvas의 크기를 지정하는 속성으로 기본 값은 너비 300pixel, 높이 150pixel 입니다. 다음과 같이 canvas 선언 후 id 와 width 와 height 값을 지정하면 결과창에는 아무것도 없는 빈 화면이 뜨게 되는데, Canvas의 유무를 확인하기 위해 style(스타일) 태그를 이용하여 캔버스의 테두리를 오렌지 색의 점선으로 나타내었습니다.

<embed> 태그는 HTML 웹 페이지에 멀티미디어를 포함하는 태그로 브라우저에 설치되어 있는 플러그인이 필요한 파일을 재생할 때 사용되는 태그입니다. <embed> 태그는 그 자체로 기능하기 때문에 닫는 태그가 없으며, <audio>, <video> 태그와 속성과 사용법이 유사합니다. <embed> 태그는 다음과 같이 사용합니다. Src 는 멀티미디어 파일의 경로를 지정하는 속성으로 반드시 사용해야 하는 속성이고 그 외의 속성은 생략이 가능합니다. Src 속성만을 이용해서 소스를 입력하고 결과 창을 보면 다음과 같이 src로 지정한 파일이 재생되는 것을 확인 할 수 있습니다.

<source> 태그는 미디어 요소에 여러 미디어 자원을 지정하는 데 사용되는 태그로 앞서 설명한 <video>, <audio> 태그를 사용할 경우 해당 자료의 위치를 지정할 때 사용됩니다. <source> 태그는 src와 type 속성을 가지는데, src 는 미디어 파일의 경로를 지정하는 속성이고, type은 미디어 파일의 파일 유형을 지정하는 속성입니다. 다음과 같이<audio> 태그를 사용하여 미디어를 가져올 때 <audio> 태그에서는 controls 속성과 같이 경로 이외의 속성을 지정하고 <source> 태그를 이용하여 음악 파일의 경로를 지정하면 <audio> 태그를 이용하여 음악파일을 가져온 경우와 같은 결과가 나오는 것을 볼 수 있습니다.

<track>태그는 미디어 요소에 대한 텍스트 트랙을 지정하는 태그로 미디어가 재생될 때 캡션, 설명, 자막 파일 등의 텍스트 파일을 지정할 때 사용되는 태그입니다. <track> 태그를 사용할 때에는 srt나 vtt를 확장자로 하는 별도의 자막 파일이 필요한데, srt파일은 텍스트 파일을 만들고 저장할 때 파일 이름을 강제로 지정해야 합니다. <track> 태그의 src 속성은 트랙 파일의 경로를 지정하며, kind는 트랙의 종류를 지정하는 속성입니다. Label은 트랙의 제목을 지정하는 속성이고 srclang은 자막파일을 언어별로 제공하는 경우 해당 자막파일의 언어를 지정하는 속성입니다.

2. 섹션 태그(Section Tag)

섹션 태그에서 새롭게 추가된 태그에 대해 알아보겠습니다. 섹션 태그에서 새롭게 추가 된 태그는 <header>, <nav>, <section>, <article>, <aside>, <footer>, <hgroup> 태그 입니다. <hgroup> 태그를 제외한 나머지 태그들은 여러분에게 익숙한 태그들일 것입니다. 이 태그들은 시맨틱 태그에 해당하는 태그들로 이번 차시에서는 간단하게 살펴보겠습니다.

<header> 태그는 주로 로고 영역과 같이 웹 페이지의 헤더를 만들 때 사용합니다. 다음 <nav>태그는 웹 페이지의 메뉴를 만들 때 사용하는 태그로, 일반적으로 내부에 <ul> 태그와 목록요소를 나타내는 <il> 태그를 많이 사용합니다. <section> 태그는 여러 중심 내용을 감싸는 공간을 의미하는 태그입니다.

<article>태그는 문서, 어플리케이션, 사이트 안에서 독립되어 있는 구성요소로 글자가 많이 들어가는 부분을 의미하는 태그입니다. <aside>태그는 웹 페이지 왼쪽이나 오른쪽에 부가적인 내용을 나타내는 영역으로, 이곳은 주로 퀵메뉴나 광고영역으로 사용됩니다. <footer> 태그는 웹 페이지의 하단을 만들 때 사용하는 태그로, 주로 카피라이트 영역을 표현할 때 사용되는 태그입니다.

3. 대화형 태그(Interactive elements Tag)

대화형 태그에서 새롭게 추가된 태그에 대해 알아보겠습니다. 대화형 태그에서 새롭게 추가 된 태그는 <command>, <details>, <summary>태그입니다. 이에 대해 자세히 살펴보겠습니다.

<command>태그는 명령 지정 태그로 사용자가 호출 할 수 있는 명령을 지정하는데 사용하는 태그입니다. <command>태그는 라디오 버튼, 체크 박스 같은 명령 단추를 재설정 하며, 반드시 <menu> 태그 안에서 있어야 합니다. <command> 태그의 속성 중 Icon은 명령을 나타내는 그림을 지정하는 속성이고, label은 명령의 이름을 지정하는 속성입니다. 그리고 type은 명령의 종류를 지정하는데, 명령에는 command, checkbox, radio가 있습니다.

<summary>태그는 세부 요약 태그로 <details> 태그에서 눈에 보이는 제목을 정의합니다. <summary> 태그로 묶인 부분을 클릭하여 세부정보를 보이거나 감추게 할 수 있습니다. <details>은 추가적인 설명 태그로 주로 <summary> 태그와 함께 사용하며 웹 페이지의 세부정보나 일부에 대해 설명하고자 할 때 사용하며 내용을 숨기거나 보여지게 설정할 수 있습니다. 사용법은 다음과 같이 <details>로 시작 선언을 하고 제목이 될 부분을 <summary> 태그로 묶어줍니다. 그리고 세부항목을 적고 </details>로 종료 선언을 합니다. 결과 창을 보면 다음과 같이 <summary> 태그로 묶인 부분만 보는데, 그 부분을 클릭하면 다음과 같이 세부 내용이 펼쳐집니다.

4. <canavas> 태그를 이용한 실습

canvas_tag.html

<!doctype html>

<head>

 <meta charset="UTF-8">

 <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

<script type="text/javascript" src="canvas_tag.js"></script>

 <title>canvas 태그 실습예제</title>

</head>

<body onload="loader()">

<h1> 임베디드 콘덴츠 태그 - canvas 태그 실습하기!!</h1>

<canvas id="canvas" width="600" height="500"/>

</body>

</html>

canvas_tag.js

function loader()

{

var canvas = document.getElementById( "canvas" );

var canvas2d = canvas.getContext("2d");

// Rectangles

canvas2d.fillStyle = "rgba( 0, 0, 200, 1 )";

canvas2d.fillRect( 30, 30, 75, 70 );

canvas2d.fillStyle = "rgba(200, 200, 0, 1 )";

canvas2d.fillRect( 70, 50, 55, 70 );

canvas2d.fillStyle = "rgba( 200, 0, 0, 1 )";

canvas2d.fillRect( 90, 50, 75, 50 );

// Filled triangle

canvas2d.fillStyle = "rgba( 0, 200, 0, 0.5 )";

canvas2d.beginPath();

canvas2d.moveTo( 225, 25 );

canvas2d.lineTo( 305, 25 ); // Canvas 상 절대위치f

canvas2d.lineTo( 225, 105 );

canvas2d.closePath();

canvas2d.fill();

// Stroked triangles

canvas2d.beginPath();

canvas2d.strokeStyle = "rgba( 200, 0, 0, 0.5 )";

canvas2d.moveTo( 110, 205 );

canvas2d.lineTo( 110, 125 );

canvas2d.lineTo( 30, 205 );

canvas2d.closePath();

canvas2d.stroke();

canvas2d.beginPath();

canvas2d.moveTo( 100, 205 );

canvas2d.lineTo( 100, 125 );

canvas2d.lineTo( 20, 205 );

canvas2d.closePath();

canvas2d.stroke();

canvas2d.beginPath();

canvas2d.moveTo( 90, 205 );

canvas2d.lineTo( 90, 125 );

canvas2d.lineTo( 10, 205 );

canvas2d.closePath();

canvas2d.stroke();

// Heart

canvas2d.fillStyle = "rgba( 200, 0, 0, 0.5 )";

canvas2d.beginPath();

canvas2d.moveTo( 75, 250 );

canvas2d.bezierCurveTo( 75, 247, 70, 235, 50, 235 );

                // cpx1, cpy1, cpx2, cpy2, x, y

canvas2d.bezierCurveTo( 20, 235, 20, 272.5, 20, 272);

canvas2d.bezierCurveTo( 20, 290, 40, 312, 75, 330 );

canvas2d.bezierCurveTo( 110, 312, 130, 290, 130, 272 );

canvas2d.bezierCurveTo( 130, 272.5, 130, 235, 100, 235 );

canvas2d.bezierCurveTo( 85, 235, 75, 247, 75, 250 );

canvas2d.closePath();

canvas2d.fill();

// Quadratic curves

canvas2d.strokeStyle = "rgba( 0, 0, 0, 1 )";

canvas2d.beginPath();

canvas2d.moveTo( 275, 125 );

canvas2d.quadraticCurveTo( 225, 125, 225, 162 ); // cpx, cpy, x, y

canvas2d.quadraticCurveTo( 260, 200, 265, 200 );

canvas2d.quadraticCurveTo( 325, 200, 325, 162 );

canvas2d.quadraticCurveTo( 325, 125, 275, 125 );

canvas2d.closePath();

canvas2d.stroke();

// Arcs

canvas2d.beginPath();

canvas2d.arc( 275,275,50,0,Math.PI * 2, true );

canvas2d.moveTo( 310, 275 );

canvas2d.arc( 275,275,35,0,0.75*Math.PI, false);

canvas2d.moveTo( 300, 255 );

canvas2d.arc( 265,255,35,0,0.5*Math.PI, false);

canvas2d.moveTo( 200, 255 );

canvas2d.arc( 245,255,35,0,0.2*Math.PI, false );

canvas2d.closePath();

canvas2d.stroke();

canvas2d.font = "italic 40px sans-serif";

canvas2d.strokeText( "Hello!", 50, 400 );

}

5. <summary> 태그와 <details> 태그를 이용한 실습

<!doctype html>

<head>

 <meta charset="UTF-8">

 <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

 <title>details, summarty 태그 실습예제</title>

</head>

<body>

<h1> 임베디드 콘덴츠 태그 - details, summarty 태그 실습하기!!</h1>

<details>

<summary>Copyright 2016.</summary>

<p> - by Refsnes Data. All Rights Reserved.</p>

<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

</body>

</html>