태그 종류
모든 태그를 외우고 있기에는 종류가 많고 기본적으로 많이 사용되는 태그만 알고 있고 모르는건 검색을 통해 알아봐도 좋다고 한다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>기본 양식에 있는 태그
- html tag: 웹페이지 시작과 끝을 의미한다.
- head tag: 웹페이지의 상단바를 의미한다 웹페이지는 head와 body로 나누어져있다.
- meta tag: head안에 보이지 않는 정보를 넣는 태그. 닫는 태그가 따로 없다.
- title tag: 웹페이지의 이름을 나타내는 태그이다.
- body tag: 웹페이지의 상단바를 제외한 모든 부분을 의미한다.
<body>
<div class="leftdiv">
<h1>1번</h1>
<p>시작</p>
</div>
<div class="middlediv">
<h1>2번</h1>
<p>중간</p>
</div>
<div class="rightdiv">
<h1>3번</h1>
<p>끝</p>
</div>
</body> - div tag: 블록으로 영역을 나눌때 사용하는 태그이다. 상단 코드와 같이 여러개 hrml을 묶어서 사용가능하다.
- p tag: 문단을 나눌때 사용하는 태그이다.
- h1~6 tag: 제목을 작성할 때 사용하는 태그이다. 1에서 내려갈수록 중요도와 글씨의 크기도 작아진다.
<a href="https://www.naver.com"> 네이버 접속</a>- a tag: 외부사이트를 연결할때 쓰는 태그
<head>
<link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
</head>- link tag: 해당 문서와 외부 소스 사이의 관계를 정의할 때 사용하고 head에서만 사용 가능하다. 보통 외부 스타일 시트를 연결할 때 사용된다.
<body>
<img src="icecream.png" alt="아이스크림 이미지">
</body>- img tag: 이미지를 정의할 때 사용한다. src(이미지 url), alt(이미지로드 실패시 보여주는 텍스트)는 반드시 사용해야 한다.
<span style="background-color:red">spancolor</span>- span tag: div와 다르게 인라인이기 때문에 글자를 취급하는 태그이다.
- script tag: 실행가능한 코드를 웹페이지에 넣기 위해 사용하고 javascript코드를 넣을 때 많이 사용한다.
<ul>
<li>아메리카노</li>
<li>라떼</li>
<li>아포가토</li>
<li>쿠키
<ul>
<li>초코</li>
<li>녹차</li>
<li>모카</li>
</ul>
</li>
</ul>리스트 태그 종류에는 순서가 있는 리스트 순서가 없는 리스트, 메뉴 리스트들이 있다.
- li tag: 리스트에 포함되는 아이템들을 정의할 때 사용한다.
- ul tag: 서가 없는 리스트를 ul태그라고 한다. ul태그 안의 아이템들은 li태그로 사용한다. 화면에는 가운뎃점으로 나온다.
<head>
<style>
body { background-color: orange }
h1 { color: red; }
p { text-decoration: underline; }
</style>
</head>- style tag: style태그는 문서의 스타일 정보를 정의할 때 사용된다. css를 명시하고 있으며 html문서에는 여러개의 style 요소가 있을 수 있다.
<p>
하나씩<br>
알아가봅시다
<p>-
br tag: 줄바꿈을 할 때 사용한다.
-
input tag: 사용자가 수정할 수 있는 텍스트칸을 정의할 때 사용한다. 에디트텍스트라고 볼 수 있다.
-
footer tag: 대부분 사이트의 이용약관이나 회사정보, 고객센터 같은 정보를 정의한다.
-
header tag: 문서나 특정 섹션의 헤더부분을 정의할 때 사용한다.
문서 안의 head태그라고 이해하면 될듯하다.
보통 h1~h6태그를 가지고있고, 로고나 아이콘, 저자정보를 가지고 있을 때도 있다.
이정도는 외우고 시작을 해야 된다고 생각한다. 앞으로 더 공부를 하면서 외워야 된다고 생각이 드는 태그들을 하나씩 추가해 나가 보아야겠다.
ㅇ