HTML(ํ•˜์ดํผํ…์ŠคํŠธ ๋งˆํฌ์—… ์–ธ์–ด)์—์„œ ์†์„ฑ(Attribute)๊ณผ ํ”„๋กœํผํ‹ฐ(Property)

HTML(ํ•˜์ดํผํ…์ŠคํŠธ ๋งˆํฌ์—… ์–ธ์–ด)์—์„œ ์†์„ฑ(Attribute)๊ณผ ํ”„๋กœํผํ‹ฐ(Property)๋Š” ํŠน์ • ์š”์†Œ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ์šฉ์–ด์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‘ ์šฉ์–ด ๊ฐ„์—๋Š” ๋ช‡ ๊ฐ€์ง€ ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์†์„ฑ(Attribute)

  • HTML ์š”์†Œ์— ๋Œ€ํ•œ ๋ถ€๊ฐ€์ ์ธ ์ •๋ณด๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • ์ด๋ฆ„๊ณผ ๊ฐ’์˜ ์Œ์œผ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
<a href="https://www.example.com">๋งํฌ</a>
์œ„์˜ ์˜ˆ์—์„œ href๋Š” ์†์„ฑ์ด๋ฉฐ, "https://www.example.com"์€ ํ•ด๋‹น ์†์„ฑ์˜ ๊ฐ’์ž…๋‹ˆ๋‹ค.

ํ”„๋กœํผํ‹ฐ(Property)

  • JavaScript์—์„œ DOM(๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ)์„ ํ†ตํ•ด HTML ์š”์†Œ์— ์ ‘๊ทผํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ์šฉ์–ด์ž…๋‹ˆ๋‹ค.
  • HTML ์š”์†Œ์˜ ์†์„ฑ์€ ๋Œ€์‘ํ•˜๋Š” DOM ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋กœ ๋งคํ•‘๋ฉ๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
<div id="myDiv">๋‚ด ๋””๋ธŒ</div>

var element = document.getElementById("myDiv");
console.log(element.id); // "myDiv"
๊ฐ„๋‹จํžˆ ๋งํ•˜๋ฉด, ์†์„ฑ์€ HTML์—์„œ ์ •์˜๋˜์–ด ์žˆ๊ณ  ๋ฌธ์„œ๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฉฐ, ํ”„๋กœํผํ‹ฐ๋Š” JavaScript๋ฅผ ํ†ตํ•ด DOM์„ ์กฐ์ž‘ํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ๋‘ ์šฉ์–ด๊ฐ€ ์ƒํ˜ธ ์šด์šฉ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋งŽ์€ ๊ฒฝ์šฐ์—๋Š” ๋‘ ์šฉ์–ด๋ฅผ ํ˜ผ์šฉํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค.