Welcome to Glory Blog

์ฝ”๋”ฉ ๐Ÿ’ป coding

โ‘  ์›น ํผ๋ธ”๋ฆฌ์…”๊ฐ€ ๋˜๊ธฐ ์œ„ํ•œ ์ฒซ๊ฑธ์Œ - html/css๋กœ ํ™ˆํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ(HTML ๊ธฐ๋ณธ ๋ฌธ์„œ ๊ตฌ์กฐ)

G.๋กœ๋ฆฌ 2023. 12. 12. 17:52

HTML ๊ธฐ๋ณธ ๋ฌธ์„œ ๊ตฌ์กฐ

 

1.ํƒœ๊ทธ๋Š” < > ๋ฅผ ์ด์šฉํ•ด ๊ตฌ๋ถ„ํ•จ

์˜ค๋ฅธ์ชฝ ํด๋ฆญ > ๊ฒ€์‚ฌ๋ฅผ ํ†ตํ•œ ํ‹ฐ์Šคํ† ๋ฆฌ ์ฝ”๋”ฉ ์บก์ณ

 

2.ํƒœ๊ทธ๋Š” ์†Œ๋ฌธ์ž๋กœ ์”€

๋Œ€์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ณ„ํ•˜์ง€ ์•Š์ง€๋งŒ HTML5 ํ‘œ์ค€ ๋ช…์„ธ์—์„œ๋Š”

ํƒœ๊ทธ์™€ ํƒœ๊ทธ์•ˆ์— ์†Œ๋ฌธ์ž๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅ

 

๋งž๋Š” ์˜ˆ ํ‹€๋ฆฐ ์˜ˆ
<img src = “images/first.jpg”> <IMG src = “images/first.jpg”>

 

 

 

 

3. ์—ฌ๋Š” ํƒœ๊ทธ์™€ ๋‹ซ๋Š” ํƒœ๊ทธ๋ฅผ ์ •ํ™•ํžˆ ์ž…๋ ฅ

๋งž๋Š” ์˜ˆ ํ‹€๋ฆฐ ์˜ˆ
<h1> ์˜ˆ์‹œ </h1> <h1> ์˜ˆ์‹œ 

 

 

4. ์ ๋‹นํžˆ ๋“ค์—ฌ ์“ฐ๊ธฐ

See the Pen Heading tags by ๋…ธํ˜„๊ฒฝ (@Dewlovely) on CodePen.

 

์™ผ์ชฝ ์ฝ”๋“œ๋“ค ๋‚ด์šฉ์„ ๋ณด๋ฉด ๋“ค์—ฌ์“ฐ๊ธฐ๊ฐ€ ์ ๋‹นํžˆ ๋˜์–ด ์žˆ์œผ๋ฉด

๊ฐ€๋…์„ฑ๋„ ์ข‹์•„์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

 

5. ํƒœ๊ทธ๋Š” ์†์„ฑ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

< ํƒœ๊ทธ ์†์„ฑ = “์†์„ฑ ๊ฐ’” ์†์„ฑ = “์†์„ฑ ๊ฐ’” .. >

ex)  <img src=”images/first.jpg” width=”350” height=”290” alt=”์ด๋ฏธ์ง€”>

๋นจ๊ฐ„์ƒ‰์ด ์†์„ฑ ํŒŒ๋ž€์ƒ‰์ด ์†์„ฑ ๊ฐ’

 

6. ํฌํ•จ ๊ด€๊ณ„๋ฅผ ๋ช…ํ™•ํžˆ ํ•˜๊ธฐ

 

<u><i>ํ…Œ์ŠคํŠธ์ž…๋‹ˆ๋‹ค</i></u>

 


HTML ๋ฌธ์„œ ๊ธฐ๋ณธ ๊ตฌ์กฐ ์‚ดํŽด๋ณด๊ธฐ

 

See the Pen Heading tags by ๋…ธํ˜„๊ฒฝ (@Dewlovely) on CodePen.

 

<!doctype> - ๋ฌธ์„œ ์œ ํ˜•์„ ์ง€์ •ํ•˜๋Š” ์„ ์–ธ๋ฌธ

 

