λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

windows, ie... πŸ€¦πŸ»β€β™€οΈ

(5)
[CSS] IE μ—λ§Œ μ μš©ν•˜κΈ° / CSS only for IE μ‹œμŠ€ν…œ κΈ°λ³Έ 폰트λ₯Ό μ‚¬μš©ν•œλ‹€λ©΄ 같은 κΈ€μžμˆ˜μ—¬λ„ λ§₯의 κ°€λ‘œν­κ³Ό μœˆλ„μš°μ˜ κ°€λ‘œν­μ΄ λ‹€λ₯΄λ‹€. μ΄λŸ΄λ•Œ ν”νžˆ 'IE만 μžκ°„ μ‘°μ • κ°€λŠ₯ν•œκ°€μš”?' λΌλŠ” μ§ˆλ¬Έμ„ λ°›κ²Œ λ˜λŠ”λ°, μ‰½κ²Œ μƒκ°ν•˜κΈ°μ—” userAgent 체크λ₯Ό ν•΄μ„œ ν•΄λ‹Ή λΈŒλΌμš°μ €κ°€ IE인지 μ•„λ‹Œμ§€ νŒλ‹¨ν•˜κ³  IE μΌλ•Œ νŠΉμ • 클래슀λ₯Ό λ„£μ–΄μ„œ 블라블라~ 이런 μ‹μœΌλ‘œ μ˜μ‹μ˜ 흐름이 λ‹Ώμ•„μ„œ 'μ•„... ꡳ이...?' 이런 생각이 λ“€μ—ˆλ‹€. κ·ΈλŸ¬λ‹€ 며칠전에 νŠΉμ • λΈŒλΌμš°μ €μΌλ•Œλ₯Ό λ―Έλ””μ–΄μΏΌλ¦¬λ‘œ νŒλ‹¨ν•˜λŠ” 핡을 봀던게 생각이 λ‚˜μ„œ IE도 μžˆμ„ 것 κ°™μ•„μ„œ 검색을 ν•΄λ΄€λ‹€. μ—­μ‹œλ‚˜ μžˆμ—ˆλ‹€. λ‚˜λŠ” 일을 μ‹œμž‘ν•œ 이래둜 μ­‰ κΈ€λ‘œλ²Œ μ„œλΉ„μŠ€ μœ„μ£Όλ‘œλ§Œ 일을 ν–ˆμ–΄μ„œ 사싀 IE λŒ€μ‘μ΄ λŠ₯μˆ™ν•˜μ§„ μ•Šλ‹€. κ·Έλž˜μ„œ λ‹€λ“€ 이미 μ•Œκ³  μžˆμ„ μˆ˜λ„ μžˆμ§€λ§Œ μ΄λ ‡κ²Œ μƒˆλ‘­κ²Œ μ•Œμ•„κ°€λŠ” 것듀이 생긴닀. @media all an..
[μœˆλ„μš°] Windows 10 Mail (Outlook) νŠΉμ΄μ‚¬ν•­ 지원 μ—¬λΆ€ 확인 방법 https://www.caniemail.com/ caniuse 처럼 μ΄λ©”μΌμ—μ„œ μ‚¬μš©κ°€λŠ₯ν•œ css 속성을 확인해 λ³Ό 수 μžˆλŠ” μ‚¬μ΄νŠΈκ°€ μžˆλ‹€. https://www.campaignmonitor.com/css/ μ΅œκ·Όμ— 찾은 μ‚¬μ΄νŠΈμΈλ° caniuse 보닀 훨씬 더 쒋은 것 κ°™λ‹€. CSS Support Guide for Email Clients A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet. www.campaignmonitor.com Email Client Support Scoreboard μ΅œν•˜μœ„ 지원λ₯ μ„ λ³΄μ—¬μ£ΌλŠ” windowsμ—¬.... ..
[ie11] 슀크둀 μ΄λ²€νŠΈκ°€ μ•ˆ λ¨Ήν˜€μš” scrollY (X) β†’ pageYOffset (O) κ°€μž₯ λΉˆλ²ˆν•˜κ²Œ μ˜€λŠ” λ””μžμΈ μš”μ²­μ‚¬ν•­ 쀑 ν•˜λ‚˜κ°€ λ°”λ‘œ "슀크둀 μ‹œ GNB 색상을 λ°”κΏ”μ£Όμ„Έμš”!" 이닀. 보톡 μ²˜μŒμ—λŠ” 투λͺ…μƒ‰μ΄μ—ˆλ‹€κ°€ 슀크둀 μ‹œ 컨텐츠와 ꡬ뢄이 λ˜λ„λ‘ GNB에 배경색을 μ±„μ›Œ λ„£λŠ” ν˜•νƒœμ΄λ‹€. IE μ—μ„œ ν…ŒμŠ€νŠΈ ν•˜λŠ”λ° μ œλŒ€λ‘œ λ™μž‘μ΄ λ˜μ§€ μ•Šμ•„μ„œ 원인을 μ°Ύμ•„λ΄€λ”λ‹ˆ scrollY의 ν˜Έν™˜μ„± μ΄μŠˆμ˜€λ‹€. Sample Code let last_known_scroll_position = 0; let ticking = false; function doSomething(scroll_pos) { if(scroll_pos > 10) { document.querySelector('.nav').classList.add('is-scroll'); } else { document.querySelector('.nav').cl..
[ie11] 인터넷 μ΅μŠ€ν”Œλ‘œλŸ¬μ—μ„œ grid μ‚¬μš©ν•˜κΈ° flexλŠ” 이제 ν˜„μ—…μ—μ„œ 자주 μ“°λŠ”λ° gridλ₯Ό ν˜„μ—…μ—μ„œ μ‚¬μš©ν•˜λŠ” κ²½ν—˜μ΄ μ—†μ—ˆμŠ΅λ‹ˆλ‹€. ν˜„μ—…μ— μ μš©ν•˜μ§€ μ•ŠμœΌλ©΄ 사싀 머리속에 μžλ¦¬μž‘κΈ°κ°€ μ–΄λ €μš΄ 것 κ°™μ•„μš”. κ·Έλž˜μ„œ μ΄λ²ˆμ— λΈ”λ‘œκ·Έ λ””μžμΈ μ»€μŠ€ν…€ ν•˜λ©΄μ„œ κ·Έλ¦¬λ“œλ₯Ό μ‚¬μš©ν•΄ 보기둜 λ§ˆμŒλ¨Ήμ—ˆμŠ΅λ‹ˆλ‹€. μ•ˆ λ˜λŠ” 것도 λ¬Όλ‘  λ§Žμ§€λ§Œ 기본적은 것듀은 μ–΄λŠ 정도 fallback μ½”λ“œλ‘œ IEμ—μ„œ 적용되게 ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ¨Όμ € 읽어보면 쒋을 κΈ€ μ•„λž˜ 글을 μ •λ§λ‘œ κ°•μΆ”ν•©λ‹ˆλ‹€!!! 사싀 여기에 거의 grid 의 λͺ¨λ“  것이 담겨져 μžˆμ–΄μš”. 저도 κ°œλ…μž‘μ„ λ•Œ 정말 많이 μ°Έκ³ ν–ˆλ‹΅λ‹ˆλ‹€. μ €λŠ” κ°€μž₯ 핡심적이고 기초적인 λ ˆμ΄μ•„μ›ƒμ— λŒ€ν•΄μ„œλ§Œ μ •λ¦¬ν•΄λ³ΌκΉŒ ν•©λ‹ˆλ‹€. μ’€ 더 μžμ„Έν•˜κ³  μ „λ°˜μ μΈ λ‚΄μš©μ€ μ•„λž˜κΈ€μ„ μ°Έκ³ ν•΄μ£Όμ„Έμš”~ μ΄λ²ˆμ—μ•Όλ§λ‘œ CSS Gridλ₯Ό μ΅ν˜€λ³΄μž 이 ν¬μŠ€νŠΈμ—λŠ” μ‹€μ œ μ½”λ“œκ°€ 적용된 λΆ€λΆ„λ“€..
[ie11] flexμ‹œ margin: auto; μ μš©λ˜μ§€ μ•ŠλŠ” 이유 예제) Flexλ₯Ό ν™œμš©ν•œ ν‘Έν„° μœ„μΉ˜μž‘κΈ° Header Footer ν”νžˆ flexλ₯Ό μ‚¬μš©ν•  λ•Œ, μœ„μ˜ 예제 μ½”λ“œμ²˜λŸΌ margin-top: auto; λ₯Ό μ‚¬μš©ν•˜λ©΄ ν‘Έν„°κ°€ λ°”λ‹₯에 μ‰½κ²Œ 뢙일 수 μžˆλ‹€. 문제) IEμ—μ„œλŠ” min-height κ°’λ§ŒμœΌλ‘œλŠ” μ μš©λΆˆκ°€ 그런데 ieμ—μ„œ μ œλŒ€λ‘œ μ μš©λ˜μ§€ μ•ŠλŠ” margin: auto; 값을 μ œλŒ€λ‘œ ν‘œν˜„ν•΄μ£Όμ§€ μ•Šμ„ λ•Œκ°€ μžˆλ‹€. λΆ€λͺ¨ μš”μ†Œμ˜ 높이λ₯Ό min-height둜 μž‘λŠ” κ²½μš°μ—λŠ” μ μš©λ˜μ§€ μ•ŠλŠ” 것을 확인할 수 μžˆλ‹€. 해결방법) min-height 보닀 μž‘μ€ κ°’μ˜ height 값을 지정해쀀닀. Header Footer 제일 μž‘μ€ μ‚¬μ΄μ¦ˆμ˜ ν•Έλ“œν° 해상도도 320x568 이기 λ•Œλ¬Έμ— heightλŠ” μž„μ˜λ‘œ 500px을 λ„£μ—ˆλ‹€. (사싀 μ½”λ“œ λ™μž‘μ€ height: 0; 만 넣어도 λœλ‹€.)..

λ°˜μ‘ν˜•