태그
HTML 문서를 구성하고 있는 요소이다. 그리고 태그에는 이름과 속성이 있다. 앞으로 태그에 대해서 학습할 것이다.
<a href="#none"><img src="~~~~~~~~~"
a는 태그 이름인 "앵커태그"
href 는 속성
HTML <a> 태그 : 앵커태그(Anchor)
HTML의 <a> 태그는 현재 웹페이지에서 다른 웹페이지로 하이퍼 링크를 하거나 현재 웹페이지 내의 특정 부분 이동시에 사용합니다.
img도 태그 이름
src는 속성
속성값에는 "쌍따옴표"가 들어간다.
< 배운 태그 목록들 >
<br />
개행해주는 태그
다른 태그는 시작 태그와 종료 태그가 있지만 br 태그는 시작 태그와 종료 태그가 하나에 다 들어있다.
<br> 이라고 써줘도 되지만 원칙은 <br /> 와 같이 끝에 슬러시를 써주는 것
<h1>...</h1>
제목 같은 곳에 사용하는 태그
개행 태그를 따로 넣지 않아도 개행이 된다.
<h1> ~ <h6> 까지 존재한다.
<p> ... </p>
주로 본문에 사용하는 태그
중간에 개행하고 싶으면 br 태그를 넣으면 된다.
<i> .. </i>
이태릭채 -> 글씨가 기울어진다.
<sup> ... </sup>
위에 조그맣게 표시된다.
<ins> ... </ins>
아래에 언더바가 표시된다.
<del> ... </del>
줄 그음
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>
<h7>h7 태그입니다.</h7>
<h10>h10 태그입니다.</h10>
<p>주로 본문에 <br />사용되는 태그로서 단락을 구분합니다.</p>
<p><a href="http://www.google.com">구글 홈페이지</a></p>
<p><i>KOREA</i></p>
<p>KOREA<sup>seoul</sup></p>
<p><ins>KOREA</ins></p>
<p><del>DELETE</del></p>
</body>
</html>
실행결과
↓
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>태그</p>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
<ol>
<li>서울</li>
<li>부산</li>
<li>충청</li>
<li>경기</li>
<li>전라</li>
</ol>
<p>
<ol>
<li><a href="http://www.google.com" target="_blank">google</a></li>
<li><a href="http://www.naver.com" target="_self">naver</a></li>
</ol>
</p>
</body>
</html>
target 속성값
target 부분에서 "_blank" 는 기존의 창은 그대로 두고 새로운 창을 여는 것이고 "_self" 는 기존의 창을 새로운 창으로 비꾸는 것이다.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>메뉴 리스트</dt>
<dd>menu1</dd>
<dd>menu2</dd>
<dd>menu3</dd>
<dd>menu4</dd>
<dd>menu5</dd>
<dt>지역 리스트</dt>
<dd>서울</dd>
<dd>경기</dd>
<dd>충청</dd>
<dd>경상</dd>
<dd>전라</dd>
</dl>
</body>
</html>
<dl> 태그 안에다가 <dt> 제목 태그를 쓰고 <dd> 태그로 리스트를 나열한다.
실행결과
↓
테이블 태그
표 형식의 레이아웃을 만드는 태그로, 예전에는 웹사이트의 전체적인 레이아웃을 만들었으나 현재는 사용빈도가 많이 줄었다고 한다.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
</body>
</html>
<tr>태그는 행을 만들어주는 태그이다.
<td>태그는 열을 만들어주는 태그이다.
table 태그는 반드시 한개 이상의 <tr>, <td> 태그가 있어야 한다.
실행결과
↓
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td colspan="2">열 합치기</td>
<td>2행 3열</td>
</tr>
</table>
</body>
</html>
열 합치기 속성은 colspan 이다.
실행결과
↓
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">행 합치기</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
</body>
</html>
행 합치기 속성은 rowspan 이다.
실행결과
↓
※ 테이블 태그는 거의 사용하지 않으나 로그인 폼 같은 곳에서 간혹 사용할 때가 있다고 한다.
이미지 태그
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="image/mumin1.gif" alt="무민 이미지" />
<img src="image/mumin2.gif" alt="무민 이미지" width="500" />
</body>
</html>
alt 속성은 이미지가 없을 경우 표시해주는 글자 표현이다.
width 속성으로 사이즈를 지정해줄 수 있으나 현재는 그렇게 많이 사용하지 않으며 css 로 조정을 해준다.
사운드를 출력하는 태그 - audio
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<audio src="sound/MP3 001.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
</body>
</html>
controls 는 재생 이미지를 출력할 것인지, autoplay 속성은 자동으로 재생이 되게 할 것인지, loop 속성은 반복적으로 재생이 될 것인지 결정해주는 태그이다. (default 값은 한번 재생)
속성을 이미지 출력도 안하고 자동으로 재생도 안되게 하고 반복적으로 재생도 안하고 싶으면 저 속성을 입력하지 않으면 된다.
예제 1
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="300">
<tr>
<td>
<h1>주간 히트 노래</h1>
<ol>
<li><img src="#" alt="이미지1" /><a href="#">어머님이 누구니</a></li>
<li><img src="#" alt="이미지2" /><a href="#">한번 더 말해줘</a></li>
<li><img src="#" alt="이미지3" /><a href="#">다른 남자 말고 너</a></li>
<li><img src="#" alt="이미지4" /><a href="#">모두가 내 발아래</a></li>
</ol>
<p><audio src="#" controls="controls" autoplay="autoplay"></audio></p>
</td>
</tr>
</table>
</body>
</html>
실행결과
↓
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - 반응 선택자, 상태 선택자, 구조 선택자 (0) | 2021.09.19 |
|---|---|
| CSS - tag, id, class 선택자, 속성 선택자, 후손 및 자손 선택자 등 (0) | 2021.09.19 |
| HTML 비디오 태그, 폼 태그, 시멘틱 태그 (0) | 2021.09.17 |
| flexbox에 대하여 (0) | 2020.05.15 |
| display: inline-block; (1) | 2020.04.27 |