๐html ํ๊ทธ๋ค
ํฌ๊ฒ html๋ฌธ์๋ ์๋๋ก ๊ตฌ์ฑ
<html>
<head> </head>
<body> </body>
</html>
๐ํ๊ทธ ์ข ๋ฅ
<!DOCTYPE html> : ์น๋ฌธ์๊ฐ ์ด๋ค ๋ฒ์ ์ HTML ์ธ์ด๋ก ์์ฑ๋์๋์ง ๊ฒฐ์ ํ๋ ๊ธฐ๋ฅ
<meta charset="UTF-8">: html ํ์ผ์ ์ธ์ฝ๋ฉ์ ์๋ ค์ฃผ๋ ํ๊ทธ (ํ๊ธ,ํน์๋ฌธ์๊ฐ ๊นจ์ง์ง ์๊ฒ)
<title></title> : ์นํ์ด์ง ์ ๋ชฉ
<div></div> : ๋ด์ฉ์ ๊ตฌ๋ถํ๋๋ฐ ์ฌ์ฉ
<section> </section> : div์ ๊ฐ์ ์ญํ
<h1~h5> : ์ ๋ชฉํ๊ทธ (์ซ์๊ฐ ์์์๋ก ๊ธ์จ๊ฐ ์ปค์ง)
<p></p> : paragraph์ ์ฝ์, ํ๋์ ๋ฌธ๋จ์ ๋ง๋ค๋ ์ฌ์ฉ
๐css ํ๊ทธ๋ค
- ํ์ ์ ํ์, ํด๋์ค์ ํ์ ๊ตฌ๋ณํ๊ธฐ
(ํ์ ์ ๊ทธ๋ฅ, ํด๋์ค์ ํ์๋ . ์ ์ฐ๊ณ ์ฌ์ฉ)
- paddin / margin / border ์ค์!
- float๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ ๋ค๋ฅธ์์์ ๊ฒน์น์ง ์๊ธฐ์ํด ๋ฐ๋์ div๋ก ๋ฌถ์ด์ค๋ค!
- ๋ฌถ์ div ํ๊ทธ ์์ฑ์ overflow : hidden; ์ ์ฉ!
- box-shadow (x์ถ๋ฐฉํฅ, y์ถ๋ฐฉํฅ, ํ๋ฆฐ์ ๋ , ๊ทธ๋ฆผ์๋๊ปํฌ๊ธฐ , ์/ํฌ๋ช ๋)
-
๐๊ทธ๋ฐ์
- lorem ipsum : ๊ทธ๋ฅ ์๋ฌด๊ธ์ด๋ ๋ฃ๊ธฐ์ํ ๋ฌธ์ฅ ( ์๋ฏธ์๋ ๋ฌธ์ฅ)
- line-heghit / font-size : ์ค๊ฐ ๊ฐ๊ฒฉ 16px + ๊ธ์จํฌ๊ธฐ 10px ์ด ์ด์์
๐ฅ ํ๊ณ
1์ผ์ฐจ๋ ๊ธฐ์ด์ ์ธ ๋ด์ฉ์ ๋ณต์ตํ๋ค๋ ์๊ฐ์ผ๋ก ์ง์คํด์ ๋ค์๋ค .
์์ง๊น์ง ์ฌ์ด๋ถ๋ถ์ด๋ผ ์ด๋ ค์์ ์์ผ๋ 8์๊ฐ์ ์์์์ด์ผ ํ๊ธฐ์ ํ๋ฆฌ๊ด๋ฆฌ๋ฅผ ์ํด์ผ๊ฒ ๋ค . . .
+
์ด๋ํฌ๋์ด ์งง๊ฒ ๊ฐ์ฐ ๋ฐ ์ง์์๋ต์๊ฐ์ ๊ฐ์ง์๊ณ ๊ฐ์ จ๋ค.
๊ฐ๋ํฌ๋. . . ์ข์๋ง์ ๋ค์์ผ๋ ์ด์ฌํ ๋ฌ๋ ค๋ด์ผ๊ฒ ๋ค.
'FE > HTML,CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [HTML] Text-level semantics (0) | 2022.03.30 |
|---|---|
| [HTML] Grouping Content | HTML Living Standard (0) | 2022.03.29 |
| [CSS] ๊ธฐ๋ณธ์ ํ์ ์ ๋ฆฌ (0) | 2022.03.07 |
| [HTML] ์ ๋ ฅ ์์ ์์ฑ (0) | 2022.02.18 |
| [HTML] ์น๋ฌธ์ ์ ๋ ฅ ํ๊ทธ์ ๋ฆฌ (0) | 2022.02.18 |