Session1_2. Semantic HTML

minj9_6ยท2021๋…„ 8์›” 18์ผ
0

TIL, WeCode, Courseย 

๋ชฉ๋ก ๋ณด๊ธฐ
11/48
post-thumbnail

*๐Ÿ”Study Keyword :

  • HTML ์ฝ”๋“œ๊ฐ€ ๐Ÿ”‘Semanticํ•ด์•ผ ํ•˜๋ฉฐ ๐Ÿ”‘์›น ์ ‘๊ทผ์„ฑ(Accessibility) ๊ณ ๋ คํ•ด์•ผํ•˜๋Š” ์ด์œ ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์žก

HTML Tags(ํ•„์ˆ˜๐Ÿ™‹โ€โ™€๏ธ)

  • ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” HTML ํƒœ๊ทธ๋“ค์˜ ์ข…๋ฅ˜์™€ ์ƒํ™ฉ ๋ณ„ ์–ด๋–ค ํƒœ๊ทธ๋ฅผ ๊ณจ๋ผ์„œ ์‚ฌ์šฉํ•  ์ง€ ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์•Œ๊ณ  ์žˆ์–ด์•ผํ•œ๋‹ค.

- Semantic Tag

<KEY NOTE>

- What is Semantic Tag


-WHAT ISโ“

  • ๐Ÿ‘‰์˜๋ฏธ๋ก ์ ์ธ HTML(semantic HTML)์ด๋ž€ Semantic Tag, Semantic Element๋กœ ๊ตฌ์„ฑ๋œ HTMLํŒŒ์ผ์ด๋‹ค.
<html>
<body>
	<header>
		<h1>์ œ๋ชฉ</h1>
		<h2>์†Œ์ œ๋ชฉ</h2>
	</header>
	<main>
		<ul>
			<li>๋ฐฐ</li>
			<li>ํฌ๋„</li>
			<li>์‚ฌ๊ณผ</li>
			<li>์˜ค๋ Œ์ง€</li>
		</ul>
		<article>
			<p>์ €๋Š” ์‚ฌ๊ณผ๋ฅผ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค.</p>
			<p>์ €๋Š” ํฌ๋„๋ฅผ ์‹ซ์–ดํ•ฉ๋‹ˆ๋‹ค.</p>
		<article>
	</main>
	<footer>
		<small>์ด์šฉ ์•ฝ๊ด€</small>
	</footer>
</body>
</html>
  • ๐Ÿ‘‰Semantic Tag๋Š” ๋ธŒ๋ผ์šฐ์ €์™€ ๊ฐœ๋ฐœ์ž ๋ชจ๋‘์—๊ฒŒ ์š”์†Œ๊ฐ€ ๊ฐ€์ง„ ์˜๋ฏธ๋ฅผ ์•Œ๋ ค์ค€๋‹ค.
    ๋ฐ˜๋ฉด <div>๋‚˜ <span> ํƒœ๊ทธ๋Š” ํƒœ๊ทธ ์ž์ฒด๋กœ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€์ง„ ์•Š๋Š”๋‹ค.
  • Semantic Tag๋„ ํƒœ๊ทธ์ฒ˜๋Ÿผ ๋‹ค์–‘ํ•œ ์ข…๋ฅ˜๋“ค์ด ์žˆ์œผ๋ฉฐ ํƒœ๊ทธ๋งˆ๋‹ค ๋‹ค๋ฅธ ์˜๋ฏธ๋ฅผ ์ง€๋‹Œ๋‹ค. ex> header, nav, section, aside, article, footer ๋“ฑ

