728x90
λ°˜μ‘ν˜•
 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery All in One] κΈ°μ‘΄ 컨텐츠λ₯Ό λ‘˜λŸ¬μ‹Ό μƒˆλ‘œμš΄ 컨텐츠λ₯Ό μ‚½μž…ν•˜λŠ” 방법 (unwrap, wrap, wrapAll, wrapInner)

.unwrap() - μ§€μ •ν•œ μš”μ†Œμ˜ λΆ€λͺ¨μš”μ†Œλ₯Ό 제거 .wrap() - μ§€μ •ν•œ μš”μ†Œλ₯Ό wrap의 λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬ν•œ νƒœκ·Έλ‘œ 감싼닀 .wrapAll() - μ§€μ •ν•œ ν΄λž˜μŠ€λ“€μ„ wrapAll λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬ν•œ νƒœκ·Έλ‘œ λͺ¨λ‘ 감싼닀 .wrapInner() - μ§€μ •ν•œ μš”μ†Œμ— μžμ‹ 컨텐츠λ₯Ό wrapInner λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬ν•œ νƒœκ·Έλ‘œ 감싼닀. .unwrap() // μ§€μ •ν•œ μš”μ†Œμ˜ λΆ€λͺ¨μš”μ†Œλ₯Ό μ œκ±°ν•œλ‹€. $('p').unwrap(); .wrap() // μ§€μ •ν•œ μš”μ†Œλ₯Ό wrap의 λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬ν•œ νƒœκ·Έλ‘œ 감싼닀. $('p').wrap(''); .wrapAll() // μ§€μ •ν•œ ν΄λž˜μŠ€λ“€μ„ wrapAll λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬ν•œ νƒœκ·Έλ‘œ λͺ¨λ‘ 감싼닀 $('.inner').wrapAll(''); .wrapInner() // μ§€μ •ν•œ μš”μ†Œμ— μžμ‹..

2020.02.22 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery All in One] νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— μ›ν•˜λŠ” 컨텐츠λ₯Ό μ‚½μž…ν•˜λŠ” 방법 - . prependTo()

jQuery prependTo λ©”μ„œλ“œλŠ” μ§€μ •ν•œ μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ“€μ˜ κ°€μž₯ μ•žμͺ½μ— μ›ν•˜λŠ” 컨텐츠λ₯Ό μ‚½μž…ν•©λ‹ˆλ‹€. Javascript λ°°μ—΄μ—μ„œ unshift λ©”μ„œλ“œλ₯Ό μƒκ°ν•˜μ‹œλ©΄ 이해가 νŽΈν•  것 κ°™μŠ΅λ‹ˆλ‹€. .append() - νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .appendTo() - νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .prepend() - νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .prependTo() - νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .html() - νŠΉμ • μš”μ†Œμ— html을 μ‚½μž… jQuery version: 3.4.1 .prependTo(target) μ„€λͺ… : μΌμΉ˜ν•˜λŠ” μš”μ†Œλ₯Ό λŒ€μƒμ˜ 끝에 μ‚½μž…ν•©λ‹ˆλ‹€. .prependTo(target) target Type: Selector or htmlString or Elem..

2020.02.16 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery All in One] νŠΉμ • μš”μ†Œμ— μ›ν•˜λŠ” μš”μ†Œλ₯Ό μ‚½μž…ν•˜λŠ” 방법 - .html()

jQuery html λ©”μ„œλ“œλŠ” μ§€μ •ν•œ μš”μ†Œμ˜ μžμ‹ μš”μ†Œμ— μ›ν•˜λŠ” 컨텐츠λ₯Ό μ‚½μž…ν•©λ‹ˆλ‹€. Javascript λ©”μ„œλ“œ 쀑에 innerHTML을 λ– μ˜¬λ¦¬μ‹œλ©΄ λ©λ‹ˆλ‹€. .append() - νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .appendTo() - νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .prepend() - νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .prependTo() - νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .html() - νŠΉμ • μš”μ†Œμ— html을 μ‚½μž… jQuery version: 3.4.1 .html() μ„€λͺ… : μΌμΉ˜ν•˜λŠ” μš”μ†Œ μ§‘ν•©μ—μ„œ 첫 번째 μš”μ†Œμ˜ HTML λ‚΄μš©μ„ κ°€μ Έμ˜΅λ‹ˆλ‹€. .html() 이 λ©”μ†Œλ“œλŠ” λ§€κ°œλ³€μˆ˜λ₯Ό 받지 μ•ŠμŠ΅λ‹ˆλ‹€. 이 방법은 XML λ¬Έμ„œμ—μ„œ μ‚¬μš©ν•  수 μ—†μŠ΅λ‹ˆλ‹€. HTML λ¬Έμ„œμ—μ„œ .html ()을 μ‚¬μš©ν•˜μ—¬..

