본문 바로가기

CSS6

Sass 와 새로운 CSS 기능의 충돌! 최근 CSS는 사용자 정의 속성 및 새로운 기능과 같은 새로운 멋진 기능을 많이 추가했습니다. 이러한 것들이 우리의 삶을 훨씬 더 쉽게 만들 수 있지만, 또한 재미있는 방식으로 Sass와 같은 전처리기와 상호 작용할 수 있습니다. 새로운 CSS 사용자 속성인 min() 및 max() 함수를 사용해 본 적이 있다면 다른 단위로 작업 할 때 "호환되지 않는 단위 : vh 및 em"과 같은 오류 메시지가 표시 될 수 있습니다. 이는 Sass가 자체 min() 함수를 가지고 있고 CSS min() 함수를 무시하기 때문입니다. 또한 Sass는 고정된 관계가없는 단위로 두 값을 사용하여 어떤 종류의 계산도 수행 할 수 없습니다. min() 내부에서 calc()를 사용하려고하면 오류가 발생합니다. calc (20em.. 2021. 2. 12.
CSS Cascading 잘하기 커스텀 프로퍼티 소개 브라우저가 -webkit- 또는 -moz-와 같은 공급 업체 접두사를 사용하여 새 속성을 정의한 것과 같은 방식으로 -- 접두사를 사용하여 자체 사용자 지정 속성을 정의 할 수 있습니다. Sass 또는 JavaScript의 변수와 마찬가지로 값의 이름을 지정하고 저장하고 검색하는 데 사용할 수 있지만 CSS의 다른 속성과 마찬가지로 DOM과 함께 계단식으로 상속되고 상속됩니다. html { --brand-color: rebeccapurple; } 캡처 된 값에 액세스하기 위해 var () 함수를 사용합니다. 두 부분으로 구성되어 있습니다. 먼저 사용자 지정 속성의 이름과 속성이 정의되지 않은 경우 대체 항목입니다. button { background: var(--brand-color.. 2021. 2. 2.
웹 애니메이션에 대한 기본 규칙 애니메이션은 사이트를 돋보이게 만들 수 있습니다. 또한 그것들은 쉽게 사용자 경험(User Experience)을 감소 시킬 수 있습니다. 웹 애니메이션으로 작업 할 때 목적이없는 애니메이션 추가, 너무 길거나 너무 빠른 기간 설정, 애초에 올바른 유형의 애니메이션을 사용하지 않는 등 잘못 될 수있는 몇가지 사항이 있습니다. 이러한 모든 작업이 올바르게 수행 되더라도 애니메이션 스타일이 좋지 않을 수 있습니다. 특히 다른 애니메이션과 동기화되지 않거나 사이트의 전반적인 성격과 일치하지 않는 경우에는 더욱 그렇습니다. 주목해야 할 또 다른 중요한 점은 모든 디지털 경험이 똑같은 애니메이션을 공유해서는 안된다는 것입니다. 마케팅 웹 사이트에는 제품 웹 사이트 또는 모바일 앱과 다른 애니메이션이 필요할 수 있.. 2020. 9. 8.
[Modern CSS] 하단에 footer 고정하기 flex vs grid Moder CSS 첫 번째 주제 - footer 하단 고정 flex vs grid 괜찮은 Modern Css 소개 페이지가 있어 연재를 하려고 합니다. 그 첫 번째 시간으로 하단에 footer 고정하기 See the Pen Footer 하단 고정 Flex & Grid by YoungMinKim (@oinochoe) on CodePen. 먼저 Flex를 통하여 고정시키는 방법이 있습니다 body { min-height: 100vh; /* 최소 높이를 지정 */ display: flex; flex-direction: column; } footer { margin-top: auto; /* 최소 높이 하단에서 자동으로 뻗어나가도록 설정 */ } /* optional */ main { margin: 0 auto;.. 2020. 6. 30.