본문 바로가기

전체 글

 (31)
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)**에만 작동하..
FE 기능 - CSS 앵커 포지셔닝 API 사용하기 CSS 앵커 포지셔닝(Anchor Positioning) API는 HTML 요소를 특정 기준(anchor) 요소를 기준으로 위치를 지정할 수 있도록 해주는 새로운 CSS 기능입니다. 이를 활용하면 툴팁, 팝오버, 주석 라벨, 동적 차트 레이블 등을 쉽게 구현할 수 있습니다.CSS 앵커 포지셔닝 API의 주요 특징기준(anchor) 요소 설정특정 HTML 요소를 기준(anchor)으로 지정하고, 다른 요소(자식 요소)를 이 기준에 상대적으로 배치할 수 있습니다.예를 들어, 버튼 위에 툴팁을 띄우거나, 특정 위치에 팝오버를 표시할 때 유용합니다.레이어 인터페이스 구현이 API를 사용하면 제3자 라이브러리 없이도 툴팁이나 팝오버 같은 레이어 기반 인터페이스를 간단히 만들 수 있습니다.여러 기준 요소 연결하나의..
flask(python)로 Android/iOS API 구현하기(파일 첨부 추가) android, iOS 모바일 앱 구현 시 BE API를 구현해야할 일이 생깁니다. 그런데 iOS의 경우에는 장비들이 어느 정도 정해져 있지만 android의 경우에는 많이 파편화 되어 있습니다. 그래서 파일 첨부 시 다양한 사이즈 형태의 파일을 접하게 됩니다. 모든 기기에서 앨범, 카메라 사용 시 처리하게 대응할 수 있지만 모든 장비를 대응할 수는 없기 때문에  BE 서버에서 처리하는게 더 효율적일 수 있습니다. flask로 파일을 처리하는 API 코드 입니다.  import iofrom flask import Flask, request, redirect, url_for, render_templatefrom werkzeug.utils import secure_filenamefrom PIL import ..

티스토리툴바