ํƒœ๊ทธ ๋ถ„์„๐Ÿงฑ

1888 ๋‹จ์–ด htmlbeginnerswebdev
์™œ <p>...</p>์™€ ๊ฐ™์€ HTML ์š”์†Œ๋‚˜ ๊ทธ์™€ ๊ฐ™์€ ๊ตฌ์กฐ๋ฅผ ์ž‘์„ฑํ•˜๋Š”์ง€ ๊ถ๊ธˆํ•˜์‹ญ๋‹ˆ๊นŒ?

๊ทธ๋ฆฌ๊ณ  ์ฒ˜์Œ์— cr*p๊ฐ€ HTML ์š”์†Œ๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

๋จผ์ € ์˜ˆ๋ฅผ ๋“ค์–ด ๋ณด์—ฌ๋“œ๋ฆฌ์ž๋ฉด,

<p>My Cat is very grumpy</p>




ํƒœ๊ทธ ์—ด๊ธฐ: ๋ธŒ๋ผ์šฐ์ €์— "์ด์ œ ๋‚˜ ๋’ค์— ์˜ค๋Š” ๋‚ด์šฉ์„ ๋‹จ๋ฝ์œผ๋กœ ์ฝ๊ฑฐ๋‚˜ ๋‚ด๊ฐ€ ์˜๋ฏธํ•˜๋Š” ํƒœ๊ทธ๋ฅผ ์ฝ๊ธฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค."๋ผ๊ณ  ์ง€์‹œํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ

Browsers read from Top to Bottom & Left to Right.



๋‚ด์šฉ์„ ๋‹จ๋ฝ์œผ๋กœ ์ฝ์Šต๋‹ˆ๋‹ค.

๋‚ด์šฉ: ์ด๊ฒƒ์€ ์‚ฌ์šฉ์ž ๋˜๋Š” ๋ทฐ์–ด๋กœ์„œ ์šฐ๋ฆฌ๊ฐ€ ๋ณด๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์—ฌ๋Ÿฌ๋ถ„์ด ๋ณด๊ณ  ์žˆ๋Š” ๋‹จ์–ด์™€ ๋ฌธ์žฅ์˜ ๊ธ€์ž๋Š” HTML์—์„œ ๋‚ด์šฉ์œผ๋กœ ์“ฐ์—ฌ์ง„ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.

๋‹ซ๋Š” ํƒœ๊ทธ: "์ž˜ํ•˜์…จ์Šต๋‹ˆ๋‹ค. ์ด์ œ ๋‚ด์šฉ์„ ๋‹จ๋ฝ์œผ๋กœ ์ฝ๋Š” ๊ฒƒ์„ ์ค‘๋‹จํ•˜๊ณ  ๋‹ค์Œ ์ง€์นจ์œผ๋กœ ๋„˜์–ด๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค."๋ผ๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ํ‘œ์‹œ์ž…๋‹ˆ๋‹ค.

์ด์ œ ๋‘ ๋ฒˆ์งธ ์งˆ๋ฌธ์œผ๋กœ ๋Œ์•„๊ฐ€ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. HTML ์š”์†Œ๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
๋”ฐ๋ผ์„œ ์ผ๋ฐ˜์ ์œผ๋กœ

The consistency of the opening tag, content, and closing tag is called an HTML element.



๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์ด ์š”์†Œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ ์•„๋‹™๋‹ˆ๋‹ค. ์š”์†Œ๋Š” ํ›จ์”ฌ ๋” ๋ณต์žกํ•˜๊ณ  ๋‹ค๋ฅธ ์š”์†Œ์— ์ค‘์ฒฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, ์ง€๋‚œ ์ฃผ <h1> ํƒœ๊ทธ์™€ <p> ํƒœ๊ทธ๊ฐ€ <body> ํƒœ๊ทธ/์š”์†Œ ๋‚ด๋ถ€์— ์žˆ์—ˆ๋˜ ๊ฒƒ์„ ๊ธฐ์–ตํ•˜์…จ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‹ค๋ฅธ ํƒœ๊ทธ๋„ ์ค‘์ฒฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<p>My cat is <strong>very grumpy.</strong></p>


'๋‚ด ๊ณ ์–‘์ด๋Š” ๋งค์šฐ ์‹ฌ์ˆ ๊ถ‚๋‹ค'๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋‚ด์šฉ์ด๋‚˜ ๋‹ซ๋Š” ํƒœ๊ทธ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์€ ํƒœ๊ทธ/์š”์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ:

<img src="image.jpg" alt="" >


์ด ํƒœ๊ทธ๋Š” ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ด๊ฒƒ์€ ์ด๋ฏธ์ง€ ์š”์†Œ์ด์ง€๋งŒ ๋‚ด์šฉ์ด๋‚˜ ๋‹ซ๋Š” ํƒœ๊ทธ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ž์ฒด ๋‹ซ๋Š” ํƒœ๊ทธ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค(ํ•˜์ง€๋งŒ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” ๋‚˜์ค‘์— ์ด๋ฏธ์ง€ ์š”์†Œ์— ํ•œ ์ฃผ๋ฅผ ํ• ์• ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.)

๊ทธ๋ฆฌ๊ณ  ํƒœ๊ทธ๋Š” ๋‹จ์ˆœํžˆ ์ด๋ฆ„์ด๋‚˜ ๋ณต์žกํ•œ ๋ช…๋ น ๋˜๋Š” ์•ก์„ธ์Šค ๊ฐ€๋Šฅ์„ฑ์„ ์œ„ํ•ด ์†์„ฑ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ ์ฃผ์— ์ด์— ๋Œ€ํ•ด ๋…ผ์˜ํ•  ์˜ˆ์ •์ด๋‹ˆ ๊ทธ๋•Œ๊นŒ์ง€ ์•ˆ์ „์„ ์œ ์ง€ํ•˜์‹ญ์‹œ์˜ค.

ํ•œ ๊ณณ์—์„œ ๋ชจ๋“  ๊ฒŒ์‹œ๋ฌผ์„ ๋ณด๋ ค๋ฉด This Web App์„ ๋ฐฉ๋ฌธํ•˜์‹ญ์‹œ์˜ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