1. <a> : 링크(link)
<a> 태그는 href 속성을 사용하여 웹페이지나 파일, 동영상, 이미지 등의 링크를 걸 수 있습니다. 동영상 플레이어가 실행되도록 하거나 그 페이지로 이동하는 등 여러 방식으로 할 수 있습니다.
<a href="값"> 링크를 걸 문장 </a>
href 속성에 #을 넣으면 해당 id를 가진 요소로 이동할 수 있습니다. 다른 문서의 id라면 docName.html#goid 이런 방식으로 파일이름. html#아이디로 하면 이동할 수 있습니다.
target 속성을 사용하여 링크를 열 곳을 지정할 수 있습니다.
target= _self | _blank | _parent | _top
- _self : 기본값으로 현재 페이지에서 링크를 처리합니다.
- _blank : 새 창 또는 새 탭에서 링크를 처리합니다.
- _parent, _top : 웹페이지를 frameset으로 구성했을 때 사용합니다. 추후 다루도록 하겠습니다.
<a href="" download> 링크를 걸 문장 </a>
이렇게 download를 붙이면 링크를 클릭했을 때 다운로드를 하도록 합니다.
2. <ol> <ul> <dl> : 리스트 만들기
<ol> <ul> <dl> 리스트 모두 목록 안에 목록을 넣을 수 있습니다.
2-1. <ol> : Ordered List (순서 있는 목록)
숫자뿐만 아니라 알파벳, 로마자, 라틴어, 그리스어 등으로 바꿀 수 있는데, CSS를 사용하여 지정하는 것을 권장합니다.
<ol> 태그 안에 <li> 태그를 사용하여 목록을 만듭니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style type="text/css">
</style>
</head>
<body>
<h1>ol</h1>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
</body>
</html><ol start="">
<li value="">
- ol start : 시작 번호 지정
- li value : 특정 li의 번호 지정
2-2. <ul> : Unordered List (순서 없는 목록)
목록에 붙는 도형은 CSS로 바꾸는 것을 권장합니다.
<ul> 태그 안에 <li>태그를 사용하여 목록을 만듭니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style type="text/css">
</style>
</head>
<body>
<h1>ul</h1>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>2-3. <dl> : Definition List (정의 목록)
용어와 뜻을 나열할 때 사용합니다.
<dl> 태그 안에 <dt> 태그를 사용하여 용어 목록을 만들고, <dd>를 사용하여 정의를 넣습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style type="text/css">
</style>
</head>
<body>
<h1>ul</h1>
<dl>
<dt>dt1</dt>
<dd>dd1</dd>
<dt>dt2</dt>
<dd>dd2</dd>
<dt>dt3</dt>
<dd>dd3</dd>
</dl>
</body>
</html>3. <table> : 테이블(표) 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style type="text/css">
table {
width:50%;
border: 1px solid;
}
th, td{
border: 1px solid;
}
</style>
</head>
<body>
<table>
<caption>caption</caption>
<thead>
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
</thead>
<tbody>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
<td rowspan="2">td</td>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Table Foot</td>
</tr>
</tfoot>
</table>
</body>
</html>- <table> : 표를 만듭니다. <tr>, <th>, <td> 태그를 사용하여 셀을 그립니다.
- <tr> : 행입니다.
- <th> : 열이나 행의 제목을 표시하는 셀입니다.
- <td> : 내용이 들어가는 셀입니다.
- <thead> <tbody> <tfoot> : 각 열을 구분 지을 수 있습니다. 사용하지 않아도 됩니다.
- colspan : 셀 가로 병합 속성입니다.
- rowspan : 셀 세로 병합 속성입니다.
- caption : 표에 캡션을 붙일 때 사용하는 속성입니다. 기본 위치가 표의 가운데 윗부분이며 캡션 위치는 CSS에서 caption-side 속성으로 지정할 수 있습니다.