2020.02.16 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery All in One] νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— μ›ν•˜λŠ” 컨텐츠λ₯Ό μ‚½μž…ν•˜λŠ” 방법 - .appendTo()

jQuery appendTo λ©”μ„œλ“œλŠ” μ§€μ •ν•œ μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ“€μ˜ κ°€μž₯ λ’€μͺ½μ— μ›ν•˜λŠ” 컨텐츠λ₯Ό μ‚½μž…ν•©λ‹ˆλ‹€. Javascript λ°°μ—΄μ—μ„œ push λ©”μ„œλ“œλ₯Ό μƒκ°ν•˜μ‹œλ©΄ 이해가 νŽΈν•  것 κ°™μŠ΅λ‹ˆλ‹€. .append() - νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .appendTo() - νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .prepend() - νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .prependTo() - νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .html() - νŠΉμ • μš”μ†Œμ— html을 μ‚½μž… jQuery version: 3.4.1 .appendTo(target) μ„€λͺ… : μΌμΉ˜ν•˜λŠ” μš”μ†Œλ₯Ό λŒ€μƒμ˜ 끝에 μ‚½μž…ν•©λ‹ˆλ‹€. .appendTo(target) target Type: Selector or htmlString or Element or..

2020.02.16 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery All in One] νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— μ›ν•˜λŠ” 컨텐츠λ₯Ό μ‚½μž…ν•˜λŠ” 방법 - .append()

jQuery append λ©”μ„œλ“œλŠ” μ§€μ •ν•œ μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ“€μ˜ κ°€μž₯ λ’€μͺ½μ— μ›ν•˜λŠ” 컨텐츠λ₯Ό μ‚½μž…ν•©λ‹ˆλ‹€. Javascript λ°°μ—΄μ—μ„œ push λ©”μ„œλ“œλ₯Ό μƒκ°ν•˜μ‹œλ©΄ 이해가 νŽΈν•  것 κ°™μŠ΅λ‹ˆλ‹€. .append() - νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .appendTo() - νŠΉμ • μš”μ†Œμ˜ λ’€μͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .prepend() - νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .prependTo() - νŠΉμ • μš”μ†Œμ˜ μ•žμͺ½μ— 컨텐츠λ₯Ό μ‚½μž… .html() - νŠΉμ • μš”μ†Œμ— html을 μ‚½μž… jQuery version: 3.4.1 .append( content [, content ] ) μ„€λͺ… : λ§€κ°œλ³€μˆ˜λ‘œ μ§€μ •λœ 컨텐츠λ₯Ό μΌμΉ˜ν•˜λŠ” μš”μ†Œμ˜ 끝에 μ‚½μž…ν•©λ‹ˆλ‹€. .append( content [, content ] ) content Type..

2020.02.16 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery All in One] μΌμΉ˜ν•˜λŠ” μš”μ†Œ λ³΅μ‚¬ν•˜λŠ” 방법 (clone)

jQuery version: 3.4.1 .clone([withDataAndEvents]) μ„€λͺ… : μΌμΉ˜ν•˜λŠ” μš”μ†Œλ₯Ό κΉŠμ€ 볡사(deep copy) ν•©λ‹ˆλ‹€. .clone([withDataAndEvents]) withDataAndEvents (default: false) Type: Boolean 이벀트 ν•Έλ“€λŸ¬μ™€ 데이터λ₯Ό μš”μ†Œμ™€ ν•¨κ»˜ λ³΅μ‚¬ν•΄μ•Όν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λ‚΄λŠ” Boolean κ°’μž…λ‹ˆλ‹€. .clone([withDataAndEvents][, deepWithDataAndEvents]) withDataAndEvents (default: false) Type: Boolean 이벀트 ν•Έλ“€λŸ¬μ™€ 데이터λ₯Ό μš”μ†Œμ™€ ν•¨κ»˜ λ³΅μ‚¬ν•΄μ•Όν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λ‚΄λŠ” Boolean κ°’μž…λ‹ˆλ‹€. deepWithDataAndEvents (defaul..

2020.02.15 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery All in One] 클래슀 μ„ νƒμž 닀루기 (addClass, removeClass, hasClass, toggleClass)

