HTML TAG ์ฌํ
Created | |
---|---|
Lesson Date | |
Status | Complete |
Type | LessonQuiz |
Reference Website
The average web page
The study data comes from 7.1 million index pages gathered
from top twenty Google results, for about 30 million keywords.
Head Tag
- Heading Tag
- ๋ฌธ์ ๋ด์ ์ ๋ชฉ ํํ
- Paragraph Tag
- ๋จ๋ฝ ํ๊ทธ
- Linebreak Tag
- <br> : ๋จ๋ฝ ๊ตฌ๋ถ
Text Expression Tag
- <b> : bold ํ๊ทธ๋ ๊ธ์๋ฅผ ๊ตต๊ฒ ํํํ๋ ํ๊ทธ
- <i> : italic ํ๊ทธ๋ ๊ธ์๋ฅผ ๊ธฐ์ธ์ฌ์ ํํํ๋ ํ๊ทธ
- <u> : underline ํ๊ทธ๋ ๊ธ์์ ๋ฐ์ค์ ํํํ๋ ํ๊ทธ
- <s> : strike ํ๊ทธ๋ ๊ธ์์ ์ค๊ฐ์ ์ ํํํ๋ ํ๊ทธ
Anchor
- ๋งํฌ Tag : ๋ค๋ฅธ ๋ฌธ์๋ก ์ด๋ํ ์ ์๋ ๋งํฌ๋ฅผ ์์ฑํ๋ค.
- href : hyper reference - ๋งํฌ์ ๋ชฉ์ ์ง๊ฐ ๋๋ URL์ ์ง์
<a href="http://www.naver.com/" target="_blank">๋ค์ด๋ฒ</a>
-
target
- _blank : ์๋ก์ด ํญ์ผ๋ก
- _self : ํ์ฌ ํ๋ฉด์ ํ์, defualt ๊ฐ
- ๋ด๋ถ ๋งํฌ : '#์ด๋ ์์์ id ์์ฑ๊ฐ'์ ํตํด ํด๋น ์์น๋ก ์ด๋
<h1 id="top">๋ค์ด๋ฒ๋ค์ด๋ฒ</h1>
<a href="#top">HTML</a>
Container
์๋ฏธ์์ด ์์๋ฅผ ๋ฌถ๊ธฐ ์ํ ํ๊ทธ
- <div> : block-level, ํ ์ค์ ์์ฑํด์ ๋ด์ฉ ํํ โ <p>
- <span> : inline-level, ๋ธ๋ก ์์์ ํ ์ค ์์์ ํํ๋๋ ์์ โ <b><u>
<div>
<span>Lorem</span> ipsum dolor sit
</div>
List
- ex) ์ค์๊ฐ ๊ฒ์์ด
- UL
- <ul> : unodered list โ ์์๊ฐ ์๋ ๋ฆฌ์คํธ
<ul> <li>์ฝฉ๋๋ฌผ</li> <li>ํ</li> <li>soup soy bean</li> </ul>
- DL
- <dl> : definition / description list โ ์ฉ์ด์ ๊ทธ์ ๋ํ ์ ์๋ฅผ ํํ
<dl> <dt>๋ฆฌํ๋ฆฌ ์ฆํ๊ตฐ</dt> <dd>ํ๊ตฌ์ ์ธ๊ณ๋ฅผ ์ง์ค์ด๋ผ ๋ฏฟ๊ณ ๊ฑฐ์ง๋ ๋ง๊ณผ ํ๋์ ์์ต์ ์ผ๋ก ๋ฐ๋ณตํ๋ ๋ฐ์ฌํ์ ์ฑ๊ฒฉ์ฅ์ ๋ฅผ ๋ปํ๋ ์ฉ์ด</dd> <dt>ํผ๊ทธ๋ง๋ฆฌ์จ ํจ๊ณผ</dt> <dd>ํ์ธ์ ๊ธฐ๋๋ ๊ด์ฌ์ผ๋ก ์ธํ์ฌ ๋ฅ๋ฅ ์ด ์ค๋ฅด๊ฑฐ๋ ๊ฒฐ๊ณผ๊ฐ ์ข์์ง๋ ํ์</dd> <dt>์ธ๋๋ ํจ๊ณผ</dt> <dd>์ฌ๋๋ค์ด ์ฝ์๋ผ๊ณ ๋ฏฟ๋ ์ฃผ์ฒด๋ฅผ ์์ํ๊ฒ ๋๋ ํ์</dd> </dl>
- <dt> : ์ฉ์ด๋ฅผ ๋ํ๋ด๋ Tag
- <dd> : ์ฉ์ด์ ๋ํ ์ ์ ๋๋ ์ค๋ช Tag
- <dl> : definition / description list โ ์ฉ์ด์ ๊ทธ์ ๋ํ ์ ์๋ฅผ ํํ
Image
- <img> : ๋ฌธ์์ ์ด๋ฏธ์ง๋ฅผ ์ฝ์
ํ๋ Tag, ๋ซ๋ Tag์๋ ๋น ํ๊ทธ
<img src="./images/pizza.png" alt="pizza">
- src : source, ์ด๋ฏธ์ง์ ๊ฒฝ๋ก
- alt : ์ด๋ฏธ์ง์ ๋์ฒด ํ ์คํธ โ ์น ์ ๊ทผ์ฑ ์ธก๋ฉด์์ ์ค์ํ ์์ฑ
Table
-
ํ
- <td>, <th>
- <tr>
- <table>
-
ํ ์ด๋ธ ๊ตฌ์กฐ ๊ด๋ จ ํ๊ทธ
- <caption> : ํ์ ์ ๋ชฉ, ํ ์ด๋ธ tag ๊ฐ์ฅ ์์
- <tread> : ์ ๋ชฉ ํ์ ๊ทธ๋ฃน
- <tfoot> : ๋ฐ๋ฅ ํ์ ๊ทธ๋ฃน
- <tbody> : ๋ณธ๋ฌธ ํ์ ๊ทธ๋ฃน
- <colgroup>
- <col>
- scope
- headers
-
ํ ์ด๋ธ ๊ด๋ จ ์์ฑ
- colspan : ๊ฐ๋ก ๋ฐฉํฅ์ผ๋ก ๋ณํฉ
- rowspan : ์ธ๋ก ๋ฐฉํฅ์ผ๋ก ๋ณํฉ
<table> <caption> Monthly Savings</caption> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td colspan="2">Sum</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td rowspan="2">$100</td> </tr> <tr> <td>Feburary</td> </tr> </tbody> </table>
Form
์ฌ์ฉ์๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ผ ํ๋ ๊ฒฝ์ฐ ์ฌ์ฉ๋๋ ์์๋ค์ Form ์์๋ผ๊ณ ํฉ๋๋ค.
-
Type
- text : ID ๋ฑ ๋จ์ํ Text ์ ๋ ฅ์ ์ฌ์ฉ, placeholder ์์ฑ
- textarea : ์ฌ๋ฌ์ค ์ ๋ ฅ, rows, cols ์ต์
- password : ์ํธ์ ๊ฐ์ด ๊ณต๊ฐํ ์ ์๋ ๋ด์ฉ์ ์ ๋ ฅํ ๋
- radio : ์ค๋ณต์ด ๋ถ๊ฐํ ํญ๋ชฉ
- checkbox : ์ค๋ณต์ ํ์ด ๊ฐ๋ฅ โ name : radio, checkbox๋ฅผ ๊ทธ๋ฃนํ, checked ์์ฑ
- file : ํ์ผ์ ์๋ฒ์ ์ฌ๋ฆด ๋ ์ฌ์ฉ
- submit | reset : form์ ๊ฐ ์ ์ก, ์ด๊ธฐํ
- image : sumit๋ฒํผ์ ์ด๋ฏธ์ง์ฝ์ , src, alt ์์ฑ ํ์
- button : <button type="submit;reset"> ์ข ๋ ์์ ๋ ๋์
- select : ์ ํ ๋ชฉ๋ก์ ๋ฆฌ์คํธ ํํ๋ก ๋ ธ์ถํ๊ณ ๊ทธ ์ค ํ๋ ์ ํ, multiple ์์ฑ์ผ๋ก ๋ค์ค ์ ํ ๊ฐ๋ฅ
- label : form ์์์ ์ด๋ฆ๊ณผ form ์์๋ฅผ ๋ช
์์ ์ผ๋ก ์ฐ๊ฒฐ
- form id ์์ฑ๊ฐ == <label for="@@">
- ์ ๊ทผ์ฑ ์ธก๋ฉด์์ ์ค์ โ ํ์
- fieldset : ์ฌ๋ฌ ๊ฐ์ ํผ ์์๋ฅผ ๊ทธ๋ฃนํํ์ฌ ๊ตฌ์กฐ์ ์ผ๋ก ๋ง๋ค๊ธฐ ์ํด ์ฌ์ฉ
- legend : ํผ ์์์ ์ ๋ชฉ์ผ๋ก <fieldset> ๋ด๋ถ์ ์์ฑ
<form>
- form ์์๋ค์ ๊ฐ์ธ๋ ํ๊ทธ๋ก ๋ฐ์ดํฐ๋ก ๋ฌถ์ด์ ์ค์ ์๋ฒ๋ก ์ ์ก
- action : ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ ์๋ฒ์ ์ฃผ์
- method : ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ ๋ฐฉ์
<form action="./samsung" method="GET | POST">