-WHY USE TOโ“

    1. ์˜๋ฏธ๋ถ€์—ฌ ๊ทธ ์ž์ฒด๋กœ๋„ ๊ฐœ๋ฐœ์ž๊ฐ€ ์œ ์ง€๋ณด์ˆ˜์™€ ์›น ํŽ˜์ด์ง€ ๋ณ„๋กœ ์˜๋ฏธ๋ฅผ ์ฐพ์•„ ์ฝ”๋“œ ๋ถ„์„์„ ํ•˜๋Š”๋ฐ ์žˆ์–ด ํšจ์œจ์ ์ด๋‹ค.
    1. Semanticํ•œ ๋ฌธ์„œ๋Š” ๊ฒ€์ƒ‰์—”์ง„์ด HTML ํƒœ๊ทธ๋ฅผ ๋ถ„์„ํ•˜๋Š”๋ฐ ์žˆ์–ด ์œ ์˜๋ฏธํ•˜๊ฒŒ ํŒŒ์•…ํ•˜์—ฌ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO: Search Engine Optimization)์— ์˜ํ–ฅ**์„ ์ค€๋‹ค.
    1. ์ œํ•œ๋œ ํ™˜๊ฒฝ์—์„œ ๐Ÿ‘‰์ ‘๊ทผ์„ฑ(Accessibility)์ด ๋›ฐ์–ด๋‚˜๋‹ค.

- ์ ‘๊ทผ์„ฑ(Accessibility)

  • ๐Ÿ‘‰์ ‘๊ทผ์„ฑ(Accessibility)์€ ๋ชจ๋‘์—๊ฒŒ ์ ‘๊ทผ์ด ์–ผ๋งˆ๋งŒํผ ์šฉ์ดํ•œ๊ฐ€์— ๋Œ€ํ•œ ๊ฒƒ์ด๋‹ค.
  • ๐Ÿ‘‰์›น์—์„œ ๋งํ•˜๋Š” ์ ‘๊ทผ์„ฑ์€ ๋งŽ์€ ์‚ฌ๋žŒ์ด ์›น ์‚ฌ์ดํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.
    1> ์žฅ์• ์ธ๋„ ์›น ์ž๋ฃŒ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ
    2> ์›น ํŽ˜์ด์ง€๊ฐ€ ๋‹ค์–‘ํ•œ ์žฅ์น˜๋ฅผ ์ง€์›
    3> ์ธํ„ฐ๋„ท ์†๋„๊ฐ€ ๋Š๋ฆฐ ๊ฒฝ์šฐ๋„ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ ์—ญ์‹œ ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•˜๋Š” ํ–‰์œ„๋‹ค.
    =>ํ˜„์—…์— ๋‚˜๊ฐ”์„ ๋•Œ ๋ฐ˜๋“œ์‹œ ์ด๋Ÿฌํ•œ ๐Ÿ’ฅ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•ด์•ผํ•œ๋‹ค.

<์˜ˆ์‹œ>

  • ์ด๋ฏธ์ง€ ํ…Œ๊ทธ ์‚ฌ์šฉ์‹œ alt ์†์„ฑ์„ ๋ถ€์—ฌํ•˜์—ฌ ๋งŒ์•ฝ ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋“œ๋˜์ง€ ๋ชปํ•˜๋ฉด ๋Œ€์ฒด ํ…์ŠคํŠธ๊ฐ€ ๋‚˜ํƒ€๋‚˜๊ฒŒ ๋œ๋‹ค.
  • img ํƒœ๊ทธ๋ฅผ ์ž‘์„ฑ ์‹œ, alt ์†์„ฑ๋ถ€ํ„ฐ ๋จผ์ € ์ž‘์„ฑํ•˜๋Š” ์Šต๊ด€ ๊ธฐ๋ฅด์ž. ๋”ฐ๋ผ์„œ ๋ฌด์‹ฌ์ฝ” ๋น ๋œจ๋ฆฌ๊ธฐ ์‰ฌ์šด alt ์†์„ฑ๋ถ€ํ„ฐ ๋จผ์ € ์“ฐ๋Š” ์Šต๊ด€์„ ๊ธฐ๋ฅด๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
