Front End Develop Front End Develop

요즘은 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..

최근 CSS는 사용자 정의 속성 및 새로운 기능과 같은 새로운 멋진 기능을 많이 추가했습니다. 이러한 것들이 우리의 삶을 훨씬 더 쉽게 만들 수 있지만, 또한 재미있는 방식으로 Sass와 같은 전처리기와 상호 작용할 수 있습니다. 새로운 CSS 사용자 속성인 min() 및 max() 함수를 사용해 본 적이 있다면 다른 단위로 작업 할 때 "호환되지 않는 단위 : vh 및 em"과 같은 오류 메시지가 표시 될 수 있습니다. 이는 Sass가 자체 min() 함수를 가지고 있고 CSS min() 함수를 무시하기 때문입니다. 또한 Sass는 고정된 관계가없는 단위로 두 값을 사용하여 어떤 종류의 계산도 수행 할 수 없습니다. min() 내부에서 calc()를 사용하려고하면 오류가 발생합니다. calc (20em..

웹에는 접근성 이슈들이 많습니다. 모든 사용자가 사용하는 웹이라는 모토를 걸고있기 때문이죠. 웹은 컴퓨터와 인터넷이 연결된 현대에 있어 거의 모든 사람들이 매일 한번씩은 꼭 이용하게 되는 매개체입니다. Web Content Accessibility Guidelines (WCAG)에서는 매일 관련 웹 접근성에 대한 내용들을 업데이트 하고 있습니다. 우선 최근에 Light House에 대한 audit 결과들을 보면, Web Accessibility 항목에 있어 특히 반응형일 때 폰트 사이즈가 작으면 웹 접근성 이슈로 잡히게되어 있습니다. 또한 위와 같이 폰트 색상 대조에 대한 비율도 권고안으로 정해져 있습니다. 공식적으로 WCAG에서 권고하고 있는 텍스트 사이즈와 대조는 다음과 같습니다. 이 내용 출처의 필..