Web - Front end 3. HTML 고급문서 만들기

 Web - Front end 3. HTML 고급문서 만들기

1) <img>

이미지 삽입 태그 (BMP, GIF, PNG, JPG(JPEG), animated-GIF)

* 속성

src : 이미지의 위치 주소(절대주소 or 상대 주소)나 URL (필수 요소)

alt  : 이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열 (필수 요소)

웹에서 검색할 때 참조됨.

width & height : 이미지가 출력되는 가로 세로 크기(픽셀). 없으면 이미지의 원본 값이 적용되며 둘중 하나만 입력되었을 때는 이미지의 비율을 유지하나 둘 다 입력하면 비율 깨짐.

<body>

<h3>이미지 삽입</h3>

<hr>

<img src="images/html.png" width="200" height="300" alt="html">

<img src="images/csss.png" alt="css사진 없음">

<img src="https://www.grapecity.co.kr/images/metalsmith/developer

    /wijmojs/index/javascript-logo.png", alt="javascript" >

</body>

(이미지를 상대경로로 지정, 이미지가 없는 경우, 이미지를 URL으로 지정)

2) 리스트 만들기

<ol></ol> : 순서 있는 리스트

<ul></ul> : 순서 없는 리스트

<dl></dl> : 정의 리스트

2-1) <ol> & <ul>

태그의 type 속성으로 아이템를 나타내는 마커를 설정할 수 있다. <ol>에는 "1", "A", "a", "I", "i" 중에서 설정할 수 있고 기본값은 "1" 이다. <ul>에는 "circle", "disk", "square" 등을 설정할 수 있고 기본값은 "disk"이다.

태그 안에 <li></li> 태그를 넣어서 각각의 내용을 설정해 줄 수 있다.

여러개의 리스트를 중첩해서 사용할 수도 있다. 

<body>

<h3>리스트</h3>

<hr>

<ul>

<li>front end</li>

<ul type="square">

<li>html</li>

<li>css</li>

<li>javascript</li>

</ul>

<li>backe nd</li>

<ol type="I">

<li>Express</li>

<li>spring</li>

<li>Django</li>

</ol>

<li>프로그램 언어</li>

<ol type="A">

<li>Python</li>

<li>Java</li>

<li>c++</li>

</ol>

</ul>

</body>

*<ul> 안에 <ul> 이 중첩되면 마크의 기본값이 disk -> circle -> square 로 바뀐다. 

2-2) <dl></dl>

용어와 설명으로 나뉘며 용어는 <dt></dt>, 내용은<dd></dd>안에 입력할 수 있다. 

*</dt> 와 </dd>는 생략할 수 있다. 

<body>

<h3>리스트</h3>

<hr>

<dl>

<dt><strong>Internet Explorer</strong>

<dd>마이크로소프트에서 만든 브라우저로 연재 국내에서 가장 많이 사용

<dt><strong>Firefox</strong>

<dd>Mozilla 재단에서 오픈 소스로 만든 것으로 w3c의 웹 표준을 선도

<dt><strong>Chrome</strong>

<dd>구글에서 만든 것으로 좋은 디버거를 갖추고 있어 디버깅에 많이 사용

</dl>

</body>

3) <table></table>

표를 만드는 태그다.

<caption> : 표 제목. 필수는 아니다. 

<thead> : 헤딩 셀 그룹으로 표의 항목들의 이름을 표시할 태그들이 위치한다. 

<tfoot> : 바닥 셀 그룹으로 표의 가장 하단에 출력된다. 

<tbody> : 데이터 셀 그룹으로 표의 데이터들이 담기는 부분이다. 

<tr> : 표의 행에 해당하고 안에 여러개의 <td>와 <th>를 포함한다. 필수 요소.

<th> : 제목(헤딩) 셀로 진하게 출력된다. 

<td> : 데이터 셀로 표의 데이터들을 출력해 준다. 

* <thead>, <tbody>, <tfoot> 는 의미적으로만 나뉜 것으로 실재로 출력에는 영향을 주지 않는다. 

*<table> 태그의 border 속성에 표의 테두리 굵기를 설정할 수 있다. 설정하지 않으면 테두리가 표시되지 않는다. 

<body>

<h3>표</h3>

<hr>

<table border="1">

<caption>1학기 성적</caption>

<thead>

<tr>

<th>이름</th>

<th>HTML</th>

<th>CSS</th>

</tr>

</thead>

<tbody>

<tr>

<td>황기태</td><td>80</td><td>70</td>

</tr>

<tr>

<td>이재문</td><td>95</td><td>99</td>

</tr>

<tr>

<td>이병은</td><td>40</td><td>61</td>

</tr>

</tbody>

<tfoot>

<tr>

<th>합</th><th>225</th><th>230</th>

</tr>

</tfoot>

</table>

</body>

* 태그 들에 bgcolor 속성을 주면 각 셀의 배경색을 지정해 줄 수 있다. 색은 영어로써주거나 16진법 rgb코드를 입력해 줘도 된다.