<img alt="GeeksforGeeks logo" src="์ด๋ฏธ์ง€URL"/>

Assignment #2_1 - ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹, <img> ํƒœ๊ทธ & <div> ํƒœ๊ทธ

  • ๐ŸŸกimg ํƒœ๊ทธ์˜ ์†์„ฑ์—๋Š” alt, src๊ฐ€ ์žˆ๋‹ค.
    • alt ์†์„ฑ์€ ๊ฐ’์œผ๋กœ ์ด๋ฏธ์ง€ ๋กœ๋“œ๊ฐ€ ์•ˆ๋  ๋•Œ ๋Œ€์‹  ๋ณด๋‚ด์ค„ ํ…์ŠคํŠธ ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๊ณ ,
    • src ์†์„ฑ์€ ๊ฐ’์œผ๋กœ ์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ ๊ฒฝ๋กœ ํ˜น์€ url์ฃผ์†Œ๋ฅผ ๋„ฃ์–ด์ค€๋‹ค.
  • ๐ŸŸกimg ํƒœ๊ทธ๋Š” src ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ ๊ฒฝ๋กœ๋‚˜ url ์ฃผ์†Œ๋ฅผ ๋„ฃ์–ด์„œ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์–ด์ค„ ์ˆ˜ ์žˆ๋‹ค.
  • ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๐ŸŸขdiv ํƒœ๊ทธ์—๋„ background-image์™€ background-color ์†์„ฑ์ด ์žˆ๋‹ค.
    • background-image์†์„ฑ๊ณผ background-color ์†์„ฑ์„ ์ด์šฉํ•ด ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๊ณ  ๋ฐฐ๊ฒฝ ์ƒ‰์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค.

Assignment #2_2 -<img> ํƒœ๊ทธ & <div> ํƒœ๊ทธ์˜ ์ด๋ฏธ์ง€ ๋„ฃ์„ ๋•Œ ์ฐจ์ด

  • ๐ŸŸกimg ํƒœ๊ทธ๋Š” HTML์˜ semantic tag๋กœ ํƒœ๊ทธ ์ž์ฒด์— ์˜๋ฏธ๋ฅผ ๋‹ด๊ณ  ์žˆ์–ด ์ด ํƒœ๊ทธ๋ฅผ ๋ณด๊ณ  ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋‚˜ ์ปดํ“จํ„ฐ๋Š” ํƒœ๊ทธ์˜ ์—ญํ• ์„ ์ง์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๊ทธ๋Ÿฌ๋‚˜ ๐ŸŸขdiv ํƒœ๊ทธ์˜ ๋ณธ๋ž˜ ์šฉ๋„๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š” ํƒœ๊ทธ๊ฐ€ ์•„๋‹ˆ๊ธฐ์— div ํƒœ๊ทธ๋ฅผ ๋ณด๊ณ  ์˜๋ฏธ๋ฅผ ํŒŒ์•…ํ•˜๊ธด ์–ด๋ ต๋‹ค.
    • ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์–ด์ฃผ๊ณ  ์‹ถ์„๋• CSS์—์„œ div ํƒœ๊ทธ์˜ background-image ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€ ์ฃผ์†Œ๋ฅผ ๋„ฃ์–ด์ค˜์•ผํ•œ๋‹ค
    • ๋˜ํ•œ div ํƒœ๊ทธ๋Š” block ์š”์†Œ๋กœ ๊ฐ€๋กœ ํฌ๊ธฐ๋Š” ํ™”๋ฉด์ „์ฒด๋ฅผ ์ฐจ์ง€ํ•˜๊ณ 
      ์„ธ๋กœ ํฌ๊ธฐ๋Š” div ํƒœ๊ทธ ๋‚ด๋ถ€์— ๋“ค์–ด๊ฐ„ ์ฝ˜ํ…์ธ (๋‚ด์šฉ)์ด๋‚˜ ์ž์‹ ์š”์†Œ ํฌ๊ธฐ์— ๋งž๋Š” ๋†’์ด๋ฅผ ์ฐจ์ง€ํ•œ๋‹ค.
      => ๋”ฐ๋ผ์„œ div ํƒœ๊ทธ์— ์•„๋ฌด ์š”์†Œ๋ฅผ ๋„ฃ์ง€ ์•Š์œผ๋ฉด ๊ฐ€๋กœ ์„ธ๋กœ๊ฐ€ 0px์ด๋‹ค.
      => ๊ทธ๋ž˜์„œ background-image ์†์„ฑ์œผ๋กœ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์„ ๋• div ํƒœ๊ทธ์—์„œ div ์ž์ฒด์˜ ๊ฐ€๋กœ์™€ ๋†’์ด๋ฅผ ์„ค์ •ํ•ด์ค˜์•ผํ•˜๋ฉฐ
      => ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์„ค์ •๋œ div ํƒœ๊ทธ์˜ ๊ฐ€๋กœ ์„ธ๋กœ ๋†’์ด์— ๋งž์ถฐ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ์›๋ณธํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๊ธฐ ์œ„ํ•ด์„œ background-size ์†์„ฑ์„ ์ค˜์•ผํ•˜๋ฉฐ 100% ๊ฐ’ ์ฃผ๋ฉด div ํƒœ๊ทธ ํƒœ๊ทธ์˜ ๊ฐ€๋กœํฌ๊ธฐ๋งŒํผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๊ฐ€ ์ฑ„์›Œ์„œ ๋“œ.๋””.์–ด๐Ÿ˜‚ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€๊ฐ€ ๋‚˜์˜จ๋‹ค.

