희연

정밀한 UI와 견고한 UX를 고민합니다.
사람들에게 더 좋은 영향을 주기 위해 문제를 해결하고 디자인 합니다.
frontend 👩🏻‍💻 / UX 📐 / visual-design 🎨

Posts by Category

CSS

ag-grid 디자인을 원하는대로 변경하기

2 분 소요

테마 수정하는 방법 제공된 테마 중 하나를 사용. CSS 수정으로 간단하게 원하는 부분을 수정한다 테마 매개변수 및 CSS를 사용하여 제공된 테마를 재정의. 이를 위해서는 Sass 파일을 빌드하도록 프로젝트를 구성해야한다. 모양, 느낌, 색상, 패딩 및 테두리와 같은 요소...

select와 option으로 커스텀 셀렉트 만들기

최대 1 분 소요

CSS로 만든 셀렉트박스에서 발생하는 주요 이슈로 인해 브라우저 기본인 <select> 와 <option> 을 사용해 드롭다운 되는 셀렉트 박스를 구현하고자 한다.

CSS 선언 순서

1 분 소요

CSS를 작업하다보면 하나의 클래스에 여러개 속성을 선언하는 경우가 자주 발생한다. 속성 작성에 규칙이 있다면 추후 코드를 들여다볼 때 조금 더 내용 파악이 쉽지 않을까? 하는 마음에 구글링을 해보니, 역시나 CSS 선언 순서와 관련된 내용이 방대하고도 자세하게 정리되어 있었다.

IE에서 initial 대응하기

최대 1 분 소요

IE 크로스브라우징시 레이아웃이 깨지는 현상의 많은 경우가 CSS의 initial 값을 사용했을 때 발생했다. initial은 부모요소가 주는 모든 상속값을 건너뛰어 CSS 초기값을 되돌리는데 사용할 수 있다.

크롬 자동완성의 배경색상 변경하기

최대 1 분 소요

크롬 브라우저 및 webkit 기반 브라우저에서 자동완성기능 사용시 input 요소에 특정 배경색상이 적용된다. 가상 선택자 :-webkit-autofill 을 이용해 다음 CSS로 색상 수정 가능하다. 다만 background-color 속성이 아닌 box-shadow 속성을...

폰트 아이콘의 원리와 Fontello 사용 방법

1 분 소요

웹에 아이콘을 넣는 방식은 다양하다. 이미지(png, gif등)로 불러오기, SVG를 불러오기 그리고 웹폰트로 만들어 추가할 수도 있다. Fontello는 미리 제공하는 아이콘 중 원하는 아이콘을 선택해 경량화된 웹폰트로 만들수 있으며 특히 SVG 파일을 업로드해 원하는 아이콘을 ...

Design

버튼 숨기기 vs 비활성화

최대 1 분 소요

버튼 또는 컨트롤러의 비활성 상태 (Inactive State)는 두가지로 표현할 수 있다. 버튼을 숨기거나 비활성화 된 상태(disabled)로 표시하는것이다.

Progress Control

2 분 소요

진행률 컨트롤 (Progress control)은 긴 작업을 진행중인 사용자에게 피드백을 제공한다. 진행률 표시가 표시될 때 사용자가 앱을 조작할 수 없다는 의미이며 사용되는 표시기에 따라 대기 시간을 예측할 수 있다는 의미이다.

Framework's

Bootstrap 테마 설정

9 분 소요

테마와 구성 요소의 변경을 쉽게 하기 위한 글로벌 스타일 설정이 가능합니다. 새로운 빌트인 Sass 변수를 사용하여 Bootstrap 4를 정의하세요.

General

타이포그래피 규칙 Sass로 관리하기

2 분 소요

디자인 시스템에서 정의한 타이포그라피 규칙을 코드화해 편리하게 사용하고 싶었다. 타이포그래피 규칙은 font-size, font-weight, line-height, letter-spacing 등 복합적인 속성으로 구성되어 있어 변수만으로는 원하는 구조를 구현하기 힘들어 보였다. ...

이미 사용중인 Port 정보 찾고 강제 종료하기

최대 1 분 소요

VScode의 Spring Boot Dashboard로 서버를 구동했을 때, 서버가 시작되다가 강제로 종료되는 상황이 발생했다. 하단 패널에서 Debug console 메뉴에 이미 8080포트를 사용하고 있어 서버 구동이 불가능하다는 메시지를 확인했다. 이렇듯 필요한 웹 서버 포...

