티스토리

Purpleo

검색하기

블로그 홈

Purpleo

purpleo.kr/m

Purpleo님의 블로그 입니다.

구독자: 0

방명록 방문하기

주요 글 목록

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파일을 임포트하고 스타일 코드를 .. 공감수 1 댓글수 1 2025. 2. 6.
SCSS 활용 팁 16. SCSS를 활용한 다크모드 만들기 다양한 사용 환경을 고려하고 사용자의 취향에 맞춘 서비스를 제공하기 위해 기본 테마 외에도 다크버전을 제공하는 경우를 자주 보게 됩니다. 이번에는 SCSS의 기능과 Javascript를 활용하여 다크모드를 만드는 방법을 알아보려고 합니다.HTML 작성모드를 변경할 HTML코드를 작성합니다. #theme-toggle 버튼을 누르면 페이지가 다크모드로 변경되게 작업하려 합니다. 🌚 다크 모드 SCSS 변수 설정_variables.scss파일을 생성하고 여기에 기본 라이트 모드와 다크 모드의 주요 색상을 변수로 지정합니다. 이때 map을 사용하면 가독성 향상에 좋고 사용도 편해집니다.$light-mode: ( bg: #ffffff, text: #333333, primary: #007bff);$dar.. 공감수 0 댓글수 0 2025. 2. 6.
[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... 공감수 0 댓글수 0 2025. 2. 6.
SCSS 활용 팁 15. SCSS 컬러 내장함수 사용하여 컬러쉐이드 만들기 이전 글에서는 SCSS의 여러가지 컬러 내장함수를 알아보고 이를 이용하여 버튼의 상태에 따라 색상이 자동으로 변경되는 스타일을 만들어 봤는데요, 이번에는 그중 darken()과 lighten()을 활용하여 디자인시스템에서 사용 가능한 컬러 쉐이드를 만들어보겠습니다. 컬러 쉐이드(Color Shade)컬러 쉐이드는 특정 색을 기준으로 하여 단계적으로 밝게, 또는 어둡게 변형을 주는 것을 말합니다. 같은 색상 계열에서 다양한 값을 표현하고 싶을 때 사용합니다. 아래는 제가 주로 사용하는 Tailwind CSS의 컬러 쉐이드 팔레트입니다.Map과 @each를 사용한 컬러 쉐이드 만들기$primary-color: #2563eb;$shades: ( lightest: lighten($primary-color, .. 공감수 1 댓글수 0 2025. 2. 5.
SCSS 활용 팁 14. SCSS 컬러 내장함수 사용하여 색상 관리하기 컴포넌트의 상태에 따라 색상을 변경하고 싶을 때, 각 컴포넌트의 기본색에서 밝은색과 어두운색을 하나하나 스포이드로 뽑아 rgb값을 직접 입력하여 작업했던 경험이 있습니다. 이런 작업은 번거로울 뿐만 아니라 일관적으로 색상을 표현하는데 어려움을 줍니다. 이럴 때 SCSS의 내장함수를 사용하면 자동으로 색상을 계산하여 조정할 수 있어 효율적이고, 여러 색상의 변형을 일정한 값으로 줄 수 있어 일관적으로 스타일을 유지할 수 있습니다. 이번 글에서는 SCSS의 색상 관련 내장함수를 몇가지 살펴보려 합니다.SCSS 컬러 내장함수밝기 조절lighten($color, $amount) : $color를 $amount%만큼 밝게 합니다.darken($color, $amount) : $color를 $amount%만큼 어.. 공감수 0 댓글수 0 2025. 2. 4.
[CSS] 이미지 편집 없이 CSS만으로 마스크 기능 만들기 (mask-image) 디자이너라면, 아니 디자인 툴을 접해본 사람이라면 마스크기능이 어떤것인지 설명하지 않아도 어느정도 알것입니다. 그만큼 디자인을 할 때 많이 사용하게 되는 기능인데요, 마스크란 어떤 요소의 특정 부분을 가리거나 투명하게 만드는 효과로 다양한 디자인적 연출이 가능하게 합니다. 이 마스크 기능을 CSS만으로 구현할 수 있는 방법이 있어 소개하려 합니다. mask-imagemask-image는 요소의 특정부분을 가리거나 투명하게 만들어 마스크 효과를 주는 CSS속성입니다. 다양한 방법으로 적용하여 디자인을 구현할 수 있습니다. 기본적인 사용방법은 이렇습니다. .element { mask-image: url('mask.png'); /* PNG, SVG 등 마스크 이미지 사용 */ -webkit-mask-ima.. 공감수 0 댓글수 0 2025. 2. 3.
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의 패딩을 가지.. 공감수 0 댓글수 0 2025. 1. 25.
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값을 확인하는 코드를 작성했습니다. 디버깅.. 공감수 0 댓글수 0 2025. 1. 25.
SCSS 활용 팁 11. SCSS 반복문 활용으로 대규모 디자인 시스템 관리하기 작업 프로세스의 효율을 높이고 일관성있는 서비스를 제공하기 위해 디자인 시스템의 중요성이 점점 강조되고 있습니다. SCSS 반복문 (@for, @each, @while)을 활용하면 색상, 폰트 사이즈, 간격 등 다양한 스타일요소를 체계적으로 정의하고, 반복문으로 쉽게 생성할 수 있기 때문에 대규모 디자인 시스템을 효율적으로 관리할 수 있습니다. @for@for는 숫자를 기반으로 반복 실행되며, 시작값부터 끝값까지 증가 혹은 감소합니다./* SCSS */@for $i from 1 through 5 { // 1부터 5까지 반복 .margin-#{$i} { margin: #{$i}rem; }}/* CSS 출력결과 */.margin-1 { margin: 1rem;}.margin-2 { margin:.. 공감수 0 댓글수 0 2025. 1. 24.
SCSS 활용 팁 10. SCSS변수를 CSS변수와 연동하여 한번에 관리하기 SCSS의 변수는 강력하지만, 런타임 동작이나 동적 스타일링과 관련된 한계가 존재합니다. SCSS 변수와 CSS의 변수를 연동하면, SCSS에서 선언한 변수값을 CSS에도 할당하기때문에 SCSS 변수의 기능은 활용하고, CSS 변수로서 런타임 동작으로 확장시킬 수 있습니다.SCSS변수의 한계 SCSS변수는 막강한 기능을 가지고 있지만, 컴파일시에만 작동하며 일단 CSS로 컴파일되고 난 후에는 변수값을 동적으로 변경할 수 없는 한계를 가지고 있습니다. 이는 사용자 입력, 시스템 설정, 환경 변화에 따른 스타일을 동적으로 변경해야 하는 경우 불리합니다. 또한, 변수의 값이 컴파일 된 CSS코드에 직접적으로 출력되는 방식이므로, 여러번 반복하여 사용할 경우 CSS파일의 크기를 증가시킵니다.결론적으로 SCSS변.. 공감수 0 댓글수 0 2025. 1. 23.
SCSS 활용 팁 9. @import VS @use 차이점 알고 쓰기 SCSS에서 @import와 @use는 모두 다른 스타일시트를 가져오는데 사용되지만 용도와 동작 방식이 다릅니다. 요즘은 @use를 더 권장한다고 하는데요. @import와 @use의 차이점이 뭔지, @use를 권장하는 이유는 무엇인지 알아보겠습니다. @import 기존의 SCSS부터 스타일시트를 가져올 때 사용하던 방식입니다. @import로 스타일 시트를 가져오면 모든 변수, 믹스인, 함수를 전역으로 추가합니다. 또 같은 파일을 여러번 불러올 수 있어 성능 문제나 충돌을 일으킬 수 있습니다. @use@use는 모듈 시스템을 기반으로 스타일 시트를 가져오며 자체적인 로컬 스코프를 가집니다. 또 독자적인 네임스페이스를 사용하기 때문에 충돌을 방지할 수 있습니다. @import와는 달리 같은 파일을 여러번.. 공감수 0 댓글수 0 2025. 1. 17.
SCSS 활용 팁 8. 보간 기능을 사용하여 동적으로 경로 관리하기 SCSS의 변수 보간 기능을 사용하면 반복적인 경로를 동적으로 관리하여 유지보수성이 향상됩니다. 폴더의 위치가 변경되어도 변수의 값만 수정하면 전체 스타일 파일을 업데이트 할 수 있어 편리합니다. 보간 이란?변수 보간(Variable Interpolation)은 SCSS에서 문자열이나 값을 동적으로 조합하기 위해 사용하는 기능으로, SCSS에서 변수를 문자열 내부에 직접 포함하고 싶을때 사용하는 문법입니다.변수 보간의 기본 형태는 이렇습니다.#{$variable}// #은 보간의 시작을 의미// {} 안에 변수나 표현식 등을 포함// $variable은 SCSS의 변수 기본 변수와 보간 활용기본적인 변수 보간의 형태를 경로 관리에 활용한 예시입니다. 이렇게만 바꾸어도 여러개의 경로를 효과적으로 관리할 수.. 공감수 0 댓글수 0 2025. 1. 16.
SCSS 활용 팁 7. 스타일시트를 효율적으로 모듈화 하기 위한 7-1패턴 SCSS를 모듈화하면 규모가 큰 프로젝트에서도 관리의 효율성과 유지보수성을 확보할 수 있습니다. 7-1패턴SCSS 파일과 폴더를 체계적으로 관리하기 위한 패턴으로, 7개의 폴더와 하나의 파일로 구성됩니다. 확장 가능성과 재사용성을 극대화하기 위하여 만들어졌으며, 대규모 프로젝트에서 유용합니다. 다음과 같은 구조로 사용됩니다.src/ └── styles/ ├── abstracts/ │ ├── _variables.scss │ ├── _mixins.scss │ ├── _functions.scss ├── base/ │ ├── _reset.scss │ ├── _typography.scss ├── comp.. 공감수 0 댓글수 0 2025. 1. 15.
SCSS 활용 팁 6. 참조 선택자 "&"을 활용하여 BEM 방법론에 따라 클래스 네이밍하기 참조선택자(Parent Selector) & SCSS에서 &는 현재 선택자를 참조하는 기능입니다. /* SCSS */.button { color: white; &:hover { background-color: blue; // .button:hover } &--primary { background-color: green; // .button--primary }}/* CSS */.button { color: white;}.button:hover { background-color: blue;}.button--primary { background-color: green;}예시와 같이 중첩된 상태에서 현재 선택자를 대신해서 사용되며, 코드를 깔끔하게 재사용 할 수 있도록 도와줍니다. BE.. 공감수 0 댓글수 0 2025. 1. 13.
SCSS 활용 팁 5. 믹스인(mixin)으로 반응형 중단점 쉽게 관리하기 웹페이지를 반응형으로 디자인하는 이유는 사용자의 화면 크기와 방향, 해상도 등에 따라 디자인을 조정하여 최적의 사용자 경험을 제공하기 위해서일 것입니다. 이 때, 각 화면 크기에 맞는 적절한 레이아웃과 스타일을 제공하기 위해 스타일이 변화되는 기준점인 중단점(Breakpoint)을 지정하고 미디어쿼리를 사용하여 작업하게 되는데요. SCSS의 @mixin을 사용하면, 이 작업을 쉽고 편리하게 할 수 있습니다. 중단점 설정하기먼저, 중단점을 변수로 정의합니다. $breakpoints라는 맵을 생성하여 정의하였습니다. // 중단점 변수 설정$breakpoints: ( xs: 480px, sm: 768px, md: 1024px, lg: 1200px, xl: 1440px);이제 이를 사용하여 미디어쿼리를.. 공감수 0 댓글수 0 2025. 1. 10.
SCSS 활용 팁 4. @extend를 이용한 스타일 상속 중복된 스타일을 여러번 반복해서 써야하는 경우 유용하게 사용할 수 있는 @extend에 대해 알아보겠습니다.@extend@extend는 SCSS에서 스타일 코드의 재사용성을 높이기 위해 제공되는 기능 중 하나로, 스타일을 복사해서 사용하는 @mixin과 달리 선택자가 다른 선택자의 스타일을 상속받는 방식으로 동작합니다. /* SCSS */.button { padding: 10px 20px; font-size: 16px; background-color: blue; color: white;}.primary-button { @extend .button; background-color: darkblue;}/* css */.button, .primary-button { padding: 10px 20p.. 공감수 0 댓글수 0 2025. 1. 8.
SCSS 활용 팁 3. 변수와 믹스인 사용으로 배경 이미지 경로 관리하기 css 작업시 이미지 경로를 여러곳에 써야 할때, 어찌보면 별거 아닌 일이지만 매우 귀찮은 일임에는 틀림 없을 것입니다. 거기다가 중간에 경로가 변경이라도 된다면, 작업한 경로를 하나하나 찾아 바꿔줘야 하겠지요. 이럴 경우에도 scss가 도움을 줄 수 있습니다. 변수로 이미지 경로 관리하기scss에서 이미지 경로를 변수로 정의해 둔다면, 경로를 반복해서 입력할 필요 없이 변수만 입력하면 됩니다. 경로가 바뀌었을 경우에도, 변수를 정의한 부분만 수정해주면 되니 유지보수에도 유리합니다.// 이미지경로 변수 정의$image-path: "../assets/images";// 변수 사용.background { background-image: url("#{$image-path}/background.jpg");.. 공감수 0 댓글수 0 2025. 1. 6.
SCSS 활용 팁 2. @if/@else를 포함한 @mixin으로 텍스트 말줄임 쉽게 처리하기 한정된 공간에서 너무 긴 텍스트를 보여주게되면 로딩속도와 가독성이 떨어지는 것은 물론이고 디자인의 일관성까지 해치게 됩니다. 그래서 중요한 텍스트만 간결하게 보여주고 필요시 상세페이지로 유도하기 위해 말줄임 처리: ellipsis를 사용하게 되는데요. css에서 ellipsis 처리하는 방법도 간편하긴 하지만, 여러군데에 처리가 필요한 경우에는 관리가 힘들어질 수 있습니다. 그래서 scss @mixin을 활용하여 반복 사용이 가능한 코드를 만들어 처리해 보려고 합니다.🚨주의사항🚨본 게시물의 예제에서는 코드의 변환된 모습 위주로 보여주기 위해 생략했지만, 텍스트 말줄임을 처리하기 위해서는 고정된 width값이 반드시 필요합니다. width가 지정되지 않을 경우 말줄임이 동작하지 않습니다.@mixin@m.. 공감수 0 댓글수 0 2025. 1. 6.
SCSS 활용 팁 1. @function을 활용하여 px을 rem으로 쉽게 변환하기 디바이스의 다양화에 대응하고 사용자의 브라우저 설정을 존중하는 유연한 디자인을 제공하기 위해, 현업에서도 고정값인 px(픽셀)보다 em이나 rem과 같은 비율로 크기 조정이 가능한 단위들을 자주 사용하게 되었는데요. 이 중에서도 특히, 루트 html의 폰트사이즈를 기준으로 하는 rem을 자주 사용하게 되는 것 같습니다.1rem = ?1rem은 html에서 설정한 font-size의 값과 동일합니다. html의 font-size가 16px 일 때, 1rem은 16px이 되고, html의 font-size를 14px로 설정하면 1rem은 14px이 됩니다. 직접적인 부모 요소의 영향을 받는 em과 달리, rem은 html font-size의 영향만 받으므로 예측하기 쉽고, 미디어쿼리를 사용해 html의 폰트.. 공감수 0 댓글수 0 2025. 1. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.