๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML + CSS ์‹œ๋ฆฌ์ฆˆ๐Ÿ•ธ/HTML & CSS ์‹œ๋ฆฌ์ฆˆ(V 1.0)

๊ธฐ๋ณธ HTML ํƒœ๊ทธ ์ •๋ฆฌ | HTML & CSS ์‹œ๋ฆฌ์ฆˆ 002

by @ENFJ 2021. 7. 22.

์ด๋ฒˆ ๊ธ€์€ ์•„์ฃผ ๊ธฐ๋ณธ์ค‘์— ๊ธฐ๋ณธ์ ์ธ html ํƒœ๊ทธ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•œ ๊ธ€ ์ž…๋‹ˆ๋‹ค.

<!DOCTYPE> ํƒœ๊ทธ 

HTML ํŒŒ์ผ์„ ์“ธ๋•Œ ๊ฐ€์žฅ ๋จผ์ €! ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ํƒœ๊ทธ๊ฐ€ ์žˆ๋‹ค.

๊ทธ๊ฒƒ์€ ๋ฐ”๋กœ <!DOCTYPE> ์ด๋‹ค.

 

๋ฌด์กฐ๊ฑด

<!DOCTYPE>์„ ์„ ์–ธ!!

 

=> ex) <!DOCTYPE html>

 

 

<title> ํƒœ๊ทธ 

ํŽ˜์ด์ง€์˜ ์ œ๋ชฉ์€ <title> ํƒœ๊ทธ์— ์จ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €์˜ ํƒญ์ด๋‚˜ ๋ฐฉ๋ฌธ ๊ธฐ๋ก์— ๋‚˜์™€ ์žˆ๋Š” ๋ฐ”๋กœ ๊ทธ ์ œ๋ชฉ์ด ์ด ๊ณณ์— ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.

 

ex) <title>My First Website</title>

 

<h1>~<h6> ํƒœ๊ทธ

ํ•œ ํŽ˜์ด์ง€์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋จธ๋ฆฌ๋ง์ด ์žˆ์„ ์ˆ˜ ์žˆ๋Š”๋ฐ์š”. ๊ทธ ์ค‘ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋จธ๋ฆฌ๋ง์€ <h1>(heading 1), ๊ทธ ๋‹ค์Œ์œผ๋กœ ์ค‘์š”ํ•œ ๋จธ๋ฆฌ๋ง์€ <h2>(heading 2). ์ด๋Ÿฐ ์‹์œผ๋กœ <h6>(heading 6)๊นŒ์ง€ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<h1>๋ถ€ํ„ฐ ์ˆœ์„œ๋Œ€๋กœ ์ž‘์•„์ง‘๋‹ˆ๋‹ค.

 

<p> ํƒœ๊ทธ

๋ณดํ†ต ๋ฌธ๋‹จ์€ <p>(paragraph) ํƒœ๊ทธ ์•ˆ์— ๋„ฃ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์ง์ ‘ ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ <p> ํƒœ๊ทธ ์œ„, ์•„๋ž˜์—๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์—ฌ๋ฐฑ์ด ์กฐ๊ธˆ์”ฉ ์žˆ์Šต๋‹ˆ๋‹ค.

 

* ์•„๋ž˜ ์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•ด ๋ฌด๋ฃŒ๋กœ ๊ณต๋ถ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

https://www.w3schools.com/

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: cente

 

www.w3schools.com