전체 글 (31) 썸네일형 리스트형 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.. 디자인 레퍼런스 참고 사이트 모음 디자인 레퍼런스는 단순 참고자료라기 보다 효율적인 디자인을 위한 필수 조건이라고 할 수 있습니다. 좋은 레퍼런스는 디자인 영감과 창의적인 아이디어를 떠오르게 하고, 시장의 최신 트렌드를 분석할 수 있으며 이미 검증된 UI/UX 패턴으로 시행착오를 줄이는 데에도 중요한 역할을 합니다. 클라이언트나 팀원과의 소통에서도 원하는 바를 명확하게 전달할 수 있어 효율적인 작업 진행을 가능하게 하지요. 저도 새로운 프로젝트를 시작할 때 좋은 레퍼런스를 찾는것에 공을 들이는데요. 이 때 주로 찾게되는 사이트를 공유하려고 합니다.핀터레스트가장 자주 찾는 사이트는 당연하게도(?) 핀터레스트입니다. 사용자가 많은 만큼 자료가 광범위하고, 꼭 UI를 참고하지 않더라도 여러 이미지를 접할 수 있어 무드보드나 색감에 대한 영감을.. 티스토리 게시물에 코드펜(Codepen) 적용하기 코드펜은 실시간으로 작성한 코드의 결과를 확인할 수 있고 쉽게 공유할 수 있어 편리한 온라인 코드에디터이다.가끔 티스토리에 작성한 코드에 대한 결과를 그때그때 보여주고 싶을 때가 있어서 찾아보다가 코드펜의 임베드 기능을 사용하여 티스토리에 올리는 방법을 알게되어 기록하려고한다. https://codepen.io/ CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.codepen.io코드펜의 사용법은 매우 간단했다. 일단 회원가입을 하고 좌측 상단의 메.. [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.. 이전 1 2 3 4 다음
