위로
아래
문장의 구성 요소
HTML 5 기본형
<!DOCTYPE html> <!-- html 5 버전임을 알리는 태그 -->
<html>
<head>
<meta charset="UTF-8"> <!-- 언어 체계 표를 설정하는 태그 -->
<title>Insert title here</title>
</head>
<body>
본문
</body>
</html>charset : 표준 문자 세트
기호 종류
: 띄어쓰기
& : &
: 줄바꿈
< : <
> : >
태그 종류
문단
<!-- 자동 줄바꿈. -->
<p> </p>
클릭 가능
<!-- href는 링크 연결. #은 자기 자신 페이지. target은 어떤 방식으로 링크할 것인지 -->
<a href="#" target="_blank"> </a>
제목
<!-- 사이즈별로 1~6까지. -->
<h1> </h1>
줄바꿈
<br>
영역 지정
<div> </div>
일렬 번호 없이 목록 나열
<ul>
<li></li>
</ul>
일렬 번호 목록 나열
<ol>
<li></li>
</ol>
정의 목록 나열
<!-- dt는 제목, dd는 내용. dd에는 자동으로 들여쓰기 적용 -->
<dl>
<dt></dt>
<dd></dd>
</dl>
이미지
<img src="이미지 주소" title="마우스 대면 나오는 이름" width="300" height="200">
<div style="background-image:url('이미지 주소')">
오디오
<!-- src는 소스. autoplay는 자동 재생. controls는 컨트롤 박스. loop은 반복 재생 -->
<audio src ="오디오 주소" autoplay controls loop></audio>
비디오
<video width="320" height="240" controls autopaly>
<source src="비디오 주소" type="video/mp4">
</video>
테이블
<!-- tr은 행. th는 제목 열. td는 열. -->
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
웹페이지 레이아웃 태그
- <header> : 페이지 상단. 로고나 메뉴 표시
- <main> : 페이지의 메인 콘텐츠 표시. 인터넷 익스플로러 12이상만 가능
- <article> : 독립적인 콘텐츠 표시
- <aside> : 페이지 사이드에 들어가는 메뉴나 배너 표시
- <nav> : 각종 메뉴를 표시
- <section> : 페이지 섹션 표시
- <footer> : 페이지 하단. 저작권, 주소, 연락처 표시
Table 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 테이블</title>
<style> /* stylesheet 지정 */
table, tr, th, td{
border : solid 1px black;
padding:8px;
}
</style>
</head>
<body>
<h3>오늘의 날씨</h3>
<table style="border-collapse : collapse">
<thead> <!-- 없어도 됨. 테이블 제목 -->
<tr> <!-- 행(row) -->
<th>지역</th> <!-- td랑 같은 건데 진하게 -->
<th>현재기온</th>
<th>불쾌지수</th>
<th>습도(%)</th>
<th>풍속(m/s)</th>
</tr>
</thead>
<tbody>
<tr> <!-- 행 (row) -->
<td rowspan="2">서울/경기</td> <!-- 열(colum) -->
<td>23</td>
<td>60</td>
<td>80</td>
<td>4.7</td>
</tr>
<tr> <!-- 행(줄) -->
<td>25</td>
<td>60</td>
<td>80</td>
<td>5.0</td>
</tr>
</tbody>
<tfoot> <!-- 없어도 됨. 테이블 캡션 -->
<tr>
<td colspan="5">[표01] 지역별 날씨</td>
</tr>
</tfoot>
</table>
</body>
</html>