profile
๐Ÿ’ป ์›นํผ๋ธ”๋ฆฌ์…”, UI Developer, Markup Developer ๐Ÿ‘
post-thumbnail

AOS(animate on scroll) IE ์˜ค๋ฅ˜ ๋Œ€์ฒ˜ ๋ฐฉ๋ฒ•

์Šคํฌ๋กค์— ๋”ฐ๋ผ ์ปจํ…์ธ ์— ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•ด์ฃผ๋Š” AOS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ๋‹ค.๊ฐ„๋‹จํžˆ ์ ์šฉํ•  ์ˆ˜ ์žˆ์–ด ์ž์ฃผ ์“ฐ๊ณ  ์žˆ๋Š”๋ฐ IE์—์„œ๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค.IE๋กœ ๋ณด๊ฒŒ๋˜๋ฉด AOS๊ฐ€ ์ ์šฉ๋œ ์ปจํ…์ธ ์— opacity๊ฐ€ 0์—์„œ 1๋กœ ๋ณ€ํ™˜๋˜์ง€ ์•Š์•„์„œํ•ด๋‹น ์ปจํ…์ธ ๋“ค์ด ์•„์˜ˆ ๋ณด์ด

2021๋…„ 3์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

swiper ์Šฌ๋ผ์ด๋“œ IE ์˜ค๋ฅ˜ ํ•ด๊ฒฐ

swiper๋ฅผ ์ƒ๊ฐ์—†์ด ์“ฐ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์ตœ๊ทผ์— IE์—์„œ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ๋‹ค.๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋ฒ„์ „์€ 6.4.5 ์˜€๋Š”๋ฐ ๊ฒ€์ƒ‰ํ•ด๋ณด๋‹ˆ ๋ฒ„์ „ 5 ๋ถ€ํ„ฐ IE๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ํ•œ๋‹ค.๋ฒ„์ „ 5 ๋ฏธ๋งŒ์˜ swiper๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด IE ์˜ค๋ฅ˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.https&#x3A

2021๋…„ 3์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

digitalocean ์„ธํŒ… ๊ด€๋ จ ๋งํฌ

LEMPHow To Install Nginx on Ubuntu 20.04How To Secure Nginx with Let's Encrypt on Ubuntu 20.04

2021๋…„ 2์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

html img ๋กœ๋“œ ์‹คํŒจ ์‹œ ๋””ํดํŠธ ์ด๋ฏธ์ง€ ์ ์šฉ

img ํƒœ๊ทธ ์‚ฌ์šฉ ์‹œ ์ด๋ฏธ์ง€ ๋กœ๋“œ์— ์‹คํŒจํ–ˆ์„ ๊ฒฝ์šฐ ์—‘์Šค๋ฐ•์Šค๊ฐ€ ๋ณด์—ฌ์ง€๋Š”๋ฐalt๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค.๋Œ€์ฒด ํ…์ŠคํŠธ ๋Œ€์‹  ๋Œ€์ฒด ์ด๋ฏธ์ง€๋ฅผ ๋ณด์—ฌ์ค€๋‹ค๋ฉด ๋กœ๋“œ ์‹คํŒจ ์‹œ ๋” ๊น”๋”ํ•œ ์›นํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋‹ค.์œ„์™€ ๊ฐ™์ด img ํƒœ๊ทธ์— onerror ํ•ญ

2021๋…„ 2์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

body scroll lock/unlock

๋ชจ๋‹ฌ ์ฐฝ ๋„์› ์„ ๋•Œ ๋ฐ”๋‹ฅ ํŽ˜์ด์ง€ ์Šคํฌ๋กค ์•ˆ๋˜๊ฒŒ ํ•ด์ฃผ์„ธ์š”.ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋‹ค ๋ณด๋ฉด ์œ„์™€ ๊ฐ™์€ ์š”์ฒญ์„ ๋ฐ›๊ฒŒ ๋œ๋‹ค.๋ ˆ์ด์–ด๋กœ ๋ชจ๋‹ฌ ์ฐฝ์„ ๋„์šด ์ƒํƒœ์—์„œ ์Šคํฌ๋กค์„ ํ•˜๋ฉด ๋ฐ”๋‹ฅ ํŽ˜์ด์ง€๊ฐ€ ์œ„ ์•„๋ž˜๋กœ ์›€์ง์ด๊ฒŒ ๋˜๋Š”๋ฐ์ด๊ฑธ ๋ง‰์•„ ๋‹ฌ๋ผ๋Š”๊ฑฐ๋‹ค.CSS ํ”„๋ ˆ์ž„์›Œํฌ๋‚˜ ๋ชจ๋‹ฌ ํ”Œ๋Ÿฌ๊ทธ์ธ ๋“ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด์ž์ฒด์ ์ธ

