1. 많이 쓰이는 HTML 태그
웹 개발을 공부할려고 하면 HTML부터 공부하는 사람이 많습니다. 그래서 처음에 책을 전부 읽거나, 강의 전부 들어야 한다고 생각하는데, 그럴 필요없습니다. 그리고 이렇게 공부해도 시간지나면 까먹습니다. 기본적이고, 많이 쓰는 것만 알고있고, 필요한게 있을 떄마다 검색해서 익히면 됩니다.
Advanced Web Ranking HTML Study
해당 사이트를 통해 많이 쓰이는 HTML 태그들을 확인할 수 있습니다. 여기서 자주 쓰인다는 태그들 정도만 알아도 됩니다.
2. DOCTYPE
1<!doctype html>
이 문서가 HTML5라고 선언
3. 여는 태그, 닫는 태그
1<태그>내용</태그>
태그는 기본적으로 여는 태그와 닫는 태그로 이루어져 있다.
간혹 닫는 태그가 따로 없는 태그들도 있다.
1<html>2<head></head>3<body></body>4</html>
태그들은 모두 html 태그 안에 들어가 있다. html 태그 안에는 크게 head와 body 태그로 나뉜다.
head에 들어가는 태그는 문서의 정보를 뜻하므로 화면상에 보이지 않는다.body태그 안에 들어간 내용만 화면상에 보인다.
4. head 에서 쓰이는 태그
4.1 title
1<title>Document</title>
title 태그는 문서의 제목이다. 웹 브라우저의 상단 탭에 표시된다.
1<태그 속성="값"></태그>
태그에는 여러 속성들이 있고, 속성에는 정해져 있거나 정해져 있지 않은 값들이 들어간다.
4.2 meta
1<meta charset="UTF-8" />2<meta http-equiv="X-UA-Compatible" content="IE=edge" />3<meta name="viewport" content="width=device-width, initial-scale=1.0" />
meta 태그를 사용할 때 이 세 가지는 거의 모든 HTML 파일에 들어간다고 보면 되는데
- 첫 번째는 웹 문서의 인코딩 방식을 세계 표준 인코딩 방식인 “UTF-8”로 지정한다는 의미이다.
- 두 번째는 사용자가 익스플로러를 이용한다면 최신 버전인 엣지로 화면을 보여주는 기능이다.
- 세 번째는 디바이스 종류별로 화면에 출력할 방식을 지정한다.
- viewport를 지정하면 반응형 웹 페이지 제작 시 모바일 화면에 대해 설정할 수 있다.
여기까지가 head에 들어가는 기본적인 태그들인데, 사실 VSCode를 사용한다면 ! + Enter만 하면 된다.
5. body 에서 쓰이는 태그
div 태그는 콘텐츠를 그룹화시키는 태그로 body 태그 내에서 가장 많이 쓰인다.
5.1 div
1<div id="header"></div>2<div id="nav"></div>3<div id="footer"></div>
이런 식으로 고유의 값을 지정하는 id 속성을 사용해서 div로 구분 짓는다. 물론, 시맨틱 태그가 나오기 전까지는! 지금은 이렇게 사용하면 안된다.
5.2 header, nav, footer
1<header></header>2<nav></nav>3<footer></footer>
header 태그는 머리말,nav 태그는 메뉴,footer 태그는 꼬리말 영역이다.
5.3 section, article
1<section></section>2<article></article>
그 외에 시맨틱 태그로는 section, article도 같이 많이 쓰는 편이다.
section 태그는 특정 영역을 그룹화할 때,article 태그는 개별 콘텐츠를 담을 때 사용한다.
6. 텍스트 관련 태그
6.1 heading
1<h1>제목1</h1>2<h2>제목2</h2>3<h3>제목3</h3>4<h4>제목4</h4>5<h5>제목5</h5>6<h6>제목6</h6>
h1~h6 태그들은 문서의 제목을 중요도에 따라 사용한다. 숫자가 커질수록 글자 크기도 작아진다.
6.2 p
1<p>문단</p>
p 태그는 여러 개의 문장을 문단으로 구분할 때 사용한다.
6.3 a
1<a href="URL주소" target="blank">텍스트</a>
가장 많이 사용하는 a 태그는 href 속성에 URL 주소를 담아 해당 페이지로 이동하는 링크를 설정한다.
target=“blank”를 추가하면 새로운 탭을 열어서 해당 페이지로 이동한다.
6.4 span
1<span></span>
앞서 설명한 a 태그도 인라인 요소 태그인데 링크 외에 인라인 요소를 넣고 싶을 때 사용한다. 인라인 요소는 앞서 다른 태그들과 달리 줄바꿈이 일어나지 않는다.
7. 메뉴에서 많이 쓰이는 목록 태그
7.1 ul, li
1<ul>2<li>목록</li>3<li>목록</li>4</ul>
ul 태그는 순서가 없는 메뉴를 목록으로 만들 때 사용한다. 각각의 항목들은 li 태그를 사용한다. 순서가 있는 목록을 만들 때는 ul 대신 ol 태그를 사용한다.
8. 로그인 및 회원가입 화면을 만들 때
로그인 및 회원가입 화면을 만들 때! 검색 기능을 만들 때! 등등 사용자가 입력한 값을 서버에 보낼 때 사용하는 태그들이 있다.
8.1 form
1<form action=""></form>
form 태그 안에 있는 폼 요소들의 값을 전송 버튼을 클릭할 시 서버에 전송한다. action 속성에는 보낼 서버 주소, method 속성에는 전송 방식을 지정한다.
8.2 input
1<input type="text" />
input 태그는 type 속성 값을 다르게 지정하여 다양한 입력 형태로 만들 수 있다. 가장 많이 사용하는 text부터 password, checkbox, radio, file, date, submit 등이 있다.
9. 멀티미디어
멀티미디어에 해당하는 자료들을 화면에 보일 수 있도록 하는 태그들을 알아본다.
9.1 img
1<img src="이미지 경로" />
img 태그는 이미지를 넣는 태그다. src 속성에 이미지 파일의 경로를 지정하면 해당 이미지가 화면에 보인다.
9.2 iframe
1<iframe src="" frameborder="0"></iframe>
동영상을 넣을 때 사용하는 video 태그도 있지만, 사실 유튜브 영상이 더 많이 사용되는 편이라 iframe 태그를 많이 사용한다.
10. Font Awesome 아이콘
Font Awesome은 많이 사용하는 곳인데 사용법은 JS만 연결하고 원하는 아이콘을 검색해서 i 태그를 가져다가 붙이면 끝!
10.1 script
1<script src="https://kit.fontawesome.com/4602e82315.js" crossorigin="anonymous"></script>
참고로 스크립트 태그는 자바스크립트 파일와 연결할 때 사용한다.
10.2 i
1<i class="fa-solid fa-bars"></i>
Font Awesome에서 원하는 아이콘을 검색해서 해당 태그처럼 i 태그를 그대로 사용하면 된다.
10.3 link
1<link rel="stylesheet" href="" />
CSS 과정에서 설명하려고 했지만 잠깐 언급하자면, CSS 파일은 link 태그로 연결한다.
1<link rel="shortcut icon" href="이미지 경로" />
link 태그는 위와 같이 파비콘을 지정할 때도 사용할 수 있다.