*  셀들을 병합하려면 병합하려는 셀 중 가장 위 or 왼쪽 셀의 <td>나 <th> 태그에 colspan(가로), rowspan(세로) 속성에 병합하려는 셀의 개수를 입력해 주면 된다. 병합되는 셀에는 아무것도 작성하지 않으면 된다. 

예시) 표를 활용해 시간표 만들기

<body>

<h3>시간표</h3>

<hr>

<table border="1">

<caption>1학기</caption>

<thead>

<tr>

<th></th>

<th>월</th>

<th>화</th>

<th>수</th>

<th>목</th>

<th>금</th>

</tr>

</thead>

<tbody>

<tr>

<th>1교시</th>

<td rowspan="2" bgcolor="66ffff">컴퓨터활용프리젠테이션</td>

<td rowspan="3" bgcolor="ff8000">알고리즘 실습</td>

<td rowspan="3" bgcolor="99ff99">영상인공지능 처리</td>

<td rowspan="3" bgcolor="9999ff">프로그래밍 실습</td>

<td bgcolor="000000"></td>

</tr>

<tr>

<th>2교시</th>

<td rowspan="2" bgcolor="ffff99">데이터베이스</td>

</tr>

<tr>

<th>3교시</th>

<td rowspan="2" bgcolor="ffff99">직업과 경력개발</td>

</tr>

<tr>

<th>4교시</th>

<td colspan="3" rowspan="2" bgcolor="000000"></td>

<td bgcolor="000000"></td>

</tr>

<tr>

<th>5교시</th>

<td bgcolor="000000"></td>

<td rowspan="3" bgcolor="ffcccc">서버구축 및 운영실습</td>

</tr>

<tr>

<th>6교시</th>

<td rowspan="3" bgcolor="ffcccc">웹 기초 프로그래밍</td>

<td rowspan="3" bgcolor="ffcc99">융합 UI 실습</td>

<td rowspan="4" bgcolor="99ccff">인성 교육</td>

<td rowspan="2" bgcolor="66b2ff">인공지능개론</td>

</tr>

<tr>

<th>7교시</th>

</tr>

<tr>

<th>8교시</th>

<td colspan="2" rowspan="2" bgcolor="000000"></td>

</tr>

<tr>

<th>9교시</th>

<td colspan="2" bgcolor="000000"></td>

</tr>

</tbody>

</table>

</body>

*표에 <img> 태그를 이용하면 이미지를 넣을 수 있다. 

<body>

<table>

<caption>Front end</caption>

<thead>

<tr>

<th>HTML</th><th>CSS</th><th>Javascript</th>

</tr>

</thead>

<tbody>

<tr>

<td>

<img src="images/html.png"

                        width="200" height="200">

</td>

<td>

<img src="images/css.png"

                        width="200" height="200">

</td>

<td>

<img src="images/javascript.png"

                        width="200" height="200">

</td>

</tr>

</tbody>

</table>

</body>

4) <a>

하이퍼링크를 만들어주는 태그다.  <a> </a> 사이에 하이퍼링크를 지정해줄 텍스트나 사진을 입력해준다. 

href : 이동할 HTML 페이지의  URL, 혹은  HTML 페이지 내 앵커 이름. 

같은 사이트의 HTML페이지를 연결하는 경우 HTML파일의 경로만 지정해주면 되고 다른 웹사이트를 연결하는 경우에는 'http://'로 시작하는 주소를 입력하면 된다.

target  : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정.

(_self : 기본값으로 현재 페이지에 표시, _blank  :새 창에 표시, _parent : 부모 프레임에 표시, _top : 최상위 프레임에 표시, 앵커 이름)

<body>

<h2>링크 만들기</h2>

<hr>

포털사이트

<ul>

<li>

<a href="http://www.naver.com" target="_blank">네이버</a>

</li>

<li>

<a href="http://www.daum.net" target="_blank">다음</a>

</li>

</ul>

신문 사이트

<ul>

<li>

<a href="https://www.etnews.com/" target="_self">

<img src="images/etnews.png" height="30" width="100">

</a>

</li>

<li>

<a href="https://www.chosun.com/" target="_self">

<img src="images/chosun.png" height="30" width="100">

</a>

</li>

</ul>

<hr>

<a href="시간표.html" target="_blank">시간표</a>

</body>

4-2) 앵커

HTML 페이지 내의 특정 위치로 이동시켜주는 링크를 만들 때 특정 위치에 앵커를 설정하면 하이퍼링크를 클릭했을 때 해당 위치로 이동하게 해준다. 

모든 태그에 앵커를 만들 수 있다. id속성(혹은 name 속성) 에 앵커의 이름을 지정해주면 해당 위치에 앵커가 생성된다. 