jQuery version: 3.4.1 .addClass( className ) μ„€λͺ… : μ§€μ •λœ 클래슀λ₯Ό μΌμΉ˜ν•˜λŠ” μš”μ†Œ μ§‘ν•©μ˜ 각 μš”μ†Œμ— μΆ”κ°€ν•©λ‹ˆλ‹€. .addClass( className ) className Type: String .addClass( function ) function Type: Function( Integer index, String currentClassName ) => String μ‚¬μš©μ˜ˆμ‹œ μš”μ†Œμ˜ μ§‘ν•©μ—μ„œ μ„ νƒλœ μš”μ†Œμ˜ 클래슀λ₯Ό μΆ”κ°€ν•˜λŠ” μ˜ˆμ‹œμž…λ‹ˆλ‹€. .removeClass( className ) μ„€λͺ… : μ§€μ •λœ 클래슀λ₯Ό μΌμΉ˜ν•˜λŠ” μš”μ†Œ μ§‘ν•©μ˜ 각 μš”μ†Œμ—μ„œ μ œκ±°ν•©λ‹ˆλ‹€. .removeClass( className ) className Type: String .removeClass( fu..

2020.02.13 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

jQuery contains() λ©”μ„œλ“œλ₯Ό ν™œμš©ν•œ 검색기λŠ₯ κ΅¬ν˜„

μ„œλ‘  μ•ˆλ…•ν•˜μ„Έμš”. 정말 μ˜€λžœλ§Œμ— ν¬μŠ€νŒ…μ„ λ‚¨κΈ°λ„€μš” γ…Žγ…Ž κ²¨μšΈλ°©ν•™μ΄ μ‹œμž‘ν•˜κ³  1μ›”μ€‘λ§κΉŒμ§€ 정말 λ§Žμ€ 일듀이 μžˆμ—ˆλ„€μš”.γ…Žγ…Ž 사싀 이 μΌλ“€λ•Œλ¬Έμ— 글을 μž‘μ„±ν•˜μ§€ λͺ»ν–ˆλ‹€λŠ” 것은 핑계인 것 κ°™κ³ , μ•žμœΌλ‘œ κΎΈμ€€νžˆ 기술 ν¬μŠ€νŒ…μ„ ν•˜λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. κ·Έλž˜λ„ 쒋은 μ†Œμ‹μ΄ μžˆλ‹€λ©΄, 2μ›” 1일뢀터 ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžλ‘œμ„œ 첫 μΆœκ·Όμ„ μ‹œμž‘ν•œλ‹€λŠ” μ μž…λ‹ˆλ‹€. κ·Έλž˜λ„ ν•™λΆ€μ‹œμ ˆμ— λ‚˜λ¦„λŒ€λ‘œ 이μͺ½ λΆ„μ•Όλ‘œ κ°€κ³ μ‹Άμ–΄μ„œ 독학을 ν•˜λ©° μ‹€λ ₯을 ν‚€μ›Œλ‚˜κ°”λŠ”λ°, 첫 직μž₯을 μ œκ°€ 가고싢은 λΆ„μ•Όλ‘œ λ‚˜μ•„κ°ˆ 수 있게 λ˜μ–΄μ„œ 정말 λ§Œμ‘±μŠ€λŸ½μŠ΅λ‹ˆλ‹€.γ…Žγ…Ž 이제 μ•žμœΌλ‘œ μ—­λŸ‰μ„ 많이 μŒ“μ•„λ‚˜κ°€λ©΄μ„œ 정말 μ „λ¬Έκ°€λ‹€μš΄ ν¬μŠ€νŒ…μ„ 많이 남기도둝 ν•˜κ² μŠ΅λ‹ˆλ‹€! γ…Žγ…Ž 였늘 μ œκ°€ ν¬μŠ€νŒ…ν•  μ£Όμ œλŠ” jQuery의 contains() λ©”μ„œλ“œλ₯Ό ν™œμš©ν•œ κ°„λ‹¨ν•œ 검색기λŠ₯ κ΅¬ν˜„μž…λ‹ˆλ‹€. contains(..

2017.01.29 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/UI개발

[UI 개발] responsive image gallery(λ°˜μ‘ν˜• μ΄λ―Έμ§€κ°€λŸ¬λ¦¬)

였늘 μ˜ˆμ œλŠ” λ°˜μ‘ν˜• μ΄λ―Έμ§€κ°€λŸ¬λ¦¬μž…λ‹ˆλ‹€.μžλ°”μŠ€ν¬λ¦½νŠΈλ‚˜ jQueryλ₯Ό ν™œμš©ν•˜μ§€ μ•Šκ³ , 순수 HTML, CSS 코딩을 톡해 λ°˜μ‘ν˜• μ΄λ―Έμ§€κ°€λŸ¬λ¦¬λ₯Ό κ΅¬ν˜„ν•˜λŠ” 것이 ν¬μŠ€νŒ…μ˜ λͺ©ν‘œμž…λ‹ˆλ‹€. λ°”λ‘œ 예제λ₯Ό λ³΄λ©΄μ„œ μ‹œμž‘ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. HTML μ‹œλ§¨ν‹±λ§ˆν¬μ—… CSS3 μ΄λ―Έμ§€λŠ” 각자 파일의 κ²½λ‘œμ— λ§žμΆ°μ„œ μž‘μ„±ν•΄μ£Όμ‹œκΈ° λ°”λžλ‹ˆλ‹€. μœ„μ˜ μ½”λ“œλŠ” λΈŒλΌμš°μ €λ‚˜ λ””λ°”μ΄μŠ€μ˜ 크기에 따라 μœ λ™μ μœΌλ‘œ λ³€ν•˜κ²Œ λ§Œλ“€μ–΄ μ€λ‹ˆλ‹€. 맨 μœ„μ˜ @media all and (min-width: 960px)λŠ” 960px 이상 μ‚¬μ΄μ¦ˆλΆ€ν„°λŠ” #gallery_layout을 κ°€λ‘œ, μ„Έλ‘œ κ°€μš΄λ° 정렬을 μ‹œμΌœμ£ΌκΈ° μœ„ν•΄ μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€. ν…ŒμŠ€νŠΈλŠ” ν•˜λ‹¨μ˜ URLμ—μ„œ ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€. http://mismaven.kr/test/responsive_gallery/index.htm..

2016.12.10 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

Computer science/μ•Œκ³ λ¦¬μ¦˜

[μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ κ΅¬ν˜„ν•œ μ•Œκ³ λ¦¬μ¦˜] List Filtering

In this kata you will create a function that takes a list of non-negative integers and strings and returns a new list with the strings filtered out. Example filter_list([1,2,'a','b']) == [1,2] filter_list([1,'a','b',0,15]) == [1,0,15] filter_list([1,2,'aasf','1','123',123]) == [1,2,123] ν•„μžλ‹΅μ•ˆ map을 μ‚¬μš©ν•˜κΈ΄ ν–ˆμ§€λ§Œ, λ­”κ°€ 2%λΆ€μ‘±ν•œ λ‹΅μ•ˆμž…λ‹ˆλ‹€. μ œκ°€ μ›ν–ˆλ˜κ±΄ map을 μ‚¬μš©ν•΄μ„œ type이 number라면 κ·Έ κ°’λ§Œ λ‚˜μ˜€κ²Œ ν•˜λŠ” κ²ƒμ΄μ—ˆλŠ”λ° numberκ°€ μ•„λ‹Œ 값듀은 λͺ¨λ‘ undef..

2016.10.19 κ²Œμ‹œλ¨

개발/jQuery

[jQuery] μ˜ˆμ œμ™€ ν•¨κ»˜ν•˜λŠ” 제이쿼리 κ°•μ˜ (jQuery - addClass() / hasClass() / removeClass() / toggleClass())

μ˜ˆμ œμ™€ ν•¨κ»˜ν•˜λŠ” 제이쿼리 κ°•μ˜ μ΄λ²ˆμ— λ‹€λ£° κΈ°λŠ₯은 addClass() / hasClass() / removeClass() / toggleClass() λ©”μ†Œλ“œμž…λ‹ˆλ‹€. jQuery addClass() .addClass() λ©”μ†Œλ“œλŠ” νŠΉμ •ν•œ 클래슀λ₯Ό μš”μ†Œμ— μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 문법.addClass( className )className ( μ§€μ •ν•œ 클래슀 이름을 μΆ”κ°€) λ°μ΄ν„°νƒ€μž… : λ¬Έμžμ—΄(String) 1개 λ˜λŠ” 2개 μ΄μƒμ˜ ν΄λž˜μŠ€λ“€μ„ 속성에 μΆ”κ°€ν•©λ‹ˆλ‹€. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String ν•¨μˆ˜μ—μ„œ λ°˜ν™˜λœ 클래슀λ₯Ό 속성에 μΆ”κ°€ν•©λ‹ˆλ‹€.μ—¬κΈ°μ„œ ν•¨μˆ˜λŠ” 인자(λ§€κ°œλ³€μˆ˜) κ°’μœΌλ‘œ in..

2016.10.19 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

Computer science/μ•Œκ³ λ¦¬μ¦˜

[μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ κ΅¬ν˜„ν•œ μ•Œκ³ λ¦¬μ¦˜] Sum of the first nth term of Series

Description: Task: Your task is to write a function which returns the sum of following series upto nth term(parameter). Series: 1 + 1/4 + 1/7 + 1/10 + 1/13 + 1/16 +... Rules:Β· You need to round the answer upto 2 decimal places and return it as String.Β· If the given value is 0 then it should return 0.00Β· You will only be given Natural Numbers as arguments. Examples: SeriesSum(1) => 1 = "1" Series..

2016.10.19 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/UI개발

[UI 개발] css3 - tab menu μ œμž‘(κ°„λ‹¨ν•œ 탭메뉴 μ œμž‘)

πŸ– λ“€μ–΄κ°€κΈ° 전에 μ΄λ²ˆμ—λŠ” κ°„λ‹¨ν•œ 탭메뉴λ₯Ό μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό 톡해 κ΅¬ν˜„ν•œ μ½”λ“œλ₯Ό κ³΅μœ ν•˜λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. μ•„λž˜μ— μ˜ˆμ‹œμ²˜λŸΌ λ™μž‘ν•˜λŠ” UIλ₯Ό κ°œλ°œν•˜λŠ” 것이 이번 ν¬μŠ€νŒ…μ˜ λͺ©ν‘œμž…λ‹ˆλ‹€. πŸ’» HTML μ‹œλ©˜ν‹±λ§ˆν¬μ—… How to develop a tab menu with jQuery μ œμž‘μž : 박경두 κ³ λ €λŒ€ν•™κ΅ κ²½μ˜μ •λ³΄ν•™κ³Ό λ©‹μŸμ΄ μ‚¬μžμ²˜λŸΌ 4κΈ° About Portfolio Contact Travel About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ..

2016.10.18 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery] μ˜ˆμ œμ™€ ν•¨κ»˜ν•˜λŠ” 제이쿼리 κ°•μ˜ (jQuery - animate())

μ˜ˆμ œμ™€ ν•¨κ»˜ν•˜λŠ” 제이쿼리 κ°•μ˜ μ΄λ²ˆμ— λ‹€λ£° κΈ°λŠ₯은 animate() λ©”μ†Œλ“œμž…λ‹ˆλ‹€. jQuery addClass() .addClass() λ©”μ†Œλ“œλŠ” νŠΉμ •ν•œ 클래슀λ₯Ό μš”μ†Œμ— μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 문법.addClass( className )className ( μ§€μ •ν•œ 클래슀 이름을 μΆ”κ°€) λ°μ΄ν„°νƒ€μž… : λ¬Έμžμ—΄(String) 1개 λ˜λŠ” 2개 μ΄μƒμ˜ ν΄λž˜μŠ€λ“€μ„ 속성에 μΆ”κ°€ν•©λ‹ˆλ‹€. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String ν•¨μˆ˜μ—μ„œ λ°˜ν™˜λœ 클래슀λ₯Ό 속성에 μΆ”κ°€ν•©λ‹ˆλ‹€.μ—¬κΈ°μ„œ ν•¨μˆ˜λŠ” 인자(λ§€κ°œλ³€μˆ˜) κ°’μœΌλ‘œ index 와 currentClassName을 가지고 μžˆμŠ΅λ‹ˆλ‹€. 이 뢀뢄은 예제λ₯Ό 가지..

2016.10.18 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery] μ˜ˆμ œμ™€ ν•¨κ»˜ν•˜λŠ” 제이쿼리 κ°•μ˜ (jQuery - slideDown() / slideUp() / slideToggle())

