๐Ÿ’š UIUX ์›นํผ๋ธ”๋ฆฌ์…” ๊ณผ์ •(6๊ฐœ์›”)

2021-06-03 (52์ผ์ฐจ) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ - mouseenter, mouseleave, addClass, removeClass, hasClass, ์ƒ‰์ƒ๋ณ€๊ฒฝ๋ฒ„ํŠผ, ์ขŒ์ธก์—์„œ ์ด๋ฏธ์ง€ ๋“ค์–ด์˜ค๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜

widely design 2021. 6. 5. 01:48

21๊ฐ•~25๊ฐ•

 

- alert('๋‚ด์šฉ');

  ์‹คํ–‰๋˜๋Š”์ง€ ํ™•์ธํ•  ๋•Œ ์ž์ฃผ ์ด์šฉ๋จ  

 

- .mouseover๊ณผ .mouseout์€ ์‚ฌ์šฉ ๋น„์ถ”์ฒœ

 

- .mouseenter

  ๋งˆ์šฐ์Šค๊ฐ€ ๋‹ฟ์œผ๋ฉด ์‹คํ–‰

 

- .mouseleave

  ๋งˆ์šฐ์Šค๊ฐ€ ๋‹ฟ์•˜๋‹ค๊ฐ€ ๋–จ์–ด์ง€๋Š” ์ˆœ๊ฐ„ ์‹คํ–‰


- .addClass, .removeClass

  ํด๋ž˜์Šค ์ถ”๊ฐ€, ํด๋ž˜์Šค ์ œ๊ฑฐ

  ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  : ๊ธฐ์กด๊นŒ์ง€ ๋ฐฐ์›Œ์™”๋˜ ๋ฐฉ์‹์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ชจ๋‘ ๋‹ค ํ•ด๋ƒˆ์ง€๋งŒ(css๊ฐ’์„ ์ฃผ๋Š” ๋“ฑ…)

                        ๊ธฐ์กด์˜ ๋ฐฉ์‹์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์— ์‹ค๋ฌด์—์„œ ์ž˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ

                       → css์—์„œ class๋ฅผ ์ด์šฉํ•ด ๋จผ์ € ๊ฐ’์„ ์ค€ ํ›„, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‹คํ–‰์‹œํ‚ด

 

- ์‹คํ–‰๊ฐ’์— ํ•จ์ˆ˜๋ฅผ ํ•ฉ์ณ ์“ฐ๋Š” ๋ฐฉ๋ฒ•

  ๊ธฐ์กด์—๋Š” ํ•จ์ˆ˜๋ฅผ ์ง€์ •ํ•˜๊ณ  ์‹คํ–‰๊ฐ’์— ํ•จ์ˆ˜๋ฅผ ๋„ฃ์–ด์คฌ์—ˆ๋‹ค

  ํ•˜์ง€๋งŒ ํ•จ์ˆ˜ ์ง€์ •ํ•˜์ง€ ์•Š๊ณ  ํ•ฉ์ณ ์“ธ ์ˆ˜ ์žˆ์Œ

  ํ•จ์ˆ˜ ์ด๋ฆ„ ์ƒ๋žต ๊ฐ€๋Šฅ

  ex) ('ํƒœ๊ทธ').click(function() { });

 

- ์ƒ‰์ƒ ๋ณ€๊ฒฝ ๋ฒ„ํŠผ

  : 2๊ฐœ์˜ ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์–ด์„œ ์ด์šฉํ•  ๋•Œ

ํด๋ฆญํ•˜๋ฉด ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€๋˜๊ฒŒ ์‹คํ–‰์‹œํ‚ค๊ธฐ


- ์ƒ‰์ƒ ๋ณ€๊ฒฝ ๋ฒ„ํŠผ

  : isred=false ์ด์šฉ

  : ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ

 

- .hasClass~

  : ~๋ผ๋Š” Class๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. (๋‹จ์ •๋ฌธ)

  ใ„ด ์ฐธ/๊ฑฐ์ง“์œผ๋กœ ๋‚˜๋‰จ

 

- ์ƒ‰์ƒ ๋ณ€๊ฒฝ ๋ฒ„ํŠผ <์‹ค๋ฌด์‚ฌ์šฉ>

  : let์œผ๋กœ ํ•จ์ˆ˜ ์ง€์ • ํ›„, hasClass ์ด์šฉ

  : ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉ


< ์ขŒ์ธก→์šฐ์ธก ์ด๋ฏธ์ง€ ๋“ค์–ด์˜ค๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ >

โ€ป ์ œ์ด์ฟผ๋ฆฌ๋กœ ์Šคํƒ€์ผ์„ ์ง์ ‘ ์กฐ์ข…ํ•˜๋ฉด ์•ˆ ๋˜๊ณ , addClass๋ฅผ ์ด์šฉํ•ด์•ผ ํ•˜๋Š” ์ด์œ 

โ€ป ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ฌด์กฐ๊ฑด ์งง์•„์•ผ ์ข‹์Œ

 

  - ๋ฒ„์ „1) ์ œ์ด์ฟผ๋ฆฌ๋กœ ์ง์ ‘ ์Šคํƒ€์ผ ๋ณ€๊ฒฝ

 

  - ๋ฒ„์ „2) addClass๋กœ ์ œ์ด์ฟผ๋ฆฌ๋ฅผ ์ตœ์†Œํ™”