Simple Is Best

이번 포스팅에서는 스크롤 애니메이션에 대해서 배워보도록 하겠습니다. 오늘의 Target 스크롤 이전에는 최상단의 navbar 를 웹사이트의 대문과 색을 동일하게 유지한다. 스크롤 이후에는 최상단의 navbar 를 회색의 배경에 글씨를 검은색으로 만들어주고 오른쪽에 위치한 Our Products의 font-size 를 줄여준다. [스크롤 이전] [스크롤 이후] 애니메이션 제작 방법 1. CSS로 애니메이션 동작 이전의 화면을 미리 제작한다. 2. CSS로 애니메이션 동작 이후의 화면을 미리 제작한다. 3. CSS로 transition : all 1s; 로 변경할 때 몇 초에 걸려서 변경할 지 설정한다. 4. 자바스크립트 혹은 제이쿼리로 언제 변경할 지 변경point(Trigger) 를 설정한다. HTML ..

이번 포스팅에서는 z-index 에 대해서 알아보도록 하겠습니다. https://developer.mozilla.org/ko/docs/Web/CSS/z-index z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org MDN 사이트를 참고하여 작성하였습니다. z-index란? : CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. 네, 하..