본문 바로가기

👩‍💻

 (17)
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의 변수 기본 변수와 보간 활용기본적인 변수 보간의 형태를 경로 관리에 활용한 예시입니다. 이렇게만 바꾸어도 여러개의 경로를 효과적으로 관리할 수..
SCSS 활용 팁 7. 스타일시트를 효율적으로 모듈화 하기 위한 7-1패턴 SCSS를 모듈화하면 규모가 큰 프로젝트에서도 관리의 효율성과 유지보수성을 확보할 수 있습니다.  7-1패턴SCSS 파일과 폴더를 체계적으로 관리하기 위한 패턴으로, 7개의 폴더와 하나의 파일로 구성됩니다. 확장 가능성과 재사용성을 극대화하기 위하여 만들어졌으며, 대규모 프로젝트에서 유용합니다. 다음과 같은 구조로 사용됩니다.src/ └── styles/ ├── abstracts/ │ ├── _variables.scss │ ├── _mixins.scss │ ├── _functions.scss ├── base/ │ ├── _reset.scss │ ├── _typography.scss ├── comp..
zsh: command not found: brew 해결법 macOS용 패키지 관리자인 homebrew를 설치하고, brew를 사용해서 다른앱을 설치하려 하는데 오류가 뜨는 답답한 상황. homebrew 삭제와 재설치를 반복하다가, 결국 방법을 찾았다🤧 homebrew설치를 아직 안한 경우에는 brew가 없어서 그럴 수 있으니 설치 먼저 해보세요~https://brew.sh/ko/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh 터미널에서 open ~ 명령어 입력 (파인더가 열린다)파인더에서 command + shift + . 누르면 숨겨진 파일을 볼 수 있다.숨겨진 파일 중 .zshrc를 연다export PATH="/opt/homebrew/bin:$PATH" 를 추가한다..zshrc 저장한..
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..
Android(안드로이드) 앱 이전 방법 구글 플레이 콘솔 로그인 후 설정 화면으로 이동합니다.설정화면 하단에 앱 이전 버튼을 클릭합니다.'앱 이전하기' 버튼을 클릭해서 이전하기 화면으로 이동합니다.트랜잭션 ID : 내 트랙잭션 아이디를 입력합니다. 트랜잭션 아이디는 구글 개발자 계정을 구매했을때 발송되는 메일에 들어 있습니다.구글에서 Payment라고 검색하시면 찾을 수 있습니다.메일 제목은 Google: 감사합니다 라고 검색됩니다.해당 메일 하단에 있는 PDS 로 시작하는 코드가 트랜잭션 아이디 입니다 새 개발자 아이디 개발자 아이디는 구글 플레이 콘솔에 들어가면 상단에 Account ID로 찾을 수 있습니다. 모든 정보를 입력하고 검토 및 이전 버튼을 클릭하시면 됩니다.
SCSS 활용 팁 5. 믹스인(mixin)으로 반응형 중단점 쉽게 관리하기 웹페이지를 반응형으로 디자인하는 이유는 사용자의 화면 크기와 방향, 해상도 등에 따라 디자인을 조정하여 최적의 사용자 경험을 제공하기 위해서일 것입니다. 이 때, 각 화면 크기에 맞는 적절한 레이아웃과 스타일을 제공하기 위해 스타일이 변화되는 기준점인 중단점(Breakpoint)을 지정하고 미디어쿼리를 사용하여 작업하게 되는데요. SCSS의 @mixin을 사용하면, 이 작업을 쉽고 편리하게 할 수 있습니다. 중단점 설정하기먼저, 중단점을 변수로 정의합니다. $breakpoints라는 맵을 생성하여 정의하였습니다. // 중단점 변수 설정$breakpoints: ( xs: 480px, sm: 768px, md: 1024px, lg: 1200px, xl: 1440px);이제 이를 사용하여 미디어쿼리를..
FE 기능 - CSS 컨테이너 쿼리(Container Queries)와 스타일 쿼리(Style Queries) This is a box 컨테이너 쿼리(Container Queries)는 요소가 속한 컨테이너의 크기와 스타일을 기준으로 CSS를 적용할 수 있는 새로운 기능입니다. 이는 기존의 뷰포트를 기준으로 스타일을 적용하는 미디어 쿼리와는 다릅니다.특히, 재사용 가능한 컴포넌트를 다양한 변형 버전으로 활용하거나, 컨테이너 크기별 디자인 변화를 적용할 때 매우 유용합니다.1. 주요 특징컨테이너 크기 기반 스타일링컨테이너의 width, height 등의 크기를 기준으로 스타일을 적용할 수 있습니다.미디어 쿼리처럼 뷰포트 전체를 기준으로 하지 않아도 됩니다.스타일 쿼리컨테이너의 특정 CSS 커스텀 속성을 기반으로 스타일을 변경할 수 있습니다.현재는 CSS **커스텀 속성(--property-name)**에만 작동하..

티스토리툴바