앵커를 불러올 때는 <a>태그의 href속성에 #앵커이름을 지정해주면 된다. 해당 페이지 뿐만 아니라 같은 웹사이트안의 다른 페이지의 앵커도 불러올 수 있으며 HTML페이지의 주소 뒤에 #앵커이름을 붙여주면 된다. 

<body>

<h3>Elvis Presley</h3>

<hr>

<ul>

<li><a href="#love">Love me tender</a>

<li><a href="#can">Can't help falling in love</a>

<li><a href="#it">It's now or never</a>

</ul>

<h3 id="love">Love me tender</h3>

Love me tender, Love me sweet, Never let me go.<br>

You have made my life complete, <br>

And I love you so.<br>

Love me tender, Love me true, <br>

All my dreams fulfilled.<br>

For my darling I love you, And I always will.<br>

<h3 id="can">Can't help falling in love</h3>

Love me tender, Love me sweet, Never let me go.<br>

You have made my life complete,

And I love you so.<br>

Love me tender, Love me tn」e,

All my dreams fulfilled.<br>

For my darling I love you, And I always wrill.<br>

<h3 id="it">It's now or never</h3>

It's now or never, Come hold me tight<br>

Kiss me my darling, Be mine tonight<br>

Tomorrow will be too late,<br>

It's now or never. My love won't wait.<br>

</body>

* 'Cant help falling in love' 를 클릭했을 때

위처럼 길어서 내용이 다 표시되지 않는 경우 앵커를 이용해서 원하는 위치로 바로 갈 수 있도록 하면 유용하다. 

5) <iframe>

이너 프레임(인라인 프레임) 을 만들어준다. 페이지 내에 내장 윈도우를 만들고 다른 페이지를 출력하도록 해준다. 

src : 출력할 웹 페이지 URL 주소

srcdoc  : 직접 보여질 텍스트 내용으로 사용되면 src 속성을 무시하고 해당 텍스트가 출력된다.

name  :프레임의 이름을 지정하며 하이퍼링크의 target 속성에서 사용된다.

width & heught : 프레임의 크기를 설정해준다. (기본값 width : 300, height : 150)

* 아마존, 네이버 등 대부분의 포탈 사이트를 <iframe> 태그로는 연결할 수 없도록 하고 있다. 이들 사이트는 Clickjacking이라고 부르는 웹 침입을 막기 위해 인라인 프레임에 출력되기를 거부하기 때문이다.

<body>

<h3>이너프레임</h3>

<hr>

<iframe src="https://www.etnews.com" width="300" height="300">

    </iframe>

<iframe src="https://www.chosun.com/" width="300" height="300">

    </iframe>

</body>

5-2) name

인라인 프레임의 name 속성을 이용하여 이름을 지정하고 하이퍼링크의 target 속성에 지정하면 해당 리크를 target 속성에 지정된 프레임에 출력한다.

main 코드

<body>

<h3>이너프레임</h3>

<hr>

<iframe src="left.html"name="left" width="200" height="300">

    </iframe>

<iframe src="" name="right" width="300" height="300"></iframe>

</body>

left.html 코드

<body>

<ul>

<li><a href="https://www.etnews.com" target="right">전자신문

        </a></li>

<li><a href="https://www.chosun.com/" target="right">조선일보

        </a></li>

</ul>

</body>

하이퍼링크를 클릭하면 해당 웹 페이지가 'right' 프레임에 출력된다. 

6) <audio> & <video>

웹 페이지에 음악 파일과 동영상 파일을 출력해주는 태그다.

* 재생 가능한 파일

MP4, WebM, Ogg, MP3, Wav, Ogg

src : 재생하려는 파일

controls : 제어기 출력 여부 (재생, 일시정지 등)

loop : 무한 반복

muted(<video>태그 만) : 소리 끄기

width & height(<video> 태그 만)  : 동영상을 출력할 크기 설정

* <video>여기에 해당 태그가 지원되지 않는 경우 출력할 텍스트를 입력할 수 있다.</video>

<body>

<ul>

<li>

<video src="media/bear.mp4" width="300" height="200" 

            controls loop>

</li>

<li>

<audio src="media/EmbraceableYou.mp3" controls loop>

</li>

</ul>

</body>

* 브라우저마다 출력이 제한되는 파일이 있기때문에 이에 대비해서 <sourse>태그를 이용하여 다양한 파일 형식을 지정할 수 있다. 각각의 확장자의 파일을 준비하고 <sourse> 태그의 src 속성과 type 속성을 사용하면 되는데 src 속성에는 해당 형식의 파일을 지정하고 type 속성에는 해당 형식의 마임 타임(MIME Type)을 지정해주면 된다. <sourse> 태그를 여러게 지정하면 해당 형식중 재상 가능한 형식으로 재생한다. 이때 <video> 태그에는 src속성을 지정하지 않는다. 

(사용예시)

<video width="150" height="100">

<sourse src="bear.mp4" type="video/mp4">

<sourse src="bear.ogg" type="video/ogg">

</video>