👩💻/CSS, SCSS (19) 썸네일형 리스트형 SCSS 활용 팁 17. 시스템 설정에 기반하여 다크모드 적용하기 prefers-color-scheme를 이용하면 JavaScript없이도 운영체제(OS)의 설정에 따라 다크모드를 적용할 수 있습니다. 이 방식을 사용하면 사용자가 수동으로 모드를 변경할 필요 없이, 시스템 설정을 기반으로 다크모드를 적용시킵니다.SCSS 변수 설정_variables.scss파일을 생성하고 여기에 기본 라이트 모드와 다크 모드의 주요 색상을 변수로 지정합니다. $light-mode: ( bg: #ffffff, text: #333333, primary: #007bff);$dark-mode: ( bg: #121212, text: #ffffff, primary: #bb86fc); 스타일 적용style.scss에 앞서 작성한 _variables.scss파일을 임포트하고 스타일 코드를 .. SCSS 활용 팁 16. SCSS를 활용한 다크모드 만들기 다양한 사용 환경을 고려하고 사용자의 취향에 맞춘 서비스를 제공하기 위해 기본 테마 외에도 다크버전을 제공하는 경우를 자주 보게 됩니다. 이번에는 SCSS의 기능과 Javascript를 활용하여 다크모드를 만드는 방법을 알아보려고 합니다.HTML 작성모드를 변경할 HTML코드를 작성합니다. #theme-toggle 버튼을 누르면 페이지가 다크모드로 변경되게 작업하려 합니다. 🌚 다크 모드 SCSS 변수 설정_variables.scss파일을 생성하고 여기에 기본 라이트 모드와 다크 모드의 주요 색상을 변수로 지정합니다. 이때 map을 사용하면 가독성 향상에 좋고 사용도 편해집니다.$light-mode: ( bg: #ffffff, text: #333333, primary: #007bff);$dar.. [CSS] CSS만으로 멋진 텍스트 마스크 효과 만들기 background-clip:textbackground-clip은 요소의 배경을 어디까지 확장시킬지를 결정하는 CSS속성입니다. 이중 background-clip:text는 배경의 범위를 텍스트 모양까지로 제한하는 역할을 합니다. 이를 활용하면, 텍스트 내부에만 배경이 채워지는 텍스트 마스크 효과를 구현할 수 있습니다. 일부 브라우저에서 표준 속성을 지원하지 않기 때문에 크로스브라우징을 위하여 접두사 -webkit-를 붙여 사용합니다. background-clip을 활용한 텍스트 마스크 See the Pen textmask01 by soojeong (@sooj0601) on CodePen.">See the Pen textmask01 by soojeong (@sooj0601) on CodePen... SCSS 활용 팁 15. SCSS 컬러 내장함수 사용하여 컬러쉐이드 만들기 이전 글에서는 SCSS의 여러가지 컬러 내장함수를 알아보고 이를 이용하여 버튼의 상태에 따라 색상이 자동으로 변경되는 스타일을 만들어 봤는데요, 이번에는 그중 darken()과 lighten()을 활용하여 디자인시스템에서 사용 가능한 컬러 쉐이드를 만들어보겠습니다. 컬러 쉐이드(Color Shade)컬러 쉐이드는 특정 색을 기준으로 하여 단계적으로 밝게, 또는 어둡게 변형을 주는 것을 말합니다. 같은 색상 계열에서 다양한 값을 표현하고 싶을 때 사용합니다. 아래는 제가 주로 사용하는 Tailwind CSS의 컬러 쉐이드 팔레트입니다.Map과 @each를 사용한 컬러 쉐이드 만들기$primary-color: #2563eb;$shades: ( lightest: lighten($primary-color, .. SCSS 활용 팁 14. SCSS 컬러 내장함수 사용하여 색상 관리하기 컴포넌트의 상태에 따라 색상을 변경하고 싶을 때, 각 컴포넌트의 기본색에서 밝은색과 어두운색을 하나하나 스포이드로 뽑아 rgb값을 직접 입력하여 작업했던 경험이 있습니다. 이런 작업은 번거로울 뿐만 아니라 일관적으로 색상을 표현하는데 어려움을 줍니다. 이럴 때 SCSS의 내장함수를 사용하면 자동으로 색상을 계산하여 조정할 수 있어 효율적이고, 여러 색상의 변형을 일정한 값으로 줄 수 있어 일관적으로 스타일을 유지할 수 있습니다. 이번 글에서는 SCSS의 색상 관련 내장함수를 몇가지 살펴보려 합니다.SCSS 컬러 내장함수밝기 조절lighten($color, $amount) : $color를 $amount%만큼 밝게 합니다.darken($color, $amount) : $color를 $amount%만큼 어.. [CSS] 이미지 편집 없이 CSS만으로 마스크 기능 만들기 (mask-image) 디자이너라면, 아니 디자인 툴을 접해본 사람이라면 마스크기능이 어떤것인지 설명하지 않아도 어느정도 알것입니다. 그만큼 디자인을 할 때 많이 사용하게 되는 기능인데요, 마스크란 어떤 요소의 특정 부분을 가리거나 투명하게 만드는 효과로 다양한 디자인적 연출이 가능하게 합니다. 이 마스크 기능을 CSS만으로 구현할 수 있는 방법이 있어 소개하려 합니다. mask-imagemask-image는 요소의 특정부분을 가리거나 투명하게 만들어 마스크 효과를 주는 CSS속성입니다. 다양한 방법으로 적용하여 디자인을 구현할 수 있습니다. 기본적인 사용방법은 이렇습니다. .element { mask-image: url('mask.png'); /* PNG, SVG 등 마스크 이미지 사용 */ -webkit-mask-ima.. SCSS 활용 팁 13. clamp()를 활용한 반응형 디자인 clamp()clamp()는 최소값, 기본값, 최대값을 설정하여 값이 뷰포트의 크기에 따라 동적으로 변경되게 하는 CSS함수 입니다. 복잡한 미디어쿼리를 사용하지 않고 코드의 부피를 줄일 수 있습니다. clamp(minimum, preferred, maximum)위와 같은 형태로 작성합니다.minimum: 최소값preferred: 기본값으로 일반적으로는 뷰포트 크기에 따라 계산된 값을 사용합니다.maximum: 최대값.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(16px, 5vw, 64px);}clamp()를 사용하여 컨테이너 요소의 패딩을 조정해 보았습니다. .container는 최소 16px의 패딩을 가지.. SCSS 활용 팁 12. @debug, @warn, @error로 디버깅하기 예상치 못한 스타일링 오류를 해결하고, 코드의 정확성과 효율성을 보장하기 위해 SCSS에도 디버깅이 필요합니다. 디버깅은 단순히 오류를 수정하는 것을 넘어 문제를 명확하게 정의하고 해결하며, 코드를 최적화하여 효율적인 개발 프로세스를 유지하는 데 중요한 역할을 합니다. @debug@debug는 SCSS의 변수, 값, 계산결과 등 작업자가 확인하고 싶은 정보를 출력합니다. 컴파일중 로그 형태로 출력되며, CSS로 출력된 결과물에 영향을 미치지 않습니다. $primary-color: #3498db;$font-size: 16px + 4px;// 값 출력@debug $primary-color;@debug $font-size;$primary-color와 $font-size값을 확인하는 코드를 작성했습니다. 디버깅.. 이전 1 2 3 다음
