HTML, CSS16 최신기능을 지원하는 CSS 전처리기 Dart SCSS Dart SCSS 와 Node SCSS의 차이 Dart Sass와 Node Sass는 모두 SCSS (Sassy CSS)를 컴파일하는 도구입니다. 두 도구는 기본적으로 같은 역할을 수행하지만, 내부적으로 사용하는 기술과 지원하는 기능에는 몇 가지 차이점이 있습니다: 구현 언어: Dart Sass는 Dart 언어로 작성되었고, Node Sass는 LibSass라는 C/C++ 라이브러리를 바탕으로 Node.js에서 동작하도록 작성되었습니다. 기능 지원: Dart Sass는 Sass의 최신 기능들을 가장 빨리 지원합니다. 이는 Dart Sass가 Sass의 공식 참조 구현이기 때문입니다. 반면, Node Sass는 LibSass를 기반으로 하며, 이는 Sass의 모든 기능을 항상 최신 상태로 유지하지는 않습니.. 2023. 7. 23. SCSS를 활용한 Theme CSS 제작 SCSS를 사용하면 스타일시트에서 쉽게 재사용할 수 있는 변수, 믹스인 및 함수를 정의할 수 있습니다. 이렇게 하면 코드 모듈성과 재사용성이 향상되어 테마를 더 쉽게 만들고 유지 관리할 수 있습니다. 테마별 변수 집합을 정의하고 스타일시트 전체에 일관되게 적용할 수 있습니다. 재사용 가능한 스타일을 정의하고 이를 다른 요소나 구성 요소에 적용하여 CSS 코드베이스를 단순화하고 유지 관리하기 쉽게 만들 수 있습니다. Dart Sass의 map기능을 활용 // _variables.scss $theme-light: ( bg: #ffffff, text: #333333, primary: #007bff, secondary: #6c757d, ); $theme-dark: ( bg: #333333, text: #ffff.. 2023. 7. 12. :is() 의사 클래스 :is() 의사 클래스는 CSS 선택기 레벨 4에 도입된 기능적 의사 클래스입니다. CSS를 더 간결하고 관리하기 쉽게 만드는 좋은 방법입니다. :is() 의사 클래스는 쉼표로 구분된 선택자 목록을 인수로 사용하여 작성한 선택자를 모두 선택합니다. // 작성 :is(header, main, footer) p:hover { color: red; cursor: pointer; } // 적용 header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; } CSS 작성시에 더 효율적인 작업이 가능합니다. 대규모 사이트 작업시에 테마나 같은 사이트 내 다른 영역등에서 공통 값을 적용할때처럼 여러곳에 같은 속성과 속성값을 지정하는데 큰 이점.. 2023. 7. 9. 접근성을 위한 미디어 쿼리 사용 접근성을 위한 미디어 쿼리 사용하기 장애를 가진 분들을 위한 미디어쿼리는 접근성 심사를 위해서도 필요하지만 실제 사용성 편의를 위해서도 꼭 알아 둘 필요가 있고, 다양한 미디어가 한 사이트에서 구현되는 경우 일어날 수 있는 위험을 방지할 수 있는 방법입니다. prefers-reduced-motion 깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(ADHD)와 같은 인지 문제를 가진 사람들에게 문제가 될 수 있습니다. 이러한 종류의 애니메이션 동작들은 전정편두통, 뇌전증, 편두통과 광과민증을 유발할 수 있습니다. 기기의 성능이 떨어지는 사용자에게도 도움이 되지만 접근성 심사를 위해서 과도한 반짝임은 일어나지 않도록 해야 합니다. 실제 장애인 뿐 아니라 아이들이 자주 접속하는 사이트 라면 꼭 있어야.. 2023. 7. 2. HTML Input 기본 버튼 아이콘 숨기기 html input 타입에 따른 기본 버튼이나 아이콘들이 보일 경우 디자인된 input 요소들의 모습과 다를 수 있습니다. 이럴때는 기본으로 제공되는 HTML Input의 버튼이나 아이콘들을 CSS 사용해 다음과 같이 숨길 수 있습니다. 숫자 증가/감소 버튼 숨기기 /* 웹킷 브라우저 (예: 크롬, 사파리)용 */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox 브라우저용 */ input[type="number"] { -moz-appearance: textfield; } 검색 입력 상자의 .. 2023. 6. 22. CSS var() 함수 변수의 자바스크립트 동적 생성 var() 함수는 변수를 사용하여 스타일시트 전체에 값을 저장하고 재사용할 수 있게 해주는 CSS의 기능입니다. SCSS 같은 전처리 도구들에서 사용하는 변수를 활용한 공통 값을 관리 할 수 있습니다. 폰트 사이즈나 대표 컬러등 공통으로 많이 사용되는 부분에 적용하면 유지관리에 많은 도움이 됩니다. var()로 정의된 변수는 color, background-color, font-size, margin 등과 같은 다양한 CSS 속성에 사용할 수 있습니다. 또한 다른 값이나 계산과 결합, 자바스크립트를 통한 동적 스타일등으로 다양하게 활용 할 수 있어 스크립트로 일일이 바꿔 줘야 했던 값들을 var() 함수의 변수로 설정하면 단 한번의 설정으로 여러 곳의 값을 변경하는게 가능합니다. CSS 변수는 대소문자를.. 2023. 6. 17. 이전 1 2 3 다음
