💡
Hypertext Markup Language (HTML)
Makrup Language : system for annotating a document in a way that is syntactically distinguishable from the text.
어느정도 태그를 효과적으로 작성한 것!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
</body>
</html>💡
처음에 선언하고, 문서는 head와 body로 이루어져 있음.
HTML elements reference
This page lists all the HTML elements, which are created using tags.
💡
Box와 Item으로 나누어 져있다.
Box : header, footer, nav, aside, main, section, article, div, span, form
ITEM : a, button, input, label, img, video, audio, map, canvas, table
💡
header
——————————————————————————-
nav
————————————————————-
|
|
|
aside | main
|
|
|
————————————————————————————
footer
💡
block은 다음줄
inline은 다음칸
💡
opening tag closing tag
<p>My cat it very grumpy</p>
content
←——————————————>
Element
<p class = "editor-note">My cat is very grumpy</p>
→ Attribute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Box vs Item -->
<header></header>
<section></section>
<div></div>
<span></span>
<!--item -->
<h1></h1>
<button></botton>
</body>
</html>💡
보여지기 때문에 button h1은 아이템!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- a -->
<a href = "https://google.com" target = _blank>Click</a>
</body>
</html>💡
링크를 연결해서 만들수가 있다!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>This is a sentence. <b>That</b> is..</p>
<p>This is a sentence. <span>That</span> is..</p>
<p>This is a sentence. <div>That</div> is..</p>
</body>
</html>💡
This is a sentence. That is..
This is a sentence. That is.. → span은 인라인태그
This is a sentence.
That
is.. → div는 블록 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- al, ul, li -->
<ol type = "i"reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>Hello</li>
<li>unist</li>
<li>guy</li>
</ul>
</body>
</html>💡
ol>li*3 tab → 만들어짐 (ordered list)
ul>li*3 tab →(unordered list)
type을 지정할수도 있 고, 순서도 지정가능하다!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Input -->
<label for = "input_name">Name:</label>
<input ide = "input_name" type = "text">
<br>
<input ide = "input_name" type = "button">
<br>
<input ide = "input_name" type = "checkbox">
<br>
<input ide = "input_name" type = "file">
<br>
<input ide = "input_name" type = "password">
</body>
</html>
반응형
Uploaded by Notion2Tistory v1.1.0