๊ด€๋ฆฌ ๋ฉ”๋‰ด

bom's happy life

[์›น ๊ฐœ๋ฐœ 1 ์ฃผ์ฐจ] ๊ฐœ๋ฐœ์ผ์ง€ 1 - HTML๊ณผ CSS์˜ ๊ฐœ๋… ๋ณธ๋ฌธ

Deveolpment Study๐Ÿ—‚๏ธ

[์›น ๊ฐœ๋ฐœ 1 ์ฃผ์ฐจ] ๊ฐœ๋ฐœ์ผ์ง€ 1 - HTML๊ณผ CSS์˜ ๊ฐœ๋…

bompeach 2022. 5. 23. 21:46

01. HTML, CSS์˜ ๊ฐœ๋…

 

HTML์€ ๋ผˆ๋Œ€, CSS๋Š” ๊พธ๋ฏธ๊ธฐ

 

02. HTML ๊ธฐ์ดˆ

 

HTML์€ ํฌ๊ฒŒ haed์™€  body๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. 

-head์•ˆ์—์„œ๋Š” ํŽ˜์ด์ง€์˜ ์†์„ฑ ์ •๋ณด๋ฅผ, body์•ˆ์—์„œ๋Š” ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์„ ๋‹ด๋Š”๋‹ค.

-head์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” ๋Œ€ํ‘œ์ ์ธ ์š”์†Œ๋“ค : meta, script, link, title ๋“ฑ

-body์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” ๋Œ€ํ‘œ์ ์ธ ์š”์†Œ๋“ค > [์ฝ”๋“œ์Šค๋‹ˆํŽซ]HTML์˜ ๊ธฐ์ดˆ(ํ•„์š”ํ•  ๋•Œ ์ฝ”๋“œ ์ฐพ์•„์„œ ์‚ฌ์šฉ, ์™ธ์šฐ์ง€X)

 

* ์ •๋ ฌ : ์ฝ”๋“œ์˜ ์ •๋ ฌ์ด ์ œ๋Œ€๋กœ ๋˜์–ด์žˆ์ง€ ์•Š์œผ๋ฉด, ์ฝ”๋“œ์˜ ์ƒ๊น€์ƒˆ๋ฅผ ํŒŒ์•…ํ•  ์ˆ˜ ์—†์–ด ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์–ด๋ ค์›Œ์ง„๋‹ค.

ํŒŒ์ด์ฐธ์—์„œ ctrl + alt + L (๋งฅ์€ cmd + alt + L)๋กœ ์ž๋™์ •๋ ฌ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ •๋ ฌํ•œ๋‹ค.

 

์—ฐ์Šต) ๊ฐ„๋‹จํ•œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

 

[์ฝ”๋“œ์Šค๋‹ˆํŽซ] ๋กœ๊ทธ์ธ HTML

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>๋กœ๊ทธ์ธํŽ˜์ด์ง€</title>
</head>
<body>
    <h1>๋กœ๊ทธ์ธ ํŽ˜์ด์ง€</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>๋กœ๊ทธ์ธํ•˜๊ธฐ</button>
</body>
</html>

 


03. CSS์˜ ๊ธฐ์ดˆ

 

1) HTML ๋ถ€๋ชจ-์ž์‹ ๊ตฌ์กฐ ์‚ดํŽด๋ณด๊ธฐ

2) CSS ๊ธฐ์ดˆ

 

- CSS๋Š” ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋‚˜?

<head> ~ </head> ์•ˆ์— <style> ~ </style> ๋กœ ๊ณต๊ฐ„์„ ๋งŒ๋“ค์–ด ์ž‘์„ฑ.

mytitle๋ผ๋Š” ํด๋ž˜์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚ฌ ๋•Œ, .mytitle { ... } ๋ผ๊ณ  ์จ์ค˜์•ผ ํ•˜๋Š” ๊ฒƒ์„ ๊ผญ ๊ธฐ์–ต!!

 

- ๋ชจ๋“  CSS๋“ค์„ ๋‹ค ์•Œ์ˆ˜๋Š” ์—†๋‹ค, ์•„๋ž˜ ์ ์–ด๋†“์€ ๊ฒƒ๋งŒ ์•Œ์•„๋„ ๊ตณ! ๋‚˜๋จธ์ง€๋Š” ๊ฒ€์ƒ‰ํ•ด์„œ ์‚ฌ์šฉ!

 

๋ฐฐ๊ฒฝ๊ด€๋ จ

background-color

background-image

background-size

 

์‚ฌ์ด์ฆˆ

width

height

 

ํฐํŠธ

font-size

font-weight

font-family

color

 

๊ฐ„๊ฒฉ

margin

padding

 

04. ์ž์ฃผ ์“ฐ์ด๋Š” CSS ์—ฐ์Šตํ•˜๊ธฐ

 

* margin๊ณผ padding ( → ํ—ท๊ฐˆ๋ฆฌ์ง€ ๋ง๊ธฐ!)

- margin์€ ๋ฐ”๊นฅ ์—ฌ๋ฐฑ์„, padding์€ ๋‚ด ์•ˆ์ชฝ ์—ฌ๋ฐฑ์„.

- div์— ์ƒ‰๊น”์„ ๋„ฃ๊ณ , ์ง์ ‘ ์‚ฌ์šฉํ•ด์„œ ์ฐจ์ด๋ฅผ ๋น„๊ตํ•ด๋ณด๊ธฐ!

 

* ๋งŒ๋“ค์–ด๋‘” ํ™”๋ฉด์„ ๊ฐ€์šด๋ฐ๋กœ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด?

- width๋ฅผ ์ฃผ๊ณ , margin: auto๋ฅผ ์‚ฌ์šฉ

- ๊ทธ๋ž˜๋„ ์•ˆ๋˜๋ฉด? display:block์„ ์ถ”๊ฐ€

 

05. CSS ํฐํŠธ, ์ฃผ์„, ํŒŒ์ผ๋ถ„๋ฆฌ

 

๋‹ค์Œ๊ธ€์—์„œ ์ด์–ด์„œ,,!