CSS60 Sass 와 새로운 CSS 기능의 충돌! 최근 CSS는 사용자 정의 속성 및 새로운 기능과 같은 새로운 멋진 기능을 많이 추가했습니다. 이러한 것들이 우리의 삶을 훨씬 더 쉽게 만들 수 있지만, 또한 재미있는 방식으로 Sass와 같은 전처리기와 상호 작용할 수 있습니다. 새로운 CSS 사용자 속성인 min() 및 max() 함수를 사용해 본 적이 있다면 다른 단위로 작업 할 때 "호환되지 않는 단위 : vh 및 em"과 같은 오류 메시지가 표시 될 수 있습니다. 이는 Sass가 자체 min() 함수를 가지고 있고 CSS min() 함수를 무시하기 때문입니다. 또한 Sass는 고정된 관계가없는 단위로 두 값을 사용하여 어떤 종류의 계산도 수행 할 수 없습니다. min() 내부에서 calc()를 사용하려고하면 오류가 발생합니다. calc (20em.. 2021. 2. 12. CSS Contain 속성에 대하여.. 과거에 비해서 최신 브라우저는 일반적으로 웹 페이지를 구성하고 HTML, CSS, Javascript등의 복잡한 웹을 렌더링하는데에 있어서 정말 효율적이게 발전해왔습니다. 보통 몇 초 남짓 안에 모든 것들이 렌더링됩니다. 프론트엔드 개발을 하면서, 렌더링 속도를 높이기 위해서 더 무엇을 할 수 있을까 고민하는 것은 중요합니다. 이럴 때 해결할 수 있는 방법 중 한가지로 Contain이라는 속성이 있습니다. Contain 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용한다고 합니다. /* 키워드 값 */ contain: none; /* 격리없이 평범하게 렌더링함 */ contain: strict; /* style을 제외한 모든 격리 규칙을 적용함 */ contain: c.. 2021. 2. 12. 햄버거 메뉴 라인 애니메이션 (SVG & CSS) 모바일 환경에서 많이들 사용하는 햄버거 메뉴는 애니메이션을 많이 넣어서들 사용합니다. SVG 및 CSS를 사용하여 다양한 효과들을 만들 수 있습니다. 우선 SVG를 적절히 그려서 애니메이션을 위한 라인들을 그립니다. body { align-items: center; display: flex; justify-content: center; height: 100vh; margin: 0; } .menu { background-color: transparent; border: none; cursor: pointer; display: flex; padding: 0; } .line { fill: none; stroke: black; stroke-width: 6; transition: stroke-dasharray 6.. 2021. 2. 12. 스크롤 최상단으로 이동 css vs js 스크롤 최상단으로 이동하는 방법에 css와 js가 있습니다. 스크롤 최상단 css 스크롤 최상단 JS css html { scroll-behavior: smooth; } 위 처럼 스크롤 상태에 대한 smooth 속성을 사용해서 scroll을 부드럽게 처리할 수 있기 때문에 #인 포지션인 0으로 갈 때 부드럽게 이동합니다. js document.querySelector("#js-scroll").addEventListener("click", (e) => { e.preventDefault(); window.scroll({ top: 0, left: 0, behavior: "smooth" }); }); 위의 방법도 스크롤을 부드럽게 처리하기 위한 옵션이 들어갑니다. 이 두가지 방법은 중요한 차이가 있습니다. 차이.. 2021. 2. 7. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