μ΄λ²ˆμ— 닀뀄볼 κΈ°λŠ₯은 jquery - slide() λ©”μ†Œλ“œμž…λ‹ˆλ‹€. jQuery Effects - Sliding slide λ©”μ†Œλ“œλŠ” μš”μ†Œλ₯Ό μœ„ 그리고 μ•„λž˜λ‘œ μ›€μ§μ΄κ²Œ λ„μ™€μ£ΌλŠ” κΈ°λŠ₯을 가지고 μžˆμŠ΅λ‹ˆλ‹€. slide λ©”μ†Œλ“œλŠ” μ•„λž˜μ™€ 같이 3가지 κΈ°λŠ₯을 가지고 μžˆμŠ΅λ‹ˆλ‹€. slideDown()slideUp()slideToggle() jQuery slideDown() Method slideDown() λ©”μ†Œλ“œλŠ” μš”μ†Œλ₯Ό μ•„λž˜λ‘œ λ‚΄λ €μ£ΌλŠ” 역할을 ν•©λ‹ˆλ‹€. 문법 $(selector).slideDown(speed,callback); μΈμžλŠ” μ§€κΈˆκΉŒμ§€ μ†Œκ°œν–ˆλ˜ λ©”μ†Œλ“œμ™€ 같이 속도λ₯Ό μ œμ–΄ν•  수 μžˆλŠ” μΈμžμ™€ 좔가적인 κΈ°λŠ₯을 μ μš©μ‹œν‚¬ 수 μžˆλŠ” callback ν•¨μˆ˜ 인자λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜λŠ” slideDown() λ©”μ†Œλ“œμ˜ μ˜ˆμ‹œμž…λ‹ˆλ‹€..

