๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์Šคํฌ๋ฆฝํŠธ2

[JAVASCRIPT] ์ •๊ทœ ํ‘œํ˜„์‹ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ : ์ •๊ทœ ํ‘œํ˜„์‹(ํŒจํ„ด) ์ •๊ทœ ํ‘œํ˜„์‹์ด๋ž€? ํŠน์ •ํ•œ ๊ทœ์น™์„ ๊ฐ€์ง„ ๋ฌธ์ž์—ด์˜ ์ง‘ํ•ฉ์„ ํ‘œํ˜„ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ํ˜•์‹ ์–ธ์–ด์ด๋ฉฐ ๋ฌธ์ž์—ด์—์„œ ํŠน์ • ๋ฌธ์ž ์กฐํ•ฉ์„ ์ฐพ๊ธฐ ์œ„ํ•œ ํŒจํ„ด์ž…๋‹ˆ๋‹ค! ์ฆ‰ ์‰ฝ๊ฒŒ ๋งํ•ด์„œ ๋ฌธ์ž์—ด์—์„œ ํŠน์ • ๋ฌธ์ž๋ฅผ ์ฐพ์•„๋‚ด๋Š” ๋„๊ตฌ๋ผ๊ณ ๋„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! #1. ์ •๊ทœ ํ‘œํ˜„์‹ ๊ฐ์ฒด ์ฃผ์š” ํŒจํ„ด ์ •๊ทœ ํ‘œํ˜„์‹์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐํ˜ธ๋ฅผ ๋ฉ”ํƒ€(meta) ๋ฌธ์ž๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ํŒจํ„ด ์„ค๋ช… abc abc ๋ฌธ์ž์—ด์„ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค. /abc/๋Š” 'abc' [abc] a, b, c ์ค‘ ๋ฌธ์ž ํ•˜๋‚˜๋ฅผ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค. /[abc]d/๋Š” 'ad', 'bd', 'cd' [^abc] a, b, c ์ค‘ ๋ฌธ์ž ํ•˜๋‚˜๋ฅผ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค. /[abc]d/๋Š” 'ad', 'bd', 'cd' [A-Z] ์•ŒํŒŒ๋ฒณ ๋Œ€๋ฌธ์ž๋ฅผ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค. [a-z] ์•ŒํŒŒ๋ฒณ ์†Œ๋ฌธ์ž๋ฅผ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค. [.. 2022. 8. 17.
์š”์†Œ ์„ ํƒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์š”์†Œ ์„ ํƒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ CSS ์„ ํƒ์ž๋ฅผ ๋„˜๊ฒจ์„œ ์›ํ•˜๋Š” HTML ์š”์†Œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ๋„๋ก ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ querySelector() ํ•จ์ˆ˜๋Š” ์„ ํƒ์ž์— ๋ถ€ํ•ฉํ•˜๋Š” ์š”์†Œ ์ค‘์—์„œ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋งŒ์„ ๋ฐ˜ํ™˜ํ•˜๊ณ , querySelectorAll() ํ•จ์ˆ˜๋Š” ์„ ํƒ์ž์— ๋ถ€ํ•ฉํ•˜๋Š” ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. 01. ์š”์†Œ๋ฅผ ์ง์ ‘ ์„ ํƒํ•˜๋Š” ๋ฉ”์„œ๋“œ ๋ฉ”์„œ๋“œ ์†์„ฑ ์ž…๋ ฅ ๋ฐฉ๋ฒ• : document . ๋ฉ”์„œ๋“œ๋ช… ( ' ์š”์†Œ๋ช… ' ) ๋ฉ”์„œ๋“œ ์„ค๋ช… getElementById() HTML ์š”์†Œ ์ค‘ id ์†์„ฑ์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•œ๋‹ค. ex) document.getElementById('header') getElementByClassName() HTML ์š”์†Œ ์ค‘ class๋ช…์œผ๋กœ ์„ ์–ธํ•œ ์š”์†Œ๋ฅผ ์„ ํƒํ•œ๋‹ค. ex) document.g.. 2022. 8. 7.
728x90
๋ฐ˜์‘ํ˜•

Lucky Charms Rainbow
js
html
css