김평범's OrdinaryCode

스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오늘은 간단한 예시 중 특정 위치에 특정 엘리먼트를 고정할 수 있는 position 속성 중 fixed와 sticky 차이를 알아보려고 한다. 💡 fixed란? position:fixed 위 속성을 적용하게 되면 일반적인 문서 요소 순서에 따라 배치되는 것이 아니라 페이지 화면 내 절대적인 위치에 고정시킬 수 있다. 스크롤과 상관없이 항상 해당 위치에 고정된다. 대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다. fixed 예시 코드 Header content .header ..

💜 2020 State of CSS Survey 1편에서는 레이아웃 중 가장 사랑받는 flexbox를 살펴보았다면 이번 편에서는 grid를 살펴보려고 한다. 사실 실무에서 flexbox를 너무 잘 활용하고 있었고, flexbox로 아쉬운 부분들은 기존 float방식으로 충분히 원하는 레이아웃을 짤 수 있었기에 새로운 layout에 대한 필요성을 아직 느끼지 못했다. flexbox 사용이 궁금하다면 전의 포스팅을 먼저 참고하고 오자! [css/layout] CSS Layout 방법 - 1️⃣ flexbox 💜 2020 State of CSS Survey 2020년 State of CSS Survey 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된..

💜 2020 State of CSS Survey 2020년 State of CSS Survey 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된다. 이럴 때 도움이 되는 것은 Survey! 2016년부터 시작된 State of Javascirpt 설문조사가 성공적으로 이뤄짐에 따라 2019년도부터 CSS Survey도 시작하게 되었다. (결과는 아래 링크를 참조해보자. 오늘도 모르는 게 너무 많은 나를 반성하게 된다.😓) The State of CSS 2020 Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've ..