\
[๊ฐœ๋…] HTML - Semantic Element
ยท
๐Ÿ“š STUDY/HTML
์ด ๊ธ€์€ w3school๊ณผ MDN์˜ ๋‚ด์šฉ์„ ๊ณต๋ถ€ํ•˜์—ฌ ๊ฐœ์ธ์ ์ธ ํ•ด์„์„ ํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.ํ‹€๋ฆฐ ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ์„ธ์š” ๐Ÿ˜† ์‹œ๋งจํ‹ฑ ์š”์†Œ(Semantic Element)๋ž€?์‹œ๋งจํ‹ฑ(Semantic)์ด๋ผ๋Š” ๋‹จ์–ด์—์„œ ์•Œ ์ˆ˜ ์žˆ ๋“ฏ, ์˜๋ฏธ๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ์š”์†Œ๋“ค์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฐœ๋…์€ HTML ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ CSS, JavaScript์—์„œ๋„ ์ ์šฉ๋˜๋Š” ๊ฐœ๋…์ด๋ฉฐ, ์ด๋ฒˆ ๊ธ€์€ HTML ์œ„์ฃผ๋กœ ๋‹ค๋ฃน๋‹ˆ๋‹ค.  W3School์—์„œ ์†Œ๊ฐœํ•˜๋Š” ์ •์˜๋Š”   "A semantic element clearly describes its meaning to both the browser and the developer."๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ณด์—ฌ์ง€๋Š” ๋‹จ๊ณ„์™€ ๊ฐœ๋ฐœ ๋‹จ๊ณ„์—์„œ ๋ชจ๋‘ ์˜๋ฏธ๋ฅผ ๋ช…ํ™•ํžˆ ์•Œ ์ˆ˜ ์žˆ๋Š” ์š”์†Œ   ์‰ฝ๊ฒŒ ๋งํ•˜๋ฉด, ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๋Š” ํ™”๋ฉด๊ณผ ๊ฐœ๋ฐœ..
HTML(3) - ์†์„ฑ(Attribute)
ยท
๐Ÿ“š STUDY/HTML
2023.03.19 - [WEB/HTML] - HTML(2) - ์š”์†Œ(Element) HTML(2) - ์š”์†Œ(Element) ์ด์ „ ๊ธ€๊ณผ ๋‚ด์šฉ์ด ์ด์–ด์ง‘๋‹ˆ๋‹ค! HTML(1) - ๊ธฐ๋ณธ ๊ตฌ์กฐ HTML์˜ ๊ฐœ๋…์„ ์žก์•˜์œผ๋‹ˆ ์ž์„ธํžˆ ์•Œ์•„๋ณด์ž! ๊ฐœ๋…์ด ๊ถ๊ธˆํ•˜์‹œ๋ฉด ์ด์ „ ๊ธ€์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค! HTML์ด๋ž€?(๊ฐœ๋… ์ดํ•ด) ๊ฐœ๋ฐœ์ž ๋†๋‹ด ์ค‘์—” ์ด๋Ÿฐ ๊ธ€์ด ์žˆ๋‹ค. A: l1m3kun.tistory.com ์ด์ „ ๊ธ€๊ณผ ์ด์–ด์ง‘๋‹ˆ๋‹ค! HTML์„ ์ด์šฉํ•˜์—ฌ ๋ธ”๋กœ๊ทธ๋‚˜ Notion๊ฐ™์€ ํ”„๋กœ๊ทธ๋žจ์„ ์“ฐ๋‹ค๋ณด๋ฉด, ๋ถ€๋ถ„๋ถ€๋ถ„ ์ƒ‰์„ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ํ•˜์ดํผ ๋งํฌ๋ฅผ ๋„ฃ๋Š” ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ๋“ค์ด ํฌํ•จ๋˜์–ด์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฐ ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ ์†์„ฑ์ด๋‹ค! ์†์„ฑ ์†์„ฑ์„ ํ†ตํ•ด ํƒœ๊ทธ์˜ ๋ถ€๊ฐ€์ ์ธ ์ •๋ณด๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Œ ์š”์†Œ๋Š” ์†์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ฒฝ๋กœ๋‚˜ ํฌ๊ธฐ..
HTML(2) - ์š”์†Œ(Element)
ยท
๐Ÿ“š STUDY/HTML
์ด์ „ ๊ธ€๊ณผ ๋‚ด์šฉ์ด ์ด์–ด์ง‘๋‹ˆ๋‹ค! HTML(1) - ๊ธฐ๋ณธ ๊ตฌ์กฐ HTML์˜ ๊ฐœ๋…์„ ์žก์•˜์œผ๋‹ˆ ์ž์„ธํžˆ ์•Œ์•„๋ณด์ž! ๊ฐœ๋…์ด ๊ถ๊ธˆํ•˜์‹œ๋ฉด ์ด์ „ ๊ธ€์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค! HTML์ด๋ž€?(๊ฐœ๋… ์ดํ•ด) ๊ฐœ๋ฐœ์ž ๋†๋‹ด ์ค‘์—” ์ด๋Ÿฐ ๊ธ€์ด ์žˆ๋‹ค. A: ์–ด๋–ค ๊ฑธ๋กœ ์ฝ”๋”ฉํ•˜๋Š” ๊ฑธ ์ข‹์•„ํ•˜์„ธ์š”? B: ์ €๋Š” HTML๋กœ l1m3kun.tistory.com ์š”์†Œ(Element) ์‹œ์ž‘ ํƒœ๊ทธ์™€ ์ข…๋ฃŒ ํƒœ๊ทธ ๊ทธ๋ฆฌ๊ณ  ํƒœ๊ทธ ์‚ฌ์ด์— ์œ„์น˜ํ•œ ๋‚ด์šฉ์œผ๋กœ ๊ตฌ์„ฑ ์ปจํ…์ธ (๋‚ด์šฉ)๋ฅผ ๊ฐ์‹ธ๋Š” ๊ฒƒ์œผ๋กœ ๊ทธ ์ •๋ณด์˜ ์„ฑ๊ฒฉ๊ณผ ์˜๋ฏธ๋ฅผ ์ •์˜ ๋‚ด์šฉ์ด ์—†๋Š” ์—†๋Š” ํƒœ๊ทธ ๋‹ซ๋Š” ํƒœ๊ทธ ์—†์ด ์‚ฌ์šฉ ํƒœ๊ทธ(์š”์†Œ) ์šฉ๋„ ์ค„ ๋ฐ”๊ฟˆ ๊ตฌ๋ถ„์„  ์ด๋ฏธ์ง€ ์‚ฝ์ž…, scr ์†์„ฑ์„ ํ™œ์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€ ํ‘œํ˜„ ์ž…๋ ฅ์ฐฝ head ํƒœ๊ทธ์— ๋‚˜ํƒ€๋‚ด๋ฉฐ ์™ธ๋ถ€ ๋ฆฌ์†Œ์Šค ์—ฐ๊ฒฐ ๊ฒ€์ƒ‰ ์—”์ง„์„ ์œ„ํ•œ ํ‚ค์›Œ๋“œ, ์›นํŽ˜์ด์ง€ ์„ค๋ช…, ์ €์ž ์ •์˜ ๋“ฑ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ์ •์˜ํ•  ๋•Œ..
HTML(1) - ๊ธฐ๋ณธ ๊ตฌ์กฐ
ยท
๐Ÿ“š STUDY/HTML
HTML์˜ ๊ฐœ๋…์„ ์žก์•˜์œผ๋‹ˆ ์ž์„ธํžˆ ์•Œ์•„๋ณด์ž! ๊ฐœ๋…์ด ๊ถ๊ธˆํ•˜์‹œ๋ฉด ์ด์ „ ๊ธ€์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค! HTML์ด๋ž€?(๊ฐœ๋… ์ดํ•ด) ๊ฐœ๋ฐœ์ž ๋†๋‹ด ์ค‘์—” ์ด๋Ÿฐ ๊ธ€์ด ์žˆ๋‹ค. A: ์–ด๋–ค ๊ฑธ๋กœ ์ฝ”๋”ฉํ•˜๋Š” ๊ฑธ ์ข‹์•„ํ•˜์„ธ์š”? B: ์ €๋Š” HTML๋กœ ์ฝ”๋”ฉํ•˜๋Š” ๊ฑธ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค! A: ์•„.. ๋„ค.. ์ด ์ด์•ผ๊ธฐ๊ฐ€ ๋†๋‹ด์ธ ์ด์œ ๋Š” HTML์€ ์ฝ”๋”ฉ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋ผ Markup์–ธ์–ด์ด๊ธฐ l1m3kun.tistory.com ๊ธฐ๋ณธ ๊ตฌ์กฐ 1. html 2. head 3. body html ๋ฌธ์„œ ์ตœ์ƒ์œ„(root) ํƒœ๊ทธ "์—ฌ๊ธฐ๋Š” HTML์ด์•ผ! " ๋ผ๊ณ  ๋งํ•ด์ฃผ๋Š” ํƒœ๊ทธ head ๋ฌธ์„œ ์ œ๋ชฉ, ์ธ์ฝ”๋”ฉ, ์Šคํƒ€์ผ, ์™ธ๋ถ€ ํŒŒ์ผ ๋กœ๋”ฉ ๋“ฑ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ์š”์†Œ๋ฅผ ํฌํ•จํ•˜๋Š” ํƒœ๊ทธ ์˜ˆ์‹œ body ๋ฌธ์„œ์˜ ๋ณธ๋ฌธ ๋‚ด์šฉ(๊ธ€, ๊ทธ๋ฆผ, ์ž…๋ ฅ์ฐฝ, ๋ฒ„ํŠผ ๋“ฑ๋“ฑ) ์‹ค์ œ ํ™”๋ฉด ๊ตฌ์„ฑ๊ณผ ๊ด€๋ จ๋œ ๋‚ด์šฉ
HTML์ด๋ž€?(๊ฐœ๋… ์ดํ•ด)
ยท
๐Ÿ“š STUDY/HTML
๊ฐœ๋ฐœ์ž ๋†๋‹ด ์ค‘์—” ์ด๋Ÿฐ ๊ธ€์ด ์žˆ๋‹ค. A: ์–ด๋–ค ๊ฑธ๋กœ ์ฝ”๋”ฉํ•˜๋Š” ๊ฑธ ์ข‹์•„ํ•˜์„ธ์š”? B: ์ €๋Š” HTML๋กœ ์ฝ”๋”ฉํ•˜๋Š” ๊ฑธ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค! A: ์•„.. ๋„ค.. ์ด ์ด์•ผ๊ธฐ๊ฐ€ ๋†๋‹ด์ธ ์ด์œ ๋Š” HTML์€ ์ฝ”๋”ฉ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋ผ Markup์–ธ์–ด์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋Ÿผ HTML์ด๋ž€ ๋ฌด์—‡์ผ๊นŒ? HTML - Hyper Text Markup Language์˜ ์•ฝ์ž - ์›น ํŽ˜์ด์ง€๋ฅผ ์ž‘์„ฑ(๊ตฌ์กฐํ™”)ํ•˜๊ธฐ ์œ„ํ•œ ์–ธ์–ด - `.html` ํ™•์žฅ์ž ์‚ฌ์šฉ Hyper Text? ์ฐธ์กฐ(ํ•˜์ดํผ ๋งํฌ)๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ํ•œ ๋ฌธ์„œ์—์„œ ๋‹ค๋ฅธ ๋ฌธ์„œ๋กœ ์ฆ‰์‹œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ํ…์ŠคํŠธ ๋‹ค์‹œ ๋งํ•˜๋ฉด, ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€๋ฅผ ํ•œ ํŽ˜์ด์ง€ ์•ˆ์—์„œ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๊ธ€์”จ! Markup Language? ํƒœ๊ทธ ๋“ฑ์„ ์ด์šฉํ•˜์—ฌ ๋ฌธ์„œ๋‚˜ ๋ฐ์ดํ„ฐ์˜ ๊ตฌ์กฐ๋ฅผ ๋ช…์‹œํ•˜๋Š” ์–ธ์–ด ex - HTML, Markdown, ....