Web Landing

Creator

Creator

Seonglae Cho

Created

Created

2022 Jul 28 15:29

Editor

Editor

Seonglae Cho

Edited

Edited

2022 Aug 17 5:22

Refs

Refs

웹 페이지 로드 과정

2021-01-24 프론트앤드 관련 강의를 듣다가 웹 페이지 로드 과정에 대해서 설명해주셨는데 한번 정리하고 싶어서! 플랫폼이 어떤 순서로 페이지를 로드하는지, 어떤 이벤트들이 발생하는지 궁금해서! Navigation Timing API에서 제공하는 property가 어떤걸 의미하는지 알고 싶어서! 성능 이슈는 웹 브라우저의 동작과 관련이 있기때문에 미리 정리하고 싶어서!

https://jooonho.com/js/2021-01-24-timing-api

Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"

Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh

Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"

https://twitter.com/shuding_/status/1552438750470340610?t=sh_FYMt8q2yQwkgBEbH2CQ&s=19

Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"

Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"

Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh

Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"

https://twitter.com/shuding_/status/1552438750470340610?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed&ref_url=notion%3A%2F%2Fwww.notion.so%2Fseongland%2FWeb-Landing-05cf98337de241fda4515b1fff41ac7a

Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"

Recommendations

////////