Git

Git Subtree 사용하기

2 분 소요

디자인 개편을 진행하며 핵심이 되는 디자인 엘리먼트와 제품 개발에 필요한 파일을 분리하여 핵심 디자인 파일을 여러 저장소에 포함시키고 싶었다.

원격 저장소에서 삭제된 브랜치 로컬에도 반영하기

최대 1 분 소요

원격에 있는 브랜치는 원격 브랜치 삭제하기 에 있는 명령어로 제거가 가능하다. 특히, 로컬에도 있고 원격에도 있는 브랜치는 로컬에서 제거하고 원격에 push 해주기 때문에 로컬과 원격 동시에 제거되지만 원격 브랜치에만 존재하는 브랜치는 위 링크에 있는 원격 브랜치만 제거하는 명령어...

git stash drop 시킨 변경사항 복구하기

최대 1 분 소요

비가 오고 싱숭생숭한 기분으로 stash 해둔 내용을 git stash drop 시켰을 때! 앞이 캄캄해져 다시 작업 해야하나 파일을 뒤적이다가 git stash drop 복구하기를 구글링했다. 천만 다행으로 drop 된 내용을 다시 복구하는 방법을 찾았다. git stash dr...

원격 브랜치 삭제하기

최대 1 분 소요

로컬에 있는 브랜치를 로컬과 원격에서 동시에 삭제하고자 하는 경우, 브랜치 삭제하기 를 먼저 수행한 후 아래의 명령어로 upstream에 반영한다.

Git에서 Untracked 상태인 파일 삭제하기

최대 1 분 소요

프로젝트를 진행하다보면 워킹 디렉토리에 Git에서 관리하지 않을 파일들이 생성된다. 저장소에 넣고 버전 관리 할 필요가 없는 build된 CSS파일이나(내가 진행하는 프로젝트는 배포시에 최종 빌드된 CSS만 버전을 관리하기 때문에), 테스트용 이미지등이 생긴다. 이런 파일들은 gi...

Merge 충돌 발생시 취소하기

최대 1 분 소요

Merge 도중 충돌이 발생했으나, 예상했던 일도 아니고 지금 당장 처리할 일도 아니라면 아래의 명령어로 Merge 이전으로 되돌릴 수 있다

브랜치 삭제하기

최대 1 분 소요

임시 브랜치나, 이미 dev에 통합되어 더이상 필요없게 된 브랜치를 삭제하는 방법이다.

Git에서 다른 브랜치의 특정 파일 체크아웃하기

최대 1 분 소요

git-checkout 명령은 워킹 트리의 파일이나 디렉토리를 전체 병합하지 않고 다른 브랜치의 특정 파일이나 디렉토리로 업데이트하는데 사용할 수 있다. 이 기능은 여러 브랜치를 사용중일 때 유용하게 사용될 수 있다.

HTML/CSS

Mac

Tools

자주 쓰는 VScode 단축키 정리

최대 1 분 소요

Cmd + \: 창 분할하기 Cmd + B: 사이드바 토글 Cmd + J: 하단 패널 토글 Cmd + P: Quick Open Cmd + Shift + T: Re Open Cmd + Shift + K: 한줄 삭제 Cmd + Shift + F: 워크스페이스...

VScode

VScode로 Sass 컴파일하기

1 분 소요

Sass를 컴파일하기 위해 프롬프트에 직접 명령을 입력하는 방법, 기타 확장 프로그램을 사용하는 방법이 있다. VSCode의 확장 프로그램을 이용하면 버튼 한번으로 Sass파일의 변경을 지켜볼 수 있으니 훨씬 편한 작업 환경을 구축할 수 있다. 내가 사용하는 VScode의 Live...

webpack

Webpack으로 Fontawesome 번들링 하기

최대 1 분 소요

npm으로 인스톨할 수 있긴 하지만 폰트 경로 설정 등의 이슈로 실패해 웹페이지에서 다운로드 받아 설정하는 방식으로 진행한다.

Webpack으로 CSS와 Scss 파일 번들링 하기

1 분 소요

일반적으로 html파일에서 CSS 파일은 <head> 섹션에 링크를 걸고, javascript는 <body> 섹션에 그 소스 링크를 걸어둔다. 그런데 webpack에서는 이 CSS와 javascript를 하나의 번들로 통합할 수 있다.