2021๋…„ 1์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

๋ชจ๋ฐ”์ผ ์›น์—์„œ hover ํšจ๊ณผ ์ œ๊ฑฐํ•˜๊ธฐ

๋ชจ๋ฐ”์ผ(ํ„ฐ์น˜ ๋””๋ฐ”์ด์Šค)์—์„œ๋Š” ๋งˆ์šฐ์Šค ์ปค์„œ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— hover ํšจ๊ณผ๋ฅผ ์ค„ ์ˆ˜ ์—†๋‹ค.PC์—์„œ์ฒ˜๋Ÿผ css์— hover ํšจ๊ณผ๋ฅผ ๋„ฃ๊ฒŒ ๋˜๋ฉด ํ•ด๋‹น ์š”์†Œ๋ฅผ ๋‘๋ฒˆ ํ„ฐ์น˜ํ•ด์•ผ ์›ํ•˜๋Š” ๋™์ž‘์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค. (ํ•œ๋ฒˆ ํ„ฐ์น˜ํ•˜๋ฉด hover ํšจ๊ณผ๋งŒ ์ ์šฉ๋˜๊ณ  ๋™์ž‘ํ•˜์ง€ ์•Š์Œ)ํŠนํžˆ ๋ฐ˜์‘ํ˜• ์ž‘์—…์„

2021๋…„ 1์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

์Šคํฌ๋กค์— ๋ฐ˜์‘ํ•˜๋Š” sticky header ๋งŒ๋“ค๊ธฐ

๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฉ”๋‰ด์— ๋Œ€ํ•œ ์ ‘๊ทผ์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด์Šคํฌ๋กค์— ์ƒ๊ด€์—†์ด header๋ฅผ ํ•ญ์ƒ ํ™”๋ฉด ์ƒ๋‹จ์— ๊ณ ์ •์‹œํ‚ค๋Š” sticky header๋ฅผ ๋งŽ์ด๋“ค ์‚ฌ์šฉํ•œ๋‹ค.ํŽ˜์ด์ง€ ์–ด๋””์„œ๋“  header ๋ฉ”๋‰ด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํ•ญ์ƒ header ๋†’์ด ๋งŒํผ ์ปจํ…์ธ ๋ฅผ ๊ฐ€๋ฆฌ๊ฒŒ ๋œ๋‹ค.์Šคํฌ๋กค์— ๋ฐ˜์‘ํ•˜๋Š”

2021๋…„ 1์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

velog ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœ์„คํ•˜๋‹ค.

๋ฒŒ์จ ๋ช‡ ๋ฒˆ์งธ ๋ธ”๋กœ๊ทธ์ธ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค.ํ˜„์žฌ๋Š” SNS๋กœ ํ†ต์นญ๋˜๋Š” ๋งˆ์ดํฌ๋กœ ๋ธ”๋กœ๊ทธ๋ผ๊ณ  ๋ถˆ๋ฆฌ์› ๋˜ ์„œ๋น„์Šค๊นŒ์ง€ ํฌํ•จํ•˜๋ฉด ๋‚ด๊ฐ€ ๊ฐ€์ž…ํ•œ ๊ธ€์“ฐ๊ธฐ ํ”Œ๋žซํผ์ด NAVER, Tistory, ๋ฏธํˆฌ๋ฐ์ด, ํŠธ์œ„ํ„ฐ, Medium, ๋ธŒ๋Ÿฐ์น˜, Blogger, Tumblr....๋ญ”๊ฐ€ ๋” ์žˆ๊ฒ ์ง€๋งŒ ๊ธฐ์–ต ๋‚˜๋Š”

2021๋…„ 1์›” 12์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€