[HTML] 1. 태그 종류 (1)
HTML은 홈페이지의 기본 뼈대를 작성하는 언어이다.
다른 프로그래밍 언어와 다르게 로직을 구성할 수 없어서 매우 쉽다.
몇가지 태그만 외우면 된다. 간단하다.
<!-- 주석-->
HTML
- 웹 페이지를 만들기 위한 표준 마크업 언어
- 웹 페이지의 구조(view)를 나타냄
- 요소들 (elements)로 이루어짐
- html 요소들은 태그(<>)로 이루어져 있음
- 선언 타입 : <tagname>content</tagname>
- 주로 시작 태그와 종료 태그의 쌍으로 이루어지거나 종료 태그가 없는 단일 태그도 존재
- 태그는 대소문자를 구분하지 않음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나의 첫 웹 페이지</title>
</head>
<body>
나의 첫 웹 페이지 본문입니다.
</body>
</html>
제목 태그 h1 ~ h6
1. 숫자가 작아야 크기가 크다.
2. 블록 레벨 태그이다. (한줄 전체를 차지한다.)
3. <h7>태그 이상은 없다.(사용해도 적용 x)
(머릿글이기 때문에 글자가 굵게 나온다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>This is h2</h2>
<h3>This is h2</h3>
<h4>This is h2</h4>
<h5>This is h2</h5>
<h6>This is h2</h6>
</body>
</html>
문단 태그(paragraph tag)
1. 보이는 대로 표시하지 않는다. (공백은 하나만 인정, 줄 바꿈은 인정되지 않음)
2. 문단을 만들 때 사용. (문단이 끝나면 자동으로 줄 바꿈)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>여기가 첫 번째 문단</p>
<p>여기가 두 번째 문단</p>
<p>여기가 세 번째 문단</p>
<p>여기가
네 번째 문단</p>
</body>
</html>
pre 태그
1. 보이는 대로 표시 (공백 및 줄 바꿈 포함)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>여기가 첫 번째 문단</pre>
<pre>여기가 두 번째 문단</pre>
<pre>여기가 세 번째 문단</pre>
<pre>여기가
네 번째 문단</pre>
</body>
</html>
줄 바꿈 태그
1. 사용한 만큼 줄이 바뀜
2. 닫는 태그가 없는 나홀로 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>여기가 첫 번째 문단</p>
<p></p> <!-- 비어있는 p 태그는 의미가 없다. (줄 바꿈 x) -->
<p></p>
<p></p>
<p>여기가 두 번째 문단</p>
<br> <!-- 줄 바꿈 -->
<br/> <!-- 단일 태그 -->
<p>여기가 세 번째 문단</p>
</body>
</html>
공백문자
공백 문자 (스페이스바 역할)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>이 곳은 첫 번째 문단</p>
</body>
</html>
수평선 줄긋기 태그
<hr>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>여기는 첫 번째 문단</p>
<hr> <!-- 수평선(단일 태그) -->
<p> 여기는 두 번째 문단</p>
</body>
</html>
formatting 태그
1. <b></b> : bold text, 굵은 글씨
2. <i></i> : italic text, 기울임꼴
3. <sup></sup> : super script, 윗 첨자 (제곱근)
4. <sub></sub> : sub script, 아랫 첨자
5. <ins></ins> : insert text, 밑줄 생김
6. <del></del> : delete text, 취소선 생김
*7. <div></div> : Group text, 블록레벨, css 적용을 위해 사용
*8. <span></span> : Group text, 인라인레벨, css 적용을 위해 사용
* 블록레벨 : 글자 수 상관없이 한 줄 전체
* 인라인레벨 : 블록레벨 안에 포함되는 문자열
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>이 곳은 <b>첫 번째</b> 문단</p>
<p>이 곳은 <i>두 번째</i> 문단</p>
<p>이 곳은 <sup>세 번째</sup> 문단</p>
<p>이 곳은 <sub>네 번째</sub> 문단</p>
<p>이 곳은 <ins>다섯 번째</ins> 문단</p>
<p>이 곳은 <del>여섯 번째</del> 문단</p>
<div align = "right">이 곳은 일곱번째 문단</div>
<p>이 곳은 <span style = "color : pink">여덟번째</span> 문단</p>
<p>이 곳은 <span align = "right">아홉번째</span> 문단</p>
<!-- 인라인 이기 때문에 오른쪽 정렬이 되지 않는다. -->
<!-- span과 div의 차이 -->
<span>fist span</span><span> scond span</span>
<div>first div</div><div> second div</div>
</body>
</html>
기타 특수문자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>특수 문자</h1>
<h3>공백 문자 : </h3>
<h3>큰따옴표 : "</h3>
<h4>앰퍼샌드 : &</h4>
<!-- 비교 표현식 -->
<h3>작다 : <</h3> <!-- little -->
<h3>작거나 같다 : ≤</h3> <!-- little or equal -->
<h3>크다 : ></h3> <!-- greater -->
<h3>크거나 같다 : ≥</h3> <!-- greater or equal -->
</body>
</html>
ul 목록 태그 (unordered list)
1. 순서가 없는 태그
2. 목록을 나열하여 메뉴를 만드는 용도로 사용
3. type 속성
1)type = "disc" : ● , default 값
2)type = "circle" : ○
3)type = "square" : ■
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>< 순서없는 태그 목록></h1>
<ul type="disc">
<li>호랑이</li>
<li>사자</li>
<li>뱀</li>
<li>고양이</li>
<li>강아지</li>
</ul>
<hr>
<ul type="circle">
<li>C</li>
<li>JAVA</li>
<li>DB</li>
<li>Python</li>
<li>Spring</li>
</ul>
<hr>
<ul style = "list-style-type: square; color: maroon;">
<li>안양</li>
<li>의왕</li>
<li>군포</li>
<li>수원</li>
<li>시흥</li>
</ul>
</body>
</html>
다음으로 계속