์ด์ œ๋ถ€ํ„ฐ ์ฒ˜๋ฆฌํ•  ๋ฌธ์„œ๋Š” html ๋ฌธ์„œ์ด๊ณ  ์–ด๋–ค ์œ ํ˜•์„ ์‚ฌ์šฉํ–ˆ์œผ๋‹ˆ ๊ทธ ๋ฒ„์ „์— ๋งž๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ํ•ด์„ํ•˜๋ผ ๋ผ๊ณ  ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ

 

<html> - ์›น ๋ฌธ์„œ๋ฅผ ์‹œ์ž‘์„ ์•Œ๋ฆฌ๋Š” ํƒœ๊ทธ

์›น ๋ฌธ์„œ์˜ ์‹œ์ž‘๊ณผ ๋์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ

<html lang = “ko”> html ํƒœ๊ทธ์—๋Š” lang ์ด๋ผ๋Š” ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ๋ฌธ์„œ์—์„œ ์‚ฌ์šฉํ•  ์–ธ์–ด๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

์ฃผ์š” ๊ตญ๊ฐ€๋ณ„ ์–ธ์–ด ์ฝ”๋“œ๋Š” ์ด์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

์ฝ”๋“œ de en fr ja ko zh
์–ธ์–ด ๋…์ผ์–ด ์˜์–ด ํ”„๋ž‘์Šค์–ด ์ผ๋ณธ์–ด ํ•œ๊ตญ์–ด ์ค‘๊ตญ์–ด

 

<head> - ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์ •๋ณด๋ฅผ ์ฃผ๋Š” ํƒœ๊ทธ

์›น ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์—๋Š” ๋ณด์ด์ง€ ์•Š๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ์•„์•ผ ํ•  ์ •๋ณด๋“ค์„ ๋ชจ๋‘ <head> ๋ถ€๋ถ„์— ์ž…๋ ฅํ•œ๋‹ค.

 

<title> - ๋ฌธ์„œ ์ œ๋ชฉ

์ œ๋ชฉ ํ‘œ์‹œ์ค„์— ํ‘œ์‹œ๋˜๋Š” ํƒœ๊ทธ

 

 

<meta> - ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ๋ฐ ๋ฌธ์„œ ํ‚ค์›Œ๋“œ, ์š”์•ฝ ์ •๋ณด

ํ™”๋ฉด์— ๊ธ€์ž๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ๋ฐฉ๋ฒ•์„ ๋น„๋กฏํ•ด ์›น ๋ฌธ์„œ ํ‚ค์›Œ๋“œ ๋“ฑ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Œ.

 

<body> - ์‹ค์ œ ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ์‹œ๋  ๋‚ด์šฉ

์›น๋ฌธ์„œ์—์„œ ํŠน์ˆ˜ ๋ฌธ์ž ๋ฐ ํŠน์ˆ˜ ๊ธฐํ˜ธ ์‚ฌ์šฉํ•˜๊ธฐ

 

https://www.w3schools.com/charsets/ref_html_entities_4.asp

 

HTML 4 Entities

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

์ด ๋งํฌ๋Š” ํŠน์ˆ˜ ๋ฌธ์ž ๊ด€ํ•œ HTML ์ฝ”๋“œ ์ ํ˜€์žˆ๋Š” ๊ฑฐ์ž…๋‹ˆ๋‹ค.

์•„์˜ˆ ใ… ์„ ์ด์šฉํ•ด์„œ ์‚ฌ์šฉํ•ด๋„ ๋˜์ง€๋งŒ ์›นํ‘œ์ค€ํ™”์— ๋ฌธ์ œ๊ฐ€ ๋  ์ˆ˜ ์žˆ์œผ๋‹ˆ

์ฝ”๋“œ๋ฅผ ์ด์šฉํ•˜์‹œ๋Š” ๊ฑธ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค

 

์—”ํ‹ฐํ‹ฐ ์ด๋ฆ„์ด๋‚˜ ์—”ํ‹ฐํ‹ฐ ์ฝ”๋“œ ๋’ค์— ์˜ค๋Š” ์„ธ๋ฏธ์ฝœ๋ก (;)์€ ๊ผญ ๋ถ™์—ฌ์•ผ ํ•œ๋‹ค.

 

๋ฐ˜์‘ํ˜•