scss3 전처리기 Haml, Pug, Slim, Scss, Stylus 사용해보기 요즘은 webpack, vite 등의 다양한 번들러들을 사용해서 개발을 하고 계시는데요. 그 안에서 사용할 수 있고, 단독으로도 사용할 수 있는 각종 전처리기들에 대한 문법들을 정리 해보았습니다. Haml - For Loop See the Pen Loop with Haml by YoungMinKim (@oinochoe) on CodePen. Haml - While Loop See the Pen While Loop in Haml by YoungMinKim (@oinochoe) on CodePen. Haml - Each Loop See the Pen Each Loop with Haml by YoungMinKim (@oinochoe) on CodePen. Pug - For Loop See the Pen Loo.. 2022. 9. 4. Sass 와 새로운 CSS 기능의 충돌! 최근 CSS는 사용자 정의 속성 및 새로운 기능과 같은 새로운 멋진 기능을 많이 추가했습니다. 이러한 것들이 우리의 삶을 훨씬 더 쉽게 만들 수 있지만, 또한 재미있는 방식으로 Sass와 같은 전처리기와 상호 작용할 수 있습니다. 새로운 CSS 사용자 속성인 min() 및 max() 함수를 사용해 본 적이 있다면 다른 단위로 작업 할 때 "호환되지 않는 단위 : vh 및 em"과 같은 오류 메시지가 표시 될 수 있습니다. 이는 Sass가 자체 min() 함수를 가지고 있고 CSS min() 함수를 무시하기 때문입니다. 또한 Sass는 고정된 관계가없는 단위로 두 값을 사용하여 어떤 종류의 계산도 수행 할 수 없습니다. min() 내부에서 calc()를 사용하려고하면 오류가 발생합니다. calc (20em.. 2021. 2. 12. 접근성, 폰트에 대하여.. 웹에는 접근성 이슈들이 많습니다. 모든 사용자가 사용하는 웹이라는 모토를 걸고있기 때문이죠. 웹은 컴퓨터와 인터넷이 연결된 현대에 있어 거의 모든 사람들이 매일 한번씩은 꼭 이용하게 되는 매개체입니다. Web Content Accessibility Guidelines (WCAG)에서는 매일 관련 웹 접근성에 대한 내용들을 업데이트 하고 있습니다. 우선 최근에 Light House에 대한 audit 결과들을 보면, Web Accessibility 항목에 있어 특히 반응형일 때 폰트 사이즈가 작으면 웹 접근성 이슈로 잡히게되어 있습니다. 또한 위와 같이 폰트 색상 대조에 대한 비율도 권고안으로 정해져 있습니다. 공식적으로 WCAG에서 권고하고 있는 텍스트 사이즈와 대조는 다음과 같습니다. 이 내용 출처의 필.. 2020. 4. 25. 이전 1 다음