2016.10.18 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/μœ ν‹Έλ¦¬ν‹°

ν…μŠ€νŠΈ 에디터 Atom(μ•„ν†°) νŒ¨ν‚€μ§€ μΆ”μ²œ(Atom HTML Preview)

μ•„ν†°μ—μ„œ 코딩을 ν•˜λ©΄μ„œ μ‹€μ‹œκ°„μœΌλ‘œ HTML 파일의 μƒνƒœλ₯Ό ν™•μΈν•˜κ²Œ ν•΄μ£ΌλŠ” νŒ¨ν‚€μ§€μž…λ‹ˆλ‹€.ν”„λ‘ νŠΈμ—”λ“œ μž‘μ—…μ„ ν•  λ•Œ κ½€λ‚˜ μœ μš©ν•˜κ²Œ μ“°μ΄λŠ” νŒ¨ν‚€μ§€μ£ .ν”„λ‘ νŠΈμ—”λ“œ 개발자라면 κΌ­ 이 νŒ¨ν‚€μ§€λ₯Ό μ„€μΉ˜ν•΄μ„œ μ‚¬μš©ν•΄λ³΄λ„λ‘ ν•˜μ„Έμš”. μ„€μΉ˜λ²• μ‚¬μš©μ˜ˆμ‹œ Atom-HTML-Preview λͺ…μ„Έ A live preview tool for Atom Editor.Install:apm install atom-html-previewToggle HTML Preview:Press CTRL-SHIFT-H in the editor to open the preview pane.An example with Twitter Bootstrap 3 Package

