title
문서의 제목을 정의. 브라우저 탭에 표시된다.
<head>
<title>제목</title>
</head>style
HTML문서를 위한 style정보를 정의한다. CSS관련 정보로 별도로 html파일에서도 css파일로 정의가능하다.
<head>
<style>
body{
backgroun-color: yellow;
color: blue;
}
</style>
</head>link
외부 리소스와 연계 정보를 정의한다. HTML과 외부 CSS등의 파일과 연계할 때 사용된다.
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>h1, h2, h3, h4, h5
주로 제목과 같은 텍스트를 보여줄 때 사용하는 태그로써, h1~h5까지 있으며 숫자가 올라갈수로 글자 크기가 작아진다.
<body>
<h5>자기소개</h5>
<h1>오늘의 수업 내용</h1>
<h2>중요한 태그들..</h2>
</body>span
텍스트를 넣을 때 주로 사용되는 태그. 자동 개행이 되지 않는다.
<span>이름: 김개발</span>
<span>직업: 프론트앤드 개발자</span>p
<span>태그와 비슷하게 텍스트를 기입할 때 사용되나, 다른점으로는 자동으로 개행이 되어 다음줄로 출력된다.
<p>tag들 파헤치기!!</p>
<p>아자!!</p>br
강제 개행을 한다. 종료태그가 없다.
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>pre
형식화 된 text를 지정한다. 그렇기 때문에 해당 rtext를 그대로 브라우저에 출력한다.
<!DOCTYPE html>
<html>
<body>
<p>HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.</p>
<pre>
var myArray = [];
console.log(myArray.length); // 0
myArray[1000] = true; // [ , , ... , , true ]
console.log(myArray.length); // 1001
console.log(myArray[0]); // undefined
</pre>
</body>
</html>hr
수평줄을 삽입하여 개행한다.
<!DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>q
짧은 인용문을 지정한다.
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>blockquote
<q>태그와 비슷하지만 이 태그는 긴 인용문 블록을 지정하는 태그이다. 브라우저에서는blockquote엘리먼트를 들여쓰기한다. 또한, CSS를 활용하여 다양한 style 적용이 가능하다.
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</blockquote>
</body>
</html>a
클릭시 화면 이동. 속성으로
href에 이동할 주소를 기입한다.
<a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">div 태그?</a>div
여러 태그들을 묶어서 섹션을 나눌 때 사용한다.
div 사용 이유
- 비슷한 부분끼리 그룹지어주기 위해 사용된다.
- 디자인에 맞게 레이아웃을 분리하기 위해 사용된다.
- 각
<div>에class나id같은 속성을 부여하여 css스타일을 적용하기 위해 사용된다.
