๐ Tag์ Attribute
Tag๋ HTML์ ์์ฑํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ๋ช ๋ น์ด์ ์งํฉ์ ๋งํ๋ค. HTML ๋ฌธ์์ ๋ผ๋๋ฅผ ๊ตฌ์ฑํ๋ค.
Attribute๋ HTML ๋ฌธ์์์ elements์ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ๋ฃ์ ๋ ์ฌ์ฉ๋๋ ๋ถ๊ฐ์ ์ธ ์์๋ฅผ ๋งํ๋ค.
· a: anchor, ์น ํ์ด์ง๋ ์ฌ์ดํธ๋ก ์ด๋
· href(HTTP or hypertext reference): anchor ํ๊ทธ์ attribute
· target: ๊ธฐ๋ณธ๊ฐ์ "_self"(ํ์ฌ ํญ์์ ๋งํฌ ์ด๋ฆผ), "_blank"(์ ํญ์์ ๋งํฌ ์ด๋ฆผ)
<a href="http://google.com" target="_blank">
· img: ๋ค๋ฅธ ํ๊ทธ์ ๋ค๋ฅด๊ฒ <img></img>๋ก ๋ซ์ง ์์. ์์ฒด ๋ซ๊ธฐ ํ๊ทธ self-closing tag
· src: source, img ํ๊ทธ์ ์ด๋ฏธ์ง ์ฃผ์๋ฅผ ์ง์
<img src="์ฌ์ง ์ฃผ์" />
<img src="ํ์ผ์ด๋ฆ.ํ์ฅ์" />
· id: body์์ ์ด๋ค ํ๊ทธ์๋ ๋ฃ์ ์ ์๋ attribute. ์ด๋ค ํ๊ทธ์๋ ๋ฃ์ ์ ์๋ ์ด์ ๋ id๊ฐ unique identifier(๊ณ ์ ์๋ณ์)์ด๊ธฐ ๋๋ฌธ์ด๋ค.
element๋น ํ๋์ id๋ง ๊ฐ์ง ์ ์๊ณ , id์ ๊ฐ์ ๊ณ ์ ์ ๊ฐ์ด์ด์ผ ํจ. with for. CSS์์ ํ๊ทธ๋ฅผ ์ง์ ํด ๊พธ๋ฏธ๊ธฐ ์ํด id๊ฐ ํ์ (ex. website๋ผ๋ id๋ฅผ ๊ฐ์ง input์ ๋นจ๊ฐ์์ผ๋ก ๋ณด์ฌ์ค ๋ผ๊ณ ์ ๋ ฅํ๊ฒ ๋จ)
๐ <!DOCTYPE html>
๋ชจ๋ HTML ๋ฌธ์์ ์ฒซ ๋ฒ์งธ ๋ผ์ธ, ๋ธ๋ผ์ฐ์ ์๊ฒ ํ ์คํธ๊ฐ ์๋ html ๋ฌธ์๋ผ๊ณ ์๋ ค์ฃผ๋ ๊ฒ
1. head: ๋ณด์ด์ง ์๋ ํ๊ทธ๋ค๋ก ์น์ฌ์ดํธ์ ํ๊ฒฝ์ ์ค์ ํ๊ณ ๋ถ๊ฐ์ ์ธ ์์๋ค์ ๋ด๋ ๊ฒ
· meta: ๋ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ๋ํ๋ด๋ ํ๊ทธ. title, base, link, style ๊ทธ๋ฆฌ๊ณ script ์์๋ฅผ ์ฌ์ฉํ์ฌ ํํํ ์ ์๋ ๋ค์ํ ์ข ๋ฅ์ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ๋ํ๋
- content
- name
- charset
<meta charset="utf-8" />
2. body: ์ฌ์ฉ์๊ฐ ๋ณด๋ ์ปจํ ์ธ
<tagname attrname="attrvalue">content</tagname>
'๐ป Programming > HTML, CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[CSS] html, :root, * ์ ํ์ (0) | 2024.01.10 |
---|---|
[CSS] em, rem, % (0) | 2024.01.09 |
[HTML] ์น ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ: header, main, footer (0) | 2023.05.19 |
[CSS] BEM (Block-Element-Modifier) (0) | 2023.02.25 |
[CSS] CSS, ๊ทธ๋ฆฌ๊ณ ์คํ์ผ ์ํธ (0) | 2023.02.20 |