2016.10.18 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery] μ˜ˆμ œμ™€ ν•¨κ»˜ν•˜λŠ” 제이쿼리 κ°•μ˜ (jQuery - fadeIn() / fadeOut() / fadeToggle() / fadeTo())

jQuery Effects - Fading jQueryλŠ” ν¬λ―Έν•˜κ²Œ λ‚˜νƒ€λ‚˜κ²Œν•˜κ³  μ—†μ• λŠ” fade() λ©”μ†Œλ“œλ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. jQueryμ—μ„œλŠ” μ•„λž˜ 4가지 fade() λ©”μ†Œλ“œλ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. fadeIn() fadeOut() fadeToggle() fadeTo() μš°μ„  fadeIn() λ©”μ†Œλ“œμ— λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. jQuery fadeIn() Method λ©”μ†Œλ“œ 이름과 κ°™κ²Œ ν¬λ―Έν•˜κ²Œ λ³΄μ—¬μ§€κ²Œ ν•΄μ£ΌλŠ” λ©”μ†Œλ“œμž…λ‹ˆλ‹€. show() λ©”μ†Œλ“œμ— μžλ™μœΌλ‘œ speedκ°€ 적용된 λŠλ‚Œμ˜ λ©”μ†Œλ“œμž…λ‹ˆλ‹€. 문법 $(selector).fadeIn(speed,callback); μ „ κ°•μ˜μ—μ„œ λ‹€λ€˜λ˜ show() 그리고 hide () λ©”μ†Œλ“œμ™€ 같은 인자λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. μ†λ„λ‚˜ μ½œλ°±ν•¨μˆ˜μ— λŒ€ν•΄μ„œ 잘 λͺ¨λ₯΄μ‹œλ‹€λ©΄, μ „ κ°•μ˜..

