๐ฃ 2์ฃผ์ฐจ ์นํดํน ์คํฐ๋ ์ ๋ฆฌ
1. HTML
html์ ๊ธฐ๋ณธ์ ๋ํด์ ์์๋ณด์๋ค.
๐ HyperText / Markup / Language
-
ํ์ดํผ ํ ์คํธ๋ฅผ ๊ฐ์ฅ ์ค์ํ ํน์ง์ผ๋ก ํ๋ ๋งํฌ์ ์ด๋ผ๋ ํ์์ ๊ฐ์ง ์ปดํจํฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
-
ํ์ฅ์๋ .html
๐ ํ๊ทธ
- strong : ๊ธ์จ๋ฅผ ์งํ๊ฒ ํด์ค๋ค.
<strong>, </strong>
- h๋ก ์์ํ๋ ํ๊ทธ : ์ ๋ชฉ์ผ๋ก ์ฒ๋ฆฌํ์ฌ ๊ตต๊ณ ํฐ ๋ฌธ์๋ก ๊พธ๋ฉฐ์ฃผ๊ณ ์ค๋ฐ๊ฟ์ ํ๋ค. ์ซ์๊ฐ ์ปค์ง์๋ก ๊ธ์จํฌ๊ธฐ๋ ์์์ง๋ค.
<h1></h1> , <h2></h2>
- p : ๋จ๋ฝ์ ๋ง๋ค์ด์ค๋ค.
<p></p>
- br : ์ค๋ฐ๊ฟ์ ํด์ค๋ค.
<br>
- ํ๊ทธ์ ๋ฌธ๋ฒ
- ์์ ํ๊ทธ : <ํ๊ทธ๋ช >
- ์ข ๋ฃ ํ๊ทธ : </ํ๊ทธ๋ช > ;ํ์ ์๋ ํ๊ทธ๋ ์๋ค.
๐ ๋งํฌ
- ํ์ดํผํ ์คํธ. ๋ฌธ์์ ๋ฌธ์๊ฐ ๋งํฌ๋ก ์ฐ๊ฒฐ๋์ด์๋ค.
<a></a>
๐ ์์ฑ
-
ํ๊ทธ๋ช ๋ง์ผ๋ก๋ ์ ๋ณด๊ฐ ๋ถ์ถฉ๋ถํ๋ค. ๊ธฐ๋ฅ์ ์ถ๊ฐํด์ค๋ค.
-
href : ๋งํฌ๋ฅผ ๊ฑธ์ด์ค๋ค.
<a href="https://๋งํฌ๋ช
">
<a href="ํ์ผ๋ช
.html">
- target : ์๋ก์ด ํญ์ด ์ด๋ฆฌ๋ฉด์ ํ์ด์ง๊ฐ ์ด๋ฆฌ๊ฒ ํด์ค๋ค.
<a target="_blank">
- title : ๋งํฌ์ ์ปค์๋ฅผ ์ฌ๋ ธ์ ๋, ์ธ๋ถ์ ์ธ ๋ด์ฉ์ ์๋ ค์ค๋ค.
<a title="์ธ๋ถ์ค๋ช
">
- ์์์ฝ๋
<a target="_blank" href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" title="์ ์ค์ ์ธ ํ๋ก๊ทธ๋๋จธ">๋๋๋ ์ปค๋์ค</a>
๐ ๋ชฉ๋ก๊ณผ ์ค์ฒฉ
- ๋ฆฌ์คํธ ํ๊ทธ : ๊ฐ ํญ๋ชฉ๋ค์ด ๋ฆฌ์คํธํ ๋์ด ๊ตฌ๋ถ๋์ด์ง๋ค.
<li></li>
- ๊ทธ๋ฃนํ : ๋ฆฌ์คํธ์ ๋ฆฌ์คํธ๋ฅผ ๊ตฌ๋ถํด์ค๋ค. ์๋ก ์ฑ๊ฒฉ์ด ๊ฐ์ ๋ฆฌ์คํธ๋ฅผ ํ๊ทธ๋ฅผ ์ด์ฉํด ํ๋๋ก ๋ฌถ์ด์ค๋ค.
<ul></ul> //unordered list - ์ซ์ ์์
<ol></ol> //ordered list - ์ซ์ ์์
- ํ๊ทธ์์ ๋ ๋ค๋ฅธ ํ๊ทธ ์กด์ฌ ๊ฐ๋ฅํ๋ค. ์ค์ฒฉ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค.
<ol>
<li>๊ธฐ์ ์๊ฐ</li>
<li>๊ธฐ๋ณธ๋ฌธ๋ฒ</li>
<li>ํ์ดํผํ
์คํธ์ ์์ฑ</li>
<li>๋ฆฌ์คํธ์ ํ๊ทธ์ ์ค์ฒฉ</li>
</ol>
<ul>
<li>์ต์งํ</li>
<li>์ต์ ๋น</li>
<li>ํ์ด๋</li>
<li>ํ์ด์</li>
</ul>
๐ ๋ฌธ์์ ๊ตฌ์กฐ
- ๋ถ๊ฐ์ ํ๊ทธ : head
<title></title> //์น ์ฃผ์์ ์ด๋ฆ์ ๋ฐ๊ฟ์ค๋ค.
<meta charset="utf-8"> //๊ธ์จ ๊นจ์ง๋ ํ์์ ํด๊ฒฐํด์ค๋ค.
- ๋ณธ๋ฌธ ํ๊ทธ : body
- ์ ์ฒด ํ๊ทธ : html
<html>
<head>
</head>
<body>
</body>
</html>
๐ DOCTYPE
- DOCumentTYPE declaration : ๋ธ๋ผ์ฐ์ ์๊ฒ ์ด ํ๊ทธ๋ค์ด ์ด๋ ํ ํ์ค์ ๋ฐ๋ฅด๊ณ ์๋ ์ง ์๋ ค์ค๋ค.
<!DOCTYPE html>
๐ ์ด๋ฏธ์ง
<img src="ํ์ผ์ด๋ฆ.jpg" width="100" height="100" alt="์ฐ ์ด๋ฏธ์ง" title="์ฐ ์ด๋ฏธ์ง">
// alt๋ ์ฌ์ง ๋์ฒด ํ
์คํธ, title์ tooltip
๐ ์ ๋ ฅ์์(form)
- ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ ๋ณด๋ฅผ ์๋ฒ์ ์ ์กํ๋ ๊ธฐ๋ฅ
- action ์์ฑ : action์์ ์๋ url์(์๋ฒ) ์ ์กํ๋ค.
๐ ํ ์คํธ ์ ๋ ฅ
<input type="text" name="id" value="default value">
// name ์์ฑ์ ์ด์ฉํ๋ฉด, ์ ์ก ๋์์ ๋ ์ ๋ณด์ ๋ฌธ์๊ฐ ๋ถ์ด์ ์ ์ก๋๋ค.
์ ๋ ฅ ์นธ์ด ๋์จ๋ค.
<input type="password" name="pwd" value="default value">
๊ธ์ ์๋ ์ ์ ์์ง๋ง ๋ด์ฉ์ ๋ณผ ์ ์๋ค.
<textarea>default value</textarea>
<input type="submit">
์ ์ถ ๋ฒํผ์ด ๋์จ๋ค.
๐ ์ ํ
- ์ฌ๋ฌ๊ฐ์ง ์ ํ์ง๋ค ์ค์์ ์ ํํ๊ฒ ํ๋ค.
<select name="color">
<option value="red">๋นจ๊ฐ์</option>
<option value="blue">ํ๋์</option>
</select>
๋นจ๊ฐ์
ํ๋์
(์ต์
๋ฒํผ ์์)
๐ ๋ฒํผ
- button์ ๊ทธ๋ฅ ๋ฒํผ๋ง ์์ฑํ๋ค. reset์ ์์ ์ ๋ณด๋ฅผ ๋ฆฌ์ ํด์ค๋ค.
<form action="">
<input type="submit" value="์ ์ก">
<input type="button" value="๋ฒํผ">
<input type="reset"
</form>
๐ ๋ฐ์ดํฐ ์ ์ก - hidden
- ์๋ฒ๋ก ์ด๋ค ๊ฐ์ ์ ์กํ ๋๋ hidden์ ์ด์ฉํ๋ฉด ๋ฐ์ดํฐ ์ ๋ณด๊ฐ ์จ๊ฒจ์ง๋ค.
<form action="">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
๐ ์ฒดํฌ๋ฐ์ค์ ์ปจํธ๋กค์ ์ ๋ชฉ - label
- ๋ฌด์ธ๊ฐ์ ์ด๋ฆํ๋ผ๋ ์๋ฏธ. ํน๋ณํ ๊ธฐ๋ฅX. ์๊ฐ์ ๋ณํ๋ ์๋ค. ๊ฐ๊ฐ์ label๋ค์ด ๋๊ตฌ์ ์ด๋ฆํ์ธ์ง ์ฐ๊ฒฐ์์ผ์ผ ํ๋ค(๋ฐฉ๋ฒ 2๊ฐ์ง). ์ ํ๋๋ ์์ญ์ ๋๊ฒ ํด์ค๋ค.
<form action="">
<p>
* ๋ฐฉ๋ฒ 1 ์ด๋ฆ ์ง์ ํ๊ธฐ for, id
<label for="id_txt">text</label>:
<input id="id_txt" type="text" name="id" value="default value">
</p>
<p>
* ๋ฐฉ๋ฒ 2 ์ ์ฒด๋ฅผ label๋ก ๊ฐ์ธ๊ธฐ
<label>textarea:
<textarea id="comment" rows="2">default value</textarea>
</label>
</p>
* checkbox๊ธฐ๋ฅ ํ ๋ ์ ์ฉํ๋ค.
<label>
<input type="checkbox" name="color" value="red">๋ถ์์
</label>
</form>
text:
password:
textarea:
๋ถ์์๐ METHOD
- ์๋ฒ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๋ฐฉ๋ฒ
- URL์ ํตํด ๋ค์ ๋ฐ์ดํฐ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๋ฐฉ๋ฒ : get
<form action="" method="get">
- URL์ ๋ณด์ฌ์ง์ง ์๊ณ ๊ฐ์ถฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๋ฐฉ๋ฒ : post
<form action="" method="post">
๐ ํ์ผ ์ ๋ก๋
- ํ์ผ ์ ๋ก๋๋ฅผ ํ๋ฉด ์๋ฒ๋ก ํ์ผ์ ์ ์กํ๋ค.
- ํ์ผ ์
๋ก๋ ๊ธฐ๋ฅ์ ์ด๋ค๋ฉด, method๋ post, enctype์ multipart/form-dat๋ก ํด์ค๋ค.
<form action="http://localhost/upload.php" method="post"
enctype="multipart/form-data">
* ์ด๋ฆ ๊ผญ ์ง์ ํด์ฃผ๊ธฐ
<input type="file" name="profile">
<input type="submit">
</form>
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ฃ 2์ฃผ์ฐจ ์นํดํน ์คํฐ๋ ์ ๋ฆฌ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@jumining/2์ฃผ์ฐจ-์นํดํน-์คํฐ๋-์ ๋ฆฌ-x2cxiuvm์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค