๐html?
: ํ์ดํผํ ์คํธ ๋งํฌ์ ์ธ์ด (HyperText Markup Language)
- ๋ธ๋ผ์ฐ์ ์์ ์คํ ๊ฐ๋ฅํ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ํ์ผ
- ๊ตฌ์กฐ์ ์ผ๋ก ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ ์นํ์ด์ง๋ฅผ ๋ง๋ ๋ค.
<!DOCTYPE html>
<!--https://developer.mozilla.org/ko/docs/Web/HTML-->
<!--head๋ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ ์ ๋ณด๊ฐ ์๊ณ , ๋ฉํ ๋ฐ์ดํฐ๋ง ์์-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<!--์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ ๊ฐ์ฅ ์ต์์ ์ปจํ
์ด๋-->
<body>
<h1>Heading1</h1>
<h2>Heading2</h2>
<button>Click me!</button>
</body>
</html>- ํ๊ทธ๋ box or item ๋๊ฐ์ง๋ก ๋๋๋ค.
์ฌ์ฉ์๊ฐ ๋ณผ ์ ์๋ item / section์ ๋๋๋ ๋ณด์ด์ง ์๋ box (CSS๋ฅผ ์ด์ฉํด์ box๋ฅผ ๊พธ๋ฐ ์ ์๋ค.)
<!DOCTYPE html>
<!--https://developer.mozilla.org/ko/docs/Web/HTML-->
<!--head๋ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ ์ ๋ณด๊ฐ ์๊ณ , ๋ฉํ ๋ฐ์ดํฐ๋ง ์์-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<!--์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ ๊ฐ์ฅ ์ต์์ ์ปจํ
์ด๋-->
<body>
<h1>Heading1</h1>
<h2>Heading2</h2>
<button>Click me!</button>
<!--Box vs Item-->
<header></header>
<footer></footer>
<section></section>
<div></div>
<span></span>
<!--item-->
<h1>hi</h1>
<button></button>
<!-- a -->
<a href="https://google.com" target=_blank>Click</a>
<p>This is a sentence. <b>That</b>is..</p>
<!--span์ inline-->
<p>This is a sentence. <span>That</span>is..</p>
<!--div์ block level-->
<p>This is a sentence. <div>That</div>is..</p>
<!--ol, ul, li -->
<ol type="i" reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>Hello</li>
<li></li>
<li></li>
</ul>
<!-- input -->
<label for="input_name">Name: </label>
<input id="input_name" type="password">
</body>
</html>ํฌ๋กฌ์์ ctrl+shift+i ==> developer tool
FE Programmer