2016.10.18 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/jQuery

[jQuery] μ˜ˆμ œμ™€ ν•¨κ»˜ν•˜λŠ” 제이쿼리 κ°•μ˜ (jQuery - show() and hide())

jQuery - hide() and show() μ œμ΄μΏΌλ¦¬μ—λŠ” hide() 와 show() λ©”μ†Œλ“œλ₯Ό 톡해 HTML μš”μ†Œλ₯Ό 숨기고, 보이게 해쀄 수 μžˆλŠ” κΈ°λŠ₯을 가지고 μžˆμŠ΅λ‹ˆλ‹€. μ˜ˆμ‹œ 결과값을 보면, λ°•μŠ€κ°€ 사라지고 λ‚˜νƒ€λ‚˜λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. 문법 $(selector).hide(speed,callback); $(selector).show(speed,callback); 각 λ©”μ†Œλ“œμ— 속도λ₯Ό μ œμ–΄ν•  수 있게 λ„μ™€μ£ΌλŠ” μΈμžκ°’μ„ 넣을 수 μžˆλŠ”λ°μš”. 값은 milliseconds λ‹¨μœ„λ‘œ μž…λ ₯ν•˜λ©΄ λ©λ‹ˆλ‹€. μ½œλ°±ν•¨μˆ˜λ₯Ό 인자 κ°’μœΌλ‘œ 넣을 μˆ˜λ„ μžˆλŠ”λ°μš” 이 ν•¨μˆ˜λ₯Ό ν†΅ν•΄μ„œ hide() λ‚˜ show() λ©”μ†Œλ“œκ°€ μ™„λ£Œλœ λ‹€μŒμ— μ–΄λ– ν•œ 처리λ₯Ό κ°€λŠ₯ν•˜κ²Œ ν•΄μ€λ‹ˆλ‹€. μ‰½κ²Œ λ§ν•΄μ„œ, hide()와 show() λ©”μ†Œλ“œλŠ” λ™μž‘μ†λ„μ™€ λ™μž‘ ..

2016.10.18 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/CSS3

[CSS3] emmet을 톡해 효율적으둜 CSSλ₯Ό μž‘μ„±ν•΄λ³΄μž

