[HTML] 기본 태그
html 에서 가장 자주 사용되는 태그에 대해 공부합니다.
HTML이란?
- 웹 브라우져가 읽을 수 있는 언어이다.
- 각각의 태그(tag)로 구성되어 있다.
- Standard Tag는 기본 HTML 태그이다.
- 웹이 표시하는 표시용이다.
- 사용자 지정 tag(XML)이 있다.
- 데이터를 사용할 때 사용하는 태그이다.
주석문
<!-- 이것은 주석문 입니다. -->
<!-- 실제 코드에는 표시가 되지 않습니다. -->
기본 규칙
<태그명> </태그명>- 태그의 시작과 끝이 있다.
- standard tag 와 xml tag 모두 동일한 규칙을 갖는다.
head Tag
<head> </head><html> </html>태그 바로 뒤에 온다.- 파일에 대한 기본적인 설정을 포함한다.
- 선언이나 초기화하는 코드가 들어간다.
- CSS, javascript 코드를 넣거나 임포트하는 코드를 넣는다.
h1 Tag
- h는 heading 의 약자로 머릿말 을 나타낸다.
<h1>h1 입니다.</h1>
<h2>h2 입니다.</h2>
<h3>h3 입니다.</h3>
<h4>h4 입니다.</h4>
<h5>h5 입니다.</h5>
<h6>h6 입니다.</h6>
p Tag
- paragraph의 약자이다.
- 하나의 단락을 나타낸다.
<p>
안녕하세요.
저는 Parker입니다.
나이는 25살 입니다.
</p>
br Tag
- break 의 약자이다.
- 태그가 있는 위치에서 띄어쓰기를 할 수 있다.
안녕하세요. <br> Parker입니다.
안녕하세요.
Parker입니다.
pre Tag
- 소스코드에서 보이는 데로 띄워준다.
<pre>
안
녕하세
요오?
.
</pre>
안
녕하세
요오?
.
hr Tag
- 라인을 삽입하는 코드
<hr/>코드 위치에 줄을 삽입한다.- 닫는 코드가 존재하지 않는다.
bold Tag
- 특정 글자에 bold 처리를 한다.
이것은 <b>bold 글씨체 입니다.!!!</b>
이것은 <strong> strong 글씨체 입니다!!! </strong>
i Tag
- 특정 글자를 italic 체로 만든다.
이것은 <i>italic 글씨체 입니다.!!!</i>
em Tag
- 특정 글자를 강조합니다.
이것은 <em>강조</em> 글씨체 입니다!!!
mark Tag
- 특정 글자를 마킹합니다. (형광펜 처리)
mark 태그는 글자를 <mark>마킹 처리할 수 있습니다!!!!</mark>
del Tag
- 특정 글자에 삭제 처리를 할 수 있습니다.
이 글자는 <del>삭제 되었습니다.</del>
sub Tag
- 아래 첨자를 나타낼 수 있습니다.
이 글자는 <sub>아래첨자를</sub> 나타냅니다.
sup Tag
- 위 첨자를 나타낼 수 있습니다.
이 글자는 <sup>아래첨자를</sup> 나타냅니다.
font Tag
- 폰트에 대한 설정을 할 수 있습니다.
- html5에서는 더이상 지원하지 않는다.
<font size="4" color="red">4사이즈의 빨간색 폰트로 글씨를 표시합니다. </font>
<font size="3">default 크기</font>
div Tag
- 특정 코드를 하나의 묶음 처리를 할 수 있다.
- 범위를 묶어 특정 설정을 적용할 수 있다.
- div 안에 있는 모든 태그를 오른쪽 정렬한다.
<p>저는 div 태그 밖에 있는 p태그 입니다.</p>
<div align="right">
<p>저는 div 태그 안에 있는 p태그 입니다.</p>
<font size="3">저는 div 태그 안에 있는 font 태그 입니다.</font>
</div>
a Tag (anchor Tag)
- url로 이동이 가능하게 연결해주는 코드
<a href="https://www.google.co.kr">구글로 이동!</a>
<a href="index2.html">index2로 이동!</a> <!-- index2.html 파일로 이동할 수 있다. -->
- 현재창에서 id값을 통해 이동이 가능하다.
<p>
<!-- chap4 라는 id값을 갖는 태그로 이동한다. -->
<a href="#chap4">Chatper4로 이동</a>
</p>
<div class="chat" id="chap1">
<p>this is chap1</p>
</div>
<div class="chat" id="chap2">
<p>this is chap2</p>
</div>
<div class="chat" id="chap3">
<p>this is chap3</p>
</div>
<!-- 이곳으로 이동한다. -->
<div class="chat" id="chap4">
<p>this is chap4</p>
</div>
<div class="chat" id="chap5">
<p>this is chap5</p>
</div>
<div class="chat" id="chap6">
<p>this is chap6</p>
</div>
img Tag
- 이미지를 삽입할 수 있는 코드
- src (source) 이미지가 있는 상대 경로 를 설정한다.
- 동일한 폴더 내부에 사진이 존재해야 한다.
- alt (alternative) 이미지가 없을 경우 “이미지 없음” 이 출력된다.
<!-- img tag -->
<img src="picture.png" alt="이미지 없음">
<!-- img 에 사이즈를 지정할 수 있습니다. -->
<img src="picture.png" alt="이미지 없음" width="200" height="200">
<!-- img 에 테두리를 지정할 수 있습니다. -->
<img src="picture.png" alt="이미지 없음" border="1px solid black">
<!-- img 를 정렬할 수 있다. -->
<img src="picture.png" alt="이미지 없음" align="left">
<br clear="left">
<img src="picture.png" alt="이미지 없음" align="right">
<br clear="right">
- img Tag는 a 태그와 함께 사용할 수 있다.
<a href="http://www.google.co.kr" target="_blank">
<img src="picture.png" alt="이미지 없음" width="200" height="200">
</a>
table Tag
- table을 생성할 수 있다.
- table은 행(Table Row)과 열(Table Data)를 갖는다.
- th : 열의 이름 (table header)
- tr : 행
- td : 열
<table style="width: 100%;" border="2">
<tr>
<th>hello head</th>
<th>world head</th>
<th>!!!! head</th>
</tr>
<tr>
<td>hello</td>
<td>world</td>
<td>!!!!</td>
</tr>
<tr>
<td>hello</td>
<td>world</td>
<td>!!!!</td>
</tr>
<tr>
<td>hello</td>
<td>world</td>
<td>!!!!</td>
</tr>
</table>
- style Tag 로 table을 꾸밀 수 있다.
<head>
<style type="text/css">
table, tr{
border:1px solid blue;
/*border-collapse: collapse; /* 단선으로 */
background-color: #ff0000;
}
</style>
</head>
<body>
<table border="1" style="width: 100%">
<tr>
<td>홍</td>
<td>길동</td>
<td>24</td>
</tr>
<tr>
<td>일</td>
<td>지매</td>
<td>22</td>
</tr>
<tr>
<td>임</td>
<td>꺽정</td>
<td>28</td>
</tr>
</table>
</body>
style Tag ( attribute로 속성값을 의미한다. )
- css 코드가 들어간다.
- 각 태그에 style을 지정할 수 있다.
<body style="background:gray;">
<h1 style="background:yellow;">This is colorful h1 tag!!!</h1>
<h2 style="font-family:verdana;">Style tag can change font style!!!</h2>
<h3 style="color:white;">Change font color</h3>
<h4 style="text-align:center;">가운데 정렬</h4>
</body>
<pre style="font-weight:200%;">
pre 태크 안에 있는 모든 글의 크기를 2배로 키운다.
style 속성은 다른 태그의 속성을 지정할 수 있다.
</pre>
<p style="color:red; font-family:verdana; font-weight:15px;">
여러개의 style 속성을 한번에 지정하는 것도 가능하다.
</p>
- style tag를 사용할 수 있다.
- 위치는 head Tag 내부에 들어간다.
<!DOCTYPE html>
<html>
<head>
<style media="screen">
.hello {
font-family: verdana;
size: 15px;
}
</style>
</head>
<body>
<p class="hello">
안녕하세요.
verdana 15px font 를 사용하는 p 태그입니다.
</p>
</body>
</html>출처 : https://qkrrudtjr954.github.io/html/2018/01/15/basic-html-tag.html
'HTML > HTML이론' 카테고리의 다른 글
| (생활코딩-2) (0) | 2018.11.22 |
|---|---|
| [HTML] 기본 태그3 (0) | 2018.07.29 |
| [HTML] 기본 태그2 (0) | 2018.07.29 |
