HTML # 1 ์์ฃผ ์ฐ๋ ํ๊ทธ
by JiwonDev<!DOCTYPE html>
์น ๋ธ๋ผ์ฐ์ ์๊ฒ ํด๋น ๋ฌธ์๋ฅผ ์ด๋ค ํ์์ผ๋ก ์ฝ์ด์ผ ํ ์ง ์๋ ค์ฃผ๋ ํํธ์ ๋๋ค.
<html>
์นํ์ด์ง์ ์์๊ณผ ๋, ๋ฃจํธ ํ๊ทธ
๋ชจ๋ ํ๊ทธ๋ค์ html ์์ ์กด์ฌํ๋ค.
<head>
์นํ์ด์ง์ ์ ๋ณด, ๋ฉํ๋ฐ์ดํฐ, ์ธ๋ถ ํ์ผ ๋งํฌ.
๋จ ์๋ฐ์คํฌ๋ฆฝํธ <script> ๋ body ๋ง์ง๋ง ๋ถ๋ถ์ ์ ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์น ๋ธ๋ผ์ฐ์ ๊ฐ ์ฝ๋๋ฅผ ์ฝ๋ค๊ฐ ์คํฌ๋ฆฝํธ๋ฅผ ๋ง๋๋ฉด html DOMํธ๋ฆฌ๊ฐ ๋ณ๊ฒฝ๋ ์ ์์ผ๋ ๋ชจ๋ ์์ ์ ๋ฉ์ถ๊ธฐ ๋๋ฌธ.
<head> - <title>
์น๋ธ๋ผ์ฐ์ ์ ์ ๋ชฉ ํ์์ค์ ๋์ค๋ ์ ๋ชฉ.
<head> - <meta>
๋ฌธ์ ์ธ์ฝ๋ฉ, ์น ํ์ด์ง์ ํ์ํ ๋ชจ๋ ์์ฝ ์ ๋ณด
<head> - <link>
CSS ๋ฑ ์ธ๋ถ ํ์ผ์ ์ฐ๊ฒฐ ํ ๋ ์ฌ์ฉ
<link herf="์ธ๋ถ css ํ์ผ ๊ฒฝ๋ก" rel="stylesheet" type"text/css">
<!-- rel ์ ํ์ผ์ ์์ฑ, type์ ํ์ผ์ ์ ํ(ํ
์คํธ๋ก ๋ css)์ ์๋ฏธํ๋ค.-->
<head> - <style>
html ์ฝ๋ ๋ด์ ์คํ์ผ์ ์ง์ ์ง์ ํ๊ณ ์ถ์ ๋ ์ฌ์ฉ
<body>
๋ธ๋ผ์ฐ์ ์ ์ค์ ๋ก ํ์๋๋ ๋ด์ฉ
<body> - <br>
๋จ์ ์ค ๋ฐ๊ฟ ํ๊ทธ, ๋ซ๋ ํ๊ทธ</br>์ด ์์ด๋ ๋๋ค.
<body> - <p>
๋ฌธ๋จ์ ๋๋๋ ํ๊ทธ, paragraph - ๊ธฐ๋ณธ ์ค๋ฐ๋ + ๋ฌธ๋จ ์ฌ์ด์ ๋น ์ค์ด ๋ค์ด๊ฐ๋ฏ๋ก, ์ค ๋ฐ๋์ด ๋ ๋ฒ ์ผ์ด๋๋ค.
<body> - <div>
division, ๊ตฌ์ญ ํ๊ทธ :: ์ฌ๋ฌ ๋ด์ฉ๋ค์ ๋ฌถ์ด์ผ ํ ๋ ์ฌ์ฉ. ํ๋์ ํ์ด์ง ์์ ๊ตฌ์ญ์ ๋๋๋ ๋ฐ์ค
์ค๋ฐ๋์ด ํ ๋ฒ ์ผ์ด๋๋ฏ๋ก, div์์ญ๊ณผ ๋ฐ๊นฅ๊ณผ์ ์ฌ์ด์ ์ฌ๋ฐฑ์ด ์๋ค.
<body> - <span>
span, ํ ๋ผ :: ์ค์ ๋ฐ๊พธ๊ฑฐ๋ ์์ญ์ ๋๋์ง ์๊ณ ์์ฑ์ ์ง์ ํ๊ณ ์ถ์ ์ผ์ ํ ๋ฒ์๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ ์ฌ์ฉ.
์ค ๋ฐ๋์ด ์ผ์ด๋์ง ์๋๋ค.
<br>, <p>, <div>, <span> ๋น๊ต
brํ๊ทธ๋ ๋จ์ ์ค๋ฐ๊ฟ ํ๊ทธ์ด๋ค. (์คํ์ผ์ ์ง์ ํ ์ ์๋ค)
pํ๊ทธ๋ ์ค๋ฐ๋์ด ํ ๋ฒ ์ผ์ด๋๋, ๋ฌธ๋จ ์ฌ์ด์ ๋น ์ค์ด ๋ค์ด๊ฐ๋ฏ๋ก, ์ค ๋ฐ๋์ด ๋ ๋ฒ ์ผ์ด๋๋ ์
์ด๋ค.
divํ๊ทธ๋ ์ค๋ฐ๋์ด ํ ๋ฒ ์ผ์ด๋๋ฏ๋ก, div์์ญ๊ณผ ๋ฐ๊นฅ๊ณผ์ ์ฌ์ด์ ์ฌ๋ฐฑ์ด ์๋ค.
spanํ๊ทธ๋ ์ค๋ฐ๋์ด ์ผ์ด๋์ง ์๋๋ค.
<body> - <a>
archor, ์น ํ์ด์ง, ๊ฐ์ ์ฌ์ดํธ์์ ๋ค๋ฅธ ์์น, ์ธ๋ถ ํ์ดํผ๋งํฌ
<a herf="๊ฒฝ๋ก" title="๋งํฌ์ ๋ํ ์ค๋ช
">
<!-- ์ด๋ ๊ฒ ์ง์ ํ๋ฉด ํ ํ์ด์ง ๋ด์์ ๋งํฌ๋ฅผ ๊ฑธ์ด ์ด๋ ํ ์ ์๋ค.-->
<a id="์ต์ปค ์ด๋ฆ"> ๋ด์ฉ </a>
<a herf="์ต์ปค ์ด๋ฆ">
<body> - <img>
์ด๋ฏธ์ง ์ฝ์ ์ ์ฌ์ฉ
์ง์ ๋ค์ด๋ก๋ ํ ๋ค ํ์ผ๊ฒฝ๋ก๋ฅผ ์ด์ฉํด๋ ๋๊ณ , ์๋๋ฉด ๋ค๋ฅธ ์นํ์ด์ง ๋งํฌ๋ฅผ ๊ฑธ์ด๋ ๋๋ค.
<body> - <ul>,<ol> - <li>
ํญ๋ชฉ์ ๊ฐ์ง ๋ฆฌ์คํธ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ ์ฌ์ฉ.
<ul> ์ ์์๊ฐ ์๋(unordered) ๋ฆฌ์คํธ์ด๊ณ
<ol> ์ ์์๊ฐ ์์ด ๋ฒํธ๊ฐ ๋ถ๋(ordered) ๋ฆฌ์คํธ์ด๋ค.
๋ฆฌ์คํธ์ ๊ฐ ํญ๋ชฉ์ ๋ด์ฉ์ <li> ํ๊ทธ๋ก ๊ตฌ๋ถ ์ง๋๋ค.
<body>
<ol type = "a"> <!-- a,b,c ์์๋ก ๋ฒํธ๊ฐ ๋ถ๋๋ค -->
<li> ํญ๋ชฉ1 </li>
<li> ํญ๋ชฉ2 </li>
</ol>
</body>
<body> - <h1~6>
์ ๋ชฉ ๊ตฌ๋ถ์ฉ ํ๊ทธ
<body> - <input> ์ ๋ ฅ ํผ ํ๊ทธ
* [๋๋ณด๊ธฐ] ํผ ํ๊ทธ์ ๊ณผ์
1. ํผ์ด ์๋ ์นํ์ด์ง๋ฅผ ๋ฐฉ๋ฌธ
2. ํผ ๋ด์ฉ์ ์
๋ ฅ
3. ํผ ์์ ์๋ ๋ฐ์ดํฐ๋ฅผ ์น ์๋ฒ(=์ปดํจํฐ)๋ก ์ ์ก
> GET(๋ฆฌ์์ค ๋ฐ์ดํฐ ์์ฒญ์ฉ)์ผ๋ก ๋ณด๋ด๋ฉด ํผ ๋ฐ์ดํฐ๋ฅผ URL ๋ ๋ถ๋ถ์ ๋ถ์ฌ์ ์ ์ก
> POST(๋ฐ์ดํฐ ์ฒ๋ฆฌ, ์์ , ์ญ์ ์ฉ)์ผ๋ก ๋ณด๋ด๋ฉด ํผ ๋ฐ์ดํฐ๋ฅผ ๋ณด์ด์ง ์๊ฒ ์จ๊ฒจ์ ์ ์ก
4. ์น ์๋ฒ(=์ปดํจํฐ)๋ ๋ฐ์ ํผ ๋ฐ์ดํฐ๋ฅผ ์น ํ๋ก๊ทธ๋จ(js)์ ๋๊น
5. ์น ํ๋ก๊ทธ๋จ(js)์ด ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌ ํ ์๋ก์ด HTML ํ์ด์ง๋ฅผ ์น ์๋ฒ์ ๋ณด๋
6. ์น ์๋ฒ๋ ์๋ก ๋ฐ์ HTML ํ์ด์ง๋ฅผ ๋ธ๋ผ์ฐ์ ์ ์ ์ก
7. ๋ธ๋ผ์ฐ์ ๋ ํด๋น ํ์ด์ง๋ฅผ ๋ ๋๋ง ํ ๋ณด์ฌ์ค.
input form ์์ ์ค ํ๋. ์ฌ์ฉ์๊ฐ ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ ๋ถ๋ถ์ ๋ง๋ค ๋ ์ฌ์ฉ
| <input> ์ ์์ฑ๊ฐ | ์ค๋ช |
| readonly | ์ฝ๊ธฐ ์ ์ฉ ํ๋๋ก ๋ง๋ค๊ธฐ |
| placeholder | ํํธ ํ์(ํ๋ ํด๋ฆญ์ ๋ด์ฉ ์ฌ๋ผ์ง) |
| autofocus | ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ค์ ๋ง์ ํน์ ๋ถ๋ถ์ ๋ง์ฐ์ค ์ปค์๊ฐ ํ์๋๋๋ก ํ๋ ๊ฒ |
| autocomplete | ์๋์์ฑ ์ค์ |
| max / min | <input> ํ๋์ ์ต๋๊ฐ๊ณผ ์ต์๊ฐ ์ง์ |
| maxLength | ํ ์คํธ ํ๋์ ์ต๋๋ก ์ ๋ ฅํ ์ ์๋ ๋ฌธ์์ ๊ฐ์ ์ง์ |
| step | ์ซ์์ ๊ฐ๊ฒฉ ์ค์ <input> ์ด date, datetime, datetime-local, month, week,time, number, range์ผ ๊ฒฝ์ฐ๋ง ์ฌ์ฉ๊ฐ๋ฅ |
| required | ํ์ ์ ๋ ฅ ํ๋ ์ง์ (๋น์นธ์ด๋ฉด ์ ๋์ด๊ฐ) |
| autofocus | ์น ํ์ด์ง๊ฐ ๋ก๋ฉ๋๋ฉด ํด๋น ํ๊ทธ๋ก ํฌ์ปค์ค ์ด๋ |
| pattern | ์ ๊ท ํํ์์ผ๋ก ์ ํจํ ๊ฐ์ ๊ฒ์ฆํจ. |
| <input type="์์ฑ๊ฐ"> | ์ค๋ช |
| hidden | ์๋ฒ๋ก ๋ณด๋ด๋ ๊ฐ๋ค์ ๋ณด๋ด๋ ํ๋(์ฌ์ฉ์์๊ฒ๋ ๋ณด์ด์ง X) |
| text | ํ ์ค์ง๋ฆฌ ํ ์คํธ๋ฅผ ์ ๋ ฅํ ์ ์๋ ํ ์คํธ ์์ |
| search | ๊ฒ์์์ |
| tel | ์ ํ๋ฒํธ ์ ๋ ฅ ํ๋ |
| url | URL ์ฃผ์๋ฅผ ์ ๋ ฅ ํ๋ |
| ๋ฉ์ผ์ฃผ์ ์ ๋ ฅ ํ๋ | |
| password | ๋น๋ฐ๋ฒํธ ์ ๋ ฅ ํ๋ |
| number | ์ซ์๋ฅผ ์กฐ์ ํ ์ ์๋ ํ์ดํ |
| range | ์ซ์๋ฅผ ์กฐ์ ํ ์ ์๋ ์ฌ๋ผ์ด๋ ๋ง๋ |
| color | ์์ํ |
| checkbox | ์ฒดํฌ๋ฐ์ค (2๊ฐ์ด์ ์ ํ ๊ฐ๋ฅ) |
| radio | ๋ผ๋์ค ๋ฒํผ (1๊ฐ๋ง ์ ํ ๊ฐ๋ฅ) |
| datetime | ๊ตญ์ ํ์ค์(UTC)๋ก ์ค์ ๋ ๋ ์ง์ ์๊ฐ(์ฐ, ์, ์ผ, ์, ๋ถ, ์ด, ๋ถํ ์ด) |
| datetime-local | ์ฌ์ฉ์๊ฐ ์๋ ์ง์ญ์ ๊ธฐ์ค์ผ๋ก ํ ๋ ์ง์ ์๊ฐ(์ฐ, ์, ์ผ, ์, ๋ถ, ์ด, ๋ถํ ์ด) |
| date | ์ฌ์ฉ์ ์ง์ญ์ ๊ธฐ์ค์ผ๋ก ํ ๋ ์ง(์ฐ, ์, ์ผ) |
| month | ์ฌ์ฉ์ ์ง์ญ์ ๊ธฐ์ค์ผ๋ก ํ ๋ ์ง(์ฐ, ์) |
| week | ์ฌ์ฉ์ ์ง์ญ์ ๊ธฐ์ค์ผ๋ก ํ ๋ ์ง(์ฐ, ์ฃผ) |
| time | ์ฌ์ฉ์ ์ง์ญ์ ๊ธฐ์ค์ผ๋ก ํ ์๊ฐ(์, ๋ถ, ์ด, ๋ถํ ์ด) |
| button | ๋ฒํผ |
| file | ํ์ผ์ ์ฒจ๋ถํ ์ ์๋ ๋ฒํผ |
| submit | ์๋ฒ์ ์ก ๋ฒํผ |
| image | submit ๋ฒํผ ๋์ ์ฌ์ฉํ ์ด๋ฏธ์ง |
| reset | ๋ฆฌ์ ๋ฒํผ |
<body> - <form> ์ ๋ ฅ ํผ ํ๊ทธ
input form์ ์์, ์ฐธ๊ณ ๋ก ํผ๊ณผ ๊ด๋ จ๋ ์์๊ฐ ์ฌ๋ฌ ๊ฐ์ธ ๊ฒฝ์ฐ <ul> ํ๊ทธ๋ก ๋ฌถ์ด์ฃผ๊ธฐ๋ ํ๋ค.
๋๋ <fieldset> ํ๊ทธ๋ฅผ ์ด์ฉํด ๊ฐ๊ฐ์ ํผ ์์๋ค์ ๊ทธ๋ฃน์ผ๋ก ๋ฌถ์ด ์ค ์๋ ์๋ค.
<legend>๋ <fieldset>์ผ๋ก ๋๋ ์ง ๊ตฌ์ญ์ ์ด๋ฆ์ ๋ถ์ผ ๋ ์ฌ์ฉ. ํ์๋ ์๋
<body>
<form action="#" accept-charset="utf-8" name="person_info" method="get">
<fieldset>
<legend>๊ฐ์ธ ์ ๋ณด ์
๋ ฅ</legend>
์ด๋ฆ : <input type="text" name="name"/> <br><br>
๋์ด : <input type="text" name="age"/> <br><br>
</fieldset>
<br>
<fieldset>
<legend>์ฌ๊ฐ ํ๋</legend>
์ทจ๋ฏธ : <input type="text" name="hobby"/> <br><br>
ํน๊ธฐ : <input type="text" name="specialty"/> <br><br>
</fieldset>
</form>
</body>
<body> - <iframe>
์ธ๋ถ ํ์ด์ง๋ฅผ ์ฃผ์๋ก ์ฝ์ ์ ์ฌ์ฉ
<body> - ์๋ฉํฑ(semantic) ํ๊ทธ๋?
์ฌ๋์ด ์ดํดํ๊ธฐ ์ฝ๋๋ก ํ๊ทธ ์ด๋ฆ๋ง ๋ณด๊ณ ๋ ์ญํ ์ ์ ์ ์๊ฒ ๋ง๋ ํ๊ทธ๋ค. ์ฝ์.
<body> - <nav>
๊ฐ์ ์ฌ์ดํธ ์์ ๋ค๋ฅธ ํ์ด์ง๋ก ์ฐ๊ฒฐํ๋ ๋งํฌ. ๋ค๋น๊ฒ์ด์
๋ณดํต ์๋จ <header> ๋ง์ง๋ง๋ถ๋ถ <footer> ๋๋ ์ธก๋ฉด <aside> ์ ํ๊ทธ์ ํฌํจ์ํจ๋ค.
<body> - <header> <footer> <aside>
๋ณดํต header์๋ ์๋จ ์ ๋ชฉ์, footer์๋ ์ ์ ์ ๋ณด๊ณผ ์ ์๊ถ ์ ๋ณด๋ฅผ, aside๋ ์ ์ ์ฌ์ด๋๋ฐ๋ฅผ ํ์ํ ๋ ์ฌ์ฉํ๋ค
<body> - <section> ๊ณผ <article>
section ์ ์ฃผ์ ๋ณ๋ก ์ปจํ ์ธ ๋ฅผ ๋ฌถ์ ๋, header,foo ter๊ณผ ๊ตฌ๋ถํ๊ธฐ ์ํ ๊ธฐ๋ฅ์ผ๋ก์จ ์ฌ์ฉํ๋ค.
article์ ๋ ๋ฆฝ๋ ๋ด์ฉ์ ์ค์ ์ปจํ ์ธ ๋ด์ฉ์ ๋ฃ์ ๋ ์ฌ์ฉํ๋ค.
<body> - ์งํ๊ฒ, ๊ธฐ์ธ์ด๊ธฐ <strong><b>, <em> <i>
<strong> ๋ ์๋ฏธ๋ฅผ ๊ฐ์กฐํ๋ฉด์ ์งํ๊ฒ
<b> ๋ ์๋ฌด ์๋ฏธ์์ด ์งํ๊ฒ
<em> ์ ์๋ฏธ๋ฅผ ๊ฐ์กฐํ๋ฉด์ ๊ธฐ์ธ์ด๊ธฐ
<i>๋ ๊ทธ๋ฅ ๊ธฐ์ธ์ด๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค.
'๐ผFront > HTML&CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML ์ด๋ฒคํธ ์ฐ๊ฒฐ(onclick, addEventListener ์ฐจ์ด) (0) | 2021.03.31 |
|---|---|
| HTML, CSS ๊ธฐ์ด (0) | 2021.03.22 |
๋ธ๋ก๊ทธ์ ์ ๋ณด
JiwonDev
JiwonDev