Emmet? Emmetμ΄λž€ editor plugin으둜써 단좕킀λ₯Ό μ΄μš©ν•΄ HTML, XML, XSL μ½”λ”© 속도λ₯Ό λΉ„μ•½μ μœΌλ‘œ ν–₯μƒμ‹œμΌœμ£ΌλŠ” νˆ΄μž…λ‹ˆλ‹€. κ°€λ Ή κΈ΄ ν…Œμ΄λΈ”μ„ μ½”λ”©ν•  λ•Œ, μ†μœΌλ‘œ μž…λ ₯ν•˜λŠ” 건 λˆ„κ°€λ΄λ„ 바보같은 짓이고 쀄쀄이 볡사해 λΆ™μ΄λŠ” 것도 λ³„λ°˜ λ‚˜μ„ 게 μ—†μ–΄ λ³΄μž…λ‹ˆλ‹€. λ¬Όλ‘  ν…Œμ΄λΈ” λ§Œλ“œλŠ” νˆ΄μ„ μ“°λŠ” 게 κ°€μž₯ 일반적인 방법이긴 ν•©λ‹ˆλ‹€. 근데 μ–Έλœ» 봐도 같은 νƒœκ·Έμ˜ λ°˜λ³΅μž„μ„ μ•Œ 수 μžˆλŠ”λ°μš”. μ•„λž˜μ™€ 같이 μžλ™μ™„μ„±μ„ 해보면 μ–΄λ–¨κΉŒμš”? table>tr*5>td*5 table νƒœκ·Έλ‘œ μ—΄κ³  κ·Έ μ•„λž˜ tr νƒœκ·Έ 5개 μ—΄κ³  κ·Έ μ•„λž˜ td νƒœκ·Έ 5개 μ—΄λΌλŠ” λœ»μž…λ‹ˆλ‹€. Emmet은 λŒ€λΆ€λΆ„ 코딩을 ν•˜λŠ” μ‚¬λžŒμ΄λΌλ©΄ λ‹€λ₯Έ 툴과 달리 기본은 κΈˆμ„Έ 배울 수 μžˆμŠ΅λ‹ˆλ‹€. 기본적으둜 Emmet의 μ•½μ–΄λŠ” λ‹¨μ–΄μ˜ 첫 κΈ€μžλ₯Ό λ”°μ„œ ..

2016.10.17 κ²Œμ‹œλ¨

 ν¬μŠ€νŒ… 썸넀일 이미지

개발/Javascript

[μžλ°”μŠ€ν¬λ¦½νŠΈ] javascript - this

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ κΈ°μ‘΄ λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬λ˜λŠ” 인자 값에 더해, arguments 객체 및 this μΈμžκ°€ ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ•”λ¬΅μ μœΌλ‘œ μ „λ‹¬λ˜μ–΄μ§‘λ‹ˆλ‹€. this μΈμžλŠ” μ΄ν•΄ν•˜κΈ° 쑰금 κΉŒλ‹€λ‘­μŠ΅λ‹ˆλ‹€. thisκ°€ μ΄ν•΄ν•˜κΈ° μ–΄λ €μš΄ μ΄μœ λŠ” μžλ°”μŠ€ν΄λΉ„νŠΈμ˜ μ—¬λŸ¬κ°€μ§€ ν•¨μˆ˜κ°€ 호좜 νŒ¨ν„΄μ— 따라 thisκ°€ λ‹€λ₯Έ 객체λ₯Ό μ°Έμ‘°(this 바인딩)ν•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. μ•„λž˜μ™€ 같이 this λ°”μΈλ”©μ—λŠ” 3가지 νŒ¨ν„΄μ΄ μžˆμŠ΅λ‹ˆλ‹€. 객체의 λ©”μ†Œλ“œλ₯Ό 호좜 -> ν•΄λ‹Ή λ©”μ†Œλ“œλ₯Ό ν˜ΈμΆœν•œ 객체둜 λ°”μΈλ”©ν•¨μˆ˜λ₯Ό 호좜 -> μ „μ—­ 객체에 λ°”μΈλ”©μƒ˜μ„±μž ν•¨μˆ˜λ₯Ό 호좜 -> μƒˆλ‘œ μƒμ„±λ˜λŠ” 객체에 바인딩 였늘 μ°¨κ·Όμ°¨κ·Ό 이 this 바인딩에 λŒ€ν•΄μ„œ 정볡해 λ‚˜κ°€λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. 1. 객체λ₯Ό ν˜ΈμΆœν•  λ•Œ this 바인딩 객체의 λ©”μ†Œλ“œλ₯Ό ν˜ΈμΆœν•  경우, λ©”μ†Œλ“œ λ‚΄λΆ€ μ½”..

2016.10.16 κ²Œμ‹œλ¨

728x90
λ°˜μ‘ν˜•