HTML 태그 정리
w3school 사이트의 HTML 태그 부분을 정리하였습니다!
오역/ 오타/ 틀린 내용이 있을 수 있습니다.
잘못된 부분 알려주시면 수정하겠습니다!
사이트 주소 : https://www.w3schools.com/TAGS/ref_byfunc.asp
HTML Reference
www.w3schools.com
1. 기본적인 HTML 태그!
<!DOCTYPE> : 모든 페이지가 해당 태그로 시작되어서 HTML 페이지라는 것을 알려줌.
<html> : HTML 태그 범위 지정해준다. html 태그 안에 <head>랑 <body> 태그가 있다
<head> : Head 범위 지정- 페이지의 정보랑 메타데이터를 포함
- 그 정보로는 title, style, base, link, meta, script, noscript 등이 있다.
- 예: style의 경우 head에서 미리 지정해주면 body에서 사용할 때 따로 지정 안 해줘도 지정한 값으로 사용됨.
<body> : Body 범위 지정
<title> : 페이지 제목 정하기
<h1> ~ <h6> : 제목을 지정해준다. 숫자가 작을수록 글자크기가 크고 두께가 두껍다. h1이 글씨 크기가 가장 크고, h6로 갈수록 글씨 크기가 작아진다.
<p> : 페러그래프를 정의한다. 화면에서 일정 크기를 지정해 줄 수 있다.
<hr> : 인용선을 만들어 준다
<br> : 한 줄 띄기
<!--...--> : 주석
[예시 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HI</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<h2>1. Head 부분</h2>
</head>
<body>
<hr><br>
<script src="script.js"></script>
<h2>2. body 부분</h2>
<h1>1) h1 글자</h1>
<h2>2) h2 글자</h2>
<h3>3) h3 글자</h3>
<h4>4) h4 글자</h4>
<h5>5) h5 글자</h5>
<h6>6) h6 글자</h6>
<br>
<!--주석부분-->
</body>
</html>
[코드 실행 결과]
1. Head 부분
2. body 부분
1) h1 글자
2) h2 글자
3) h3 글자
4) h4 글자
5) h5 글자
6) h6 글자
2. 포맷팅
<b> : 두껍게 하기
<i> : 문자 기울게 하기
<u> : 밑줄 긋기
<del> : 삭제
<em> : 강조
<mark> : 하이라이트
<strong> : 중요 텍스트
<blockquote> : 인용구
<code> : 컴퓨터 코드
[예시 코드]
<b> 1. 두껍게 하기</b><br>
<i> 2. 문자 기울게 하기</i><br>
<u> 3. 밑줄 긋기</u><br>
<del> 4. 삭제</del><br>
<em> 5. 강조</em><br>
<mark> 6. 하이라이트</mark><br>
<strong> 7. 중요 텍스트</strong><br>
<blockquote> 8. 인용구</blockquote><br>
<code> 9. 컴퓨터 코드<br>
printf('hello world');</code><br>[코드 실행 결과]
1. 두껍게 하기
2. 문자 기울게 하기
3. 밑줄 긋기
5. 강조
6. 하이라이트
7. 중요 텍스트
8. 인용구
9. 컴퓨터 코드
printf('hello world');
3. 폼과 입력
<form> : 사용자 입력을 위한 HTML 양식
<input> : (한 줄의) 입력 부분
<label> : <input> 요소에 라벨(제목 같은 거)을 정의
<textarea> : 여러 줄의 입력 부분
<button> : 클릭할 수 있는 버튼
<select> : 드롭다운 리스트
<optgroup> : 드롭다운 목록에서 관련 옵션 그룹 정의
< option> : 드롭다운 목록에서 옵션을 정의
<fieldset> : form에서 관련 요소를 양식으로 그룹화
<legend> : <filedset> 요소 갭션
<datalist> : 입력 컨트롤에 미리 정의되는 옵션 목록 지정
<output> : 계산 결과
[예시 코드]
<hr>
<form>
<fieldset>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<label for="area"> 사는 곳: </label>
<select name="area" id="area">
<optgroup label="서울">
<option value="seoul">서울 강남구</option>
<option value="seoul">서울 용산구</option>
<option value="seoul">서울 동작구</option>
<option value="seoul">서울 서초구</option>
<option value="seoul">서울 관악구</option>
</optgroup>
<option value="saab">인천</option>
<option value="mercedes">경기</option>
<option value="audi">강원</option>
<option value="audi">충청</option>
</select>
<br><br>
<textarea rows="4" cols="50">자기소개</textarea><br><br>
<input type="submit" value="Submit"><br><br>
<button type="button">Click Me!</button>
</fieldset>
</form>
<hr>
[코드 실행 결과]
4. 이미지/오디오/비디오
<iframe> : iframe 을 삽입
<img> : image를 삽입
** 코드에서는 위에 피츄 사진을 태그로 삽입
[예시 코드]
<!DOCTYPE html>
<html>
<body>
<h4>1. iframe 요소</h4>
<iframe src="https://jennana.tistory.com/category" title="블로그 카테고리" width="750" height="500">
</iframe>
<br>
<h4>2. img 요소</h4>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2eQPP%2FbtrRAC1V7WR%2FnTgWNsaf2E2B7UjG6rl1w1%2Fimg.jpg" alt="Pichu" width="150" height="160">
</body>
</html>
[코드 실행 결과]
1. iframe 요소
2. img 요소
5. 링크
<a> : 하이퍼링크를 링크해줌
<link> : 문서와 외부 리소스 간 관계를 정의 (주로 스타일 시트 연결 시 많이 사용)
<nav> : 내비게이션 링크
* 현재 페이지나 다른 페이지로 링크를 보여주는 구획을 만듦. 메뉴, 목차 등을 만들 때 활용. <nav> 태그를 쓸 때 <ul>, <li> 태그를 사용하는 게 일반적이라고 함
[예시 코드]
<!DOCTYPE html>
<html>
<body>
<h4>a href</h4>
<a href="https://jennana.tistory.com"> 제나나's 티스토리</a>
<h4>nav</h4>
<nav>
<ul>
<li><a href="https://jennana.tistory.com/category/IT%20%EA%B4%80%EB%A0%A8"> IT 관련</a></li>
<li><a href="https://jennana.tistory.com/category/Security/IT%20%EB%B0%8F%20%EB%B3%B4%EC%95%88%20%EB%89%B4%EC%8A%A4"> IT 및 보안 뉴스</a></li>
<li><a href="https://jennana.tistory.com/category/Security/IT%20%EB%B0%8F%20%EB%B3%B4%EC%95%88%20%EA%B4%80%EB%A0%A8%20%EB%B3%B4%EA%B3%A0%EC%84%9C"> IT 및 보안 관련 보고서</a></li>
<li><a href="https://jennana.tistory.com/category/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC"> 네트워크</a>
</ul>
</nav>
</body>
</html>
[코드 실행 결과]
a href
제나나's 티스토리nav
6. 리스트
<ul> 순서가 없는 리스트 목록
<li> 목록 아이템
<ol> 순서(숫자)가 있는 리스트 목록
* start='시작 숫자'로 시작하는 숫자를 지정할 수 있음.
<li> 목록 아이템
[예시 코드]
<h4>The ul element(순서 없음)</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<br>
<h4>The ol element(순서 있음)</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<br>
<h5> ※ ol 시작 숫자를 50으로 함.</h5><br>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
[코드 실행 결과]
The ul element(순서 없음)
- Coffee
- Tea
- Milk
The ol element(순서 있음)
- Coffee
- Tea
- Milk
※ ol 시작 숫자를 50으로 함.
- Coffee
- Tea
- Milk
7. 테이블
<table> 테이블 정의
<th> 테이블 헤더 셀(따지고 보면 맨 위 행) 정의하기
<tr> row(열) 정보
<td> column(행) 정보
<caption> 테이블 캡션(제목)
[예시 코드]
<h4>The table element</h4>
<table>
<colgroup>
<col span="2" style="background-color:lightgray">
<col style="background-color:rgba(255, 99, 71, 0.5);">
</colgroup>
<caption>캡션 : 책 리스트</cation>
<tr>
<th>제목</th>
<th>저자</th>
<th>가격</th>
</tr>
<tr>
<td>이기적 유전자</td>
<td>리처드 도킨스</td>
<td>20,000원</td>
</tr>
<tr>
<td> Do it! 점프 투 파이썬</td>
<td>박응용</td>
<td>18,800원</td>
</tr>
<tr>
<td>군중심리</td>
<td>귀스타브 르 봉</td>
<td>12,000원</td>
</tr>
</table>
[코드 실행 결과]
The table element
| 제목 | 저자 | 가격 |
|---|---|---|
| 이기적 유전자 | 리처드 도킨스 | 20,000원 |
| Do it! 점프 투 파이썬 | 박응용 | 18,800원 |
| 군중심리 | 귀스타브 르 봉 | 12,000원 |
8. 스타일 등
<style>: 스타일 정보
<div>, <span>, <section> : 섹션
<header> : 섹션의 헤더
<footer> : 섹션의 푸터
<main> : 문서에서 가장 중심 내용
<aside> : 페이지 콘텐츠 이외의 콘텐츠를 정의
<details> : 내용을 숨길 수길 수 있음
<summary> : <details>에 대한 제목으로 summary에서 설정한 제목을 누르면, 숨겨져 있던 내용을 볼 수 있음.
[예시 코드]
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 5px outset rgb(204, 204, 255);
background-color: rgb(255, 204, 204);
text-align: center;
}
</style>
</head>
<body>
<h1>div 요소</h1>
<div class="myDiv">
<h4> div 요소에 대한 head</h4>
<p>div에 대한 내용</p>
</div>
<br>
<p> div요소 밖의 텍스트</p>
<br><hr>
<p>span 태그를 활용해서 한 글자만 <span style="color:blue;font-weight:bold">파랑</span> 으로 바꿀 수 있고, <span style="color:darkolivegreen;font-weight:bold">다크 그린</span> 색도 가능.</p>
<br>
<h1>summary 요소</h1>
<details>
<summary>추가 내용을 보고싶으면 누르세요.</summary>
<p>더보기 같이 사용할 수 있음.<br>그림도 삽입:
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2eQPP%2FbtrRAC1V7WR%2FnTgWNsaf2E2B7UjG6rl1w1%2Fimg.jpg" alt="pichu" width="150" height="160">
</p>
</details>
</body>
</html>
[코드 실행 결과]
div 요소
div 요소에 대한 head
div에 대한 내용
div요소 밖의 텍스트
span 태그를 활용해서 한 글자만 파랑 으로 바꿀 수 있고, 다크 그린 색도 가능.
summary 요소
추가 내용을 보고싶으면 누르세요.
더보기 같이 사용할 수 있음.
그림도 삽입:
9. 프로그래밍
<script> : 클라이언트 사이드 스크립트 정의
<embed> : 외부 애플리케이션에 대한 컨테이너를 정의
<object> : 임베디드 개체 정의
<param> : 개체에 대한 매개변수 정의
끝.
