🐧img 태그
📌img 태그 : 웹서버에 저장된 이미지 파일을 제공받아 출력하기 위한 태그
→ 웹에서 사용하는 이미지 파일 : GIF 파일, PNG 파일, JPEG 파일 등
◈ alt 속성 : 출력 이미지에 대한 설명을 속성값으로 설정 - 음성지원
◈ src 속성 : 웹서버에 저장된 이미지 파일의 URL 주소를 속성값으로 설정
→ src 속성값으로 설정된 URL 주소에 이미지 파일이 없는 경우 404 상태코드(Not Found) 발생<img alt="다음로그" src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">
◈ img 태그의 폭을 변경하여 이미지 파일의 크기를 변경하여 출력 가능
◈ 박스모델의 폭을 변경하면 높이는 자동 변경<img alt="코알라" src="http://localhost:8000/web/html/image/Koala.jpg" width="200">
◈ 현재 요청 웹문서와 같은 서버에 있는 웹자원(WebContext)은 URL 주소에서 서버 접속 관련 정보를
생략하여 표현 가능 - 프로토콜, 서버명, 포트번호 생략 가능
◈ 절대경로 표현방법 : 웹서버의 최상위 디렉토리(Root Directory)을 기준으로 웹자원의 경로 표현<img alt="코알라" src="/web/html/image/Koala.jpg" width="200">
◈ 상대경로 표현방법 : 요청 웹문서가 저장된 서버 디렉토리(.)를 기준으로 웹자원의 경로 표현 -->
<img alt="코알라" src="./image/Koala.jpg" width="200"> <img alt="코알라" src="image/Koala.jpg" width="200">
📃02_img.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>img 태그</h1> <hr> <!-- img 태그 : 웹서버에 저장된 이미지 파일을 제공받아 출력하기 위한 태그 --> <!-- → 웹에서 사용하는 이미지 파일 : GIF 파일, PNG 파일, JPEG 파일 등 --> <!-- alt 속성 : 출력 이미지에 대한 설명을 속성값으로 설정 - 음성지원 --> <!-- src 속성 : 웹서버에 저장된 이미지 파일의 URL 주소를 속성값으로 설정 --> <!-- → src 속성값으로 설정된 URL 주소에 이미지 파일이 없는 경우 404 상태코드(Not Found) 발생 --> <img alt="다음로그" src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"> <hr> <!-- img 태그의 폭을 변경하여 이미지 파일의 크기를 변경하여 출력 가능 --> <!-- 박스모델의 폭을 변경하면 높이는 자동 변경 --> <img alt="코알라" src="http://localhost:8000/web/html/image/Koala.jpg" width="200"> <!-- 현재 요청 웹문서와 같은 서버에 있는 웹자원(WebContext)은 URL 주소에서 서버 접속 관련 정보를 생략하여 표현 가능 - 프로토콜, 서버명, 포트번호 생략 가능 --> <!-- 절대경로 표현방법 : 웹서버의 최상위 디렉토리(Root Directory)을 기준으로 웹자원의 경로 표현 --> <img alt="코알라" src="/web/html/image/Koala.jpg" width="200"> <!-- 상대경로 표현방법 : 요청 웹문서가 저장된 서버 디렉토리(.)를 기준으로 웹자원의 경로 표현 --> <img alt="코알라" src="./image/Koala.jpg" width="200"> <img alt="코알라" src="image/Koala.jpg" width="200"> <hr> <img alt="펭귄" src="/web/html/Penguins.jpg" width="200"> <img alt="펭귄" src="Penguins.jpg" width="200"> <hr> <img alt="튤립" src="/web/Tulips.jpg" width="200"> <img alt="튤립" src="../Tulips.jpg" width="200"> </body> </html>
🐧li 태그
📌li 태그 : 목록을 출력하기 위한 태그
→ ol 태그 또는 ul 태그의 하위태그로 사용
◈ ul 태그 : 목록에 블릿(기호)을 제공하여 출력하기 위한 태그
◈ ol 태그 : 목록에 순서값을 제공하여 출력하기 위한 태그
📃03_li.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>li 태그</h1> <hr> <!-- li 태그 : 목록을 출력하기 위한 태그 --> <!-- => ol 태그 또는 ul 태그의 하위태그로 사용 --> <!-- ul 태그 : 목록에 블릿(기호)을 제공하여 출력하기 위한 태그 --> <!-- ol 태그 : 목록에 순서값을 제공하여 출력하기 위한 태그 --> <h3>유채방</h3> <ul> <li>도미토리, 동성(또는 가족) 1팀</li> <li>4인실</li> <li>공동 취사실 및 욕실(화장실)</li> <li>비용 <ul> <li>비수기 : 1인 20,000원</li> <li>성수기 : 1인 25,000원</li> </ul> </li> </ul> <hr> <h3>동백방</h3> <ol> <li>도미토리, 동성(또는 가족) 1팀</li> <li>4인실</li> <li>공동 취사실 및 욕실(화장실)</li> <li>비용 <ol> <li>비수기 : 1인 20,000원</li> <li>성수기 : 1인 25,000원</li> </ol> </li> </ol> </body> </html>
🐧dl 태그
📌dl 태그 : 정의 목록(Definition List)을 출력하기 위한 태그
→ 하위태그 : dt, dd
📌dt 태그 : 정의 용어(Definition Term)을 출력하기 위한 태그
📌dd 태그 : 용어에 대한 설명(Definition Description)을 출력하기 위한 태그
📃04_dl.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>dl 태그</h1> <hr> <!-- dl 태그 : 정의 목록(Definition List)을 출력하기 위한 태그 --> <!-- → 하위태그 : dt, dd --> <!-- dt 태그 : 정의 용어(Definition Term)을 출력하기 위한 태그 --> <!-- dd 태그 : 용어에 대한 설명(Definition Description)을 출력하기 위한 태그 --> <h3>유채방</h3> <dl> <dt>대상</dt> <dd>도미토리, 동성(또는 가족) 1팀</dd> <dt>크기</dt> <dd>4인실</dd> <dt>주의사항</dt> <dd>공동 취사실 및 욕실(화장실)</dd)> <dt>비용</dt> <dd>비수기 : 20,000원</dd> <dd>성수기 : 25,000원</dd> </dl> </body> </html>
🐧table 태그
📌table 태그 : 표(table)를 출력하기 위한 태그 - 하위태그 : tr
◈ border 속성 : 0(외곽선 미출력 - 기본값) 또는 1(외각선 출력)을 속성값으로 설정
→ 상위태그에 적용된 디자인 속성은 하위태그에 상속되어 적용<table border="1">📍tr 태그 : 행(Row)을 표현하여 출력하기 위한 태그 - 하위태그 : th, td
→ 모든 tr 태그의 셀의 갯수는 동일하게 설정하는 것을 권장
📍th 태그(td 태그) : 열(Column)을 출력하기 위한 태그
→ th 태그(td 태그)을 이용하여 내용 출력 - 셀(Cell)
→ th 태그는 태그내용을 가운데 정렬하고 굵게 출력 - 컬럼명 출력
→ 셀의 폭은 태그내용에 의해 자동으로 변경
📃05_table.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>table 태그</h1> <hr> <!-- table 태그 : 표(table)를 출력하기 위한 태그 - 하위태그 : tr --> <!-- border 속성 : 0(외곽선 미출력 - 기본값) 또는 1(외각선 출력)을 속성값으로 설정 --> <!-- → 상위태그에 적용된 디자인 속성은 하위태그에 상속되어 적용 --> <table border="1"> <!-- tr 태그 : 행(Row)을 표현하여 출력하기 위한 태그 - 하위태그 : th, td --> <!-- → 모든 tr 태그의 셀의 갯수는 동일하게 설정하는 것을 권장 --> <tr> <!-- th 태그(td 태그) : 열(Column)을 출력하기 위한 태그 --> <!-- → th 태그(td 태그)을 이용하여 내용 출력 - 셀(Cell) --> <!-- → th 태그는 태그내용을 가운데 정렬하고 굵게 출력 - 컬럼명 출력 --> <!-- → 셀의 폭은 태그내용에 의해 자동으로 변경 --> <th>번호</th><th>이름</th><th>주소</th> <tr> <tr> <td>1000</td><td>홍길동</td><td>서울시 강남구</td> </tr> <tr> <td>2000</td><td>임꺽정</td><td>수원시 팔달구</td> </tr> <tr> <td>3000</td><td>전우치</td><td>인천시 월미구</td> </tr> </table> </body> </html>
🐧tbody 태그
📌HTML5에서는 표를 구조적으로 표현하기 위해 thead, tbody, tfoot 태그 사용
📌summary 속성 : 표에 대한 설명을 속성값으로 설정
<table summary="객실 안내">📌caption 태그 : 표 제목을 출력하기 위한 태그
<caption>객실표</caption>📌rowspan 속성 : 병합할 행의 갯수를 속성값으로 설정
<td rowspan="3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan="2">20,000</td>📌rcolspan 속성 : 병합할 열의 갯수를 속성값으로 설정
<td>가족실</td><td></td><td colspan="2">60,000(최대 5인)</td>
📃06_tbody.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> <style type="text/css"> table { border: 1px solid black; border-collapse: collapse; } th, td { border: 1px solid black; width: 100px; padding: 20px; text-align: center; } caption{ font-size: 24px; line-height: 40px; letter-spacing: 15px; } </style> </head> <body> <h1>tbody 태그</h1> <hr> <!-- HTML5에서는 표를 구조적으로 표현하기 위해 thead, tbody, tfoot 태그 사용 --> <!-- summary 속성 : 표에 대한 설명을 속성값으로 설정 --> <table summary="객실 안내"> <!-- caption 태그 : 표 제목을 출력하기 위한 태그 --> <caption>객실표</caption> <thead> <tr> <th>건물명</th><th>방이름</th><th>크기</th><th>가격</th> </tr> </thead> <tbody> <tr> <!-- rowspan 속성 : 병합할 행의 갯수를 속성값으로 설정 --> <td rowspan="3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan="2">20,000</td> </tr> <tr> <td>동백방</td><td>2인실</td><td>20,000</td> </tr> <tr> <!-- colspan 속성 : 병합할 열의 갯수를 속성값으로 설정 --> <td>가족실</td><td></td><td colspan="2">60,000(최대 5인)</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">바깥채 전체를 독채로 대여합니다. </tr> </tfoot> </table> </body> </html>
