전체 글 (31) 썸네일형 리스트형 SVG 스프라이트를 활용하여 아이콘 효율적으로 사용하기 - 2 이전글에서는 SVG 스프라이트의 개념과 수동 생성 방법을 알아보았는데요, 이번 글에서는 SVG 스프라이트를 자동으로 생성하는 방법들에 대해 적어볼까 합니다. 프로젝트의 환경에 따라, 프로젝트의 규모에 따라 알맞은 방식으로 자동생성하면 SVG 스프라이트 관리를 수월하게 할 수 있습니다.Webpack을 활용한 자동생성Webpack을 사용하는 프로젝트라면 플러그인을 설치하여 SVG 스프라이트를 자동생성 할 수 있습니다. 이 글에서는 svg-sprite-loader를 설치하여 스프라이트를 생성하겠습니다.npm install svg-sprite-loader --save-dev위 코드로 플러그인을 설치한 후, webpack.conpig.js 파일에 다음과 같이 아이콘 ID를 설정해 줍니다.module.exports.. SVG 스프라이트를 활용하여 아이콘 효율적으로 사용하기 - 1 SVG 스프라이트가 뭐지?SVG 스프라이트는 여러개의 SVG아이콘을 하나의 파일로 결합하여 관리하는 기법을 말합니다. 하나의 파일 안에서 태그를 사용하여 각각의 개별 아이콘을 정의하고, 태그로 사용하게 됩니다. SVG 스프라이트를 사용하는 이유는 다음과 같습니다.성능 최적화 - 하나의 SVG파일만 로드하므로 네트워크 비용을 줄여 성능을 개선할 수 있습니다.일관된 스타일 - fill, stroke등의 스타일을 쉽게 제어할 수 있습니다.재사용성 증가 - 여러페이지에서 동일한 아이콘을 사용할 경우 유리합니다.유지보수성 증가 - 하나의 파일만 관리하면 되기때문에 효율적입니다.어떻게 만들까?SVG 스프라이트를 만들때는, 태그를 사용하여 여러개의 SVG 아이콘을 하나의 파일에 저장하면 됩니다. 개별 아이콘을 태그로.. 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값을 확인하는 코드를 작성했습니다. 디버깅.. 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:.. SCSS 활용 팁 10. SCSS변수를 CSS변수와 연동하여 한번에 관리하기 SCSS의 변수는 강력하지만, 런타임 동작이나 동적 스타일링과 관련된 한계가 존재합니다. SCSS 변수와 CSS의 변수를 연동하면, SCSS에서 선언한 변수값을 CSS에도 할당하기때문에 SCSS 변수의 기능은 활용하고, CSS 변수로서 런타임 동작으로 확장시킬 수 있습니다.SCSS변수의 한계 SCSS변수는 막강한 기능을 가지고 있지만, 컴파일시에만 작동하며 일단 CSS로 컴파일되고 난 후에는 변수값을 동적으로 변경할 수 없는 한계를 가지고 있습니다. 이는 사용자 입력, 시스템 설정, 환경 변화에 따른 스타일을 동적으로 변경해야 하는 경우 불리합니다. 또한, 변수의 값이 컴파일 된 CSS코드에 직접적으로 출력되는 방식이므로, 여러번 반복하여 사용할 경우 CSS파일의 크기를 증가시킵니다.결론적으로 SCSS변.. SCSS 활용 팁 9. @import VS @use 차이점 알고 쓰기 SCSS에서 @import와 @use는 모두 다른 스타일시트를 가져오는데 사용되지만 용도와 동작 방식이 다릅니다. 요즘은 @use를 더 권장한다고 하는데요. @import와 @use의 차이점이 뭔지, @use를 권장하는 이유는 무엇인지 알아보겠습니다. @import 기존의 SCSS부터 스타일시트를 가져올 때 사용하던 방식입니다. @import로 스타일 시트를 가져오면 모든 변수, 믹스인, 함수를 전역으로 추가합니다. 또 같은 파일을 여러번 불러올 수 있어 성능 문제나 충돌을 일으킬 수 있습니다. @use@use는 모듈 시스템을 기반으로 스타일 시트를 가져오며 자체적인 로컬 스코프를 가집니다. 또 독자적인 네임스페이스를 사용하기 때문에 충돌을 방지할 수 있습니다. @import와는 달리 같은 파일을 여러번.. SCSS 활용 팁 8. 보간 기능을 사용하여 동적으로 경로 관리하기 SCSS의 변수 보간 기능을 사용하면 반복적인 경로를 동적으로 관리하여 유지보수성이 향상됩니다. 폴더의 위치가 변경되어도 변수의 값만 수정하면 전체 스타일 파일을 업데이트 할 수 있어 편리합니다. 보간 이란?변수 보간(Variable Interpolation)은 SCSS에서 문자열이나 값을 동적으로 조합하기 위해 사용하는 기능으로, SCSS에서 변수를 문자열 내부에 직접 포함하고 싶을때 사용하는 문법입니다.변수 보간의 기본 형태는 이렇습니다.#{$variable}// #은 보간의 시작을 의미// {} 안에 변수나 표현식 등을 포함// $variable은 SCSS의 변수 기본 변수와 보간 활용기본적인 변수 보간의 형태를 경로 관리에 활용한 예시입니다. 이렇게만 바꾸어도 여러개의 경로를 효과적으로 관리할 수.. 이전 1 2 3 4 다음