*๐Ÿ’กconclusion

  • ์˜๋ฏธ๋ก ์ ์ธ ํƒœ๊ทธ(semantic tag)๋ž€ ๋ธŒ๋ผ์šฐ์ €์™€ ๊ฐœ๋ฐœ์ž ๋ชจ๋‘์—๊ฒŒ ์š”์†Œ๊ฐ€ ๊ฐ€์ง„ ์˜๋ฏธ๋ฅผ ์•Œ๋ ค์ค„ ์ˆ˜ ์žˆ๋Š” ํƒœ๊ทธ๋กœ semantic tag๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ semantic HTML ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
  • semantic ํƒœ๊ทธ๋Š” ์ฝ”๋“œ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์˜ ๋„์›€ ๋ฟ์•„๋‹ˆ๋ผ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)์™€ ์›น ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•ด์„œ๋„ ์ค‘์š”ํ•˜๋‹ค.
  • divํƒœ๊ทธ์™€ imgํƒœ๊ทธ์ฒ˜๋Ÿผ ๋‘ ํƒœ๊ทธ ๋ชจ๋‘ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ์ง€๋งŒ๊ทธ ๋ชฉ์ ๊ณผ ์˜๋ฏธ๊ฐ€๋‹ค๋ฅด๋‹ˆ ์ด๋Ÿฌํ•œ ์‚ฌํ•ญ์— ๋ถ€ํ•ฉ๊ฒŒ ํƒœ๊ทธ๋ฅผ ์„ ํƒํ•ด์„œ ์“ฐ์ž.

#๐Ÿ“‘Study Source

  • WeCode ์†Œํ—Œ๋‹˜์˜ ์™์™๊ฐ•์˜ ๋‚ด์šฉ ์ค‘:}
profile
์ž๊ธฐ ์‹ ๋ขฐ์˜ ํž˜์„ ๋ฏฟ๊ณ  ์‹ค์ฒœํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ ์žํ•ฉ๋‹ˆ๋‹ค.

2๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 8์›” 18์ผ

์ž˜ ๋ณด๊ณ  ๊ฐ‘๋‹ˆ๋‹ค

1๊ฐœ์˜ ๋‹ต๊ธ€