BEM 문서 번역 - Quick Start
BEM을 익히기 위해 BEM Methology 사이트를 번역하며 학습/정리 한 내용!
Posts by Year
2021
Git Subtree 사용하기
디자인 개편을 진행하며 핵심이 되는 디자인 엘리먼트와 제품 개발에 필요한 파일을 분리하여 핵심 디자인 파일을 여러 저장소에 포함시키고 싶었다.
2020
원격 저장소에서 삭제된 브랜치 로컬에도 반영하기
원격에 있는 브랜치는 원격 브랜치 삭제하기 에 있는 명령어로 제거가 가능하다. 특히, 로컬에도 있고 원격에도 있는 브랜치는 로컬에서 제거하고 원격에 push 해주기 때문에 로컬과 원격 동시에 제거되지만 원격 브랜치에만 존재하는 브랜치는 위 링크에 있는 원격 브랜치만 제거하는 명령어...
ag-grid 디자인을 원하는대로 변경하기
테마 수정하는 방법 제공된 테마 중 하나를 사용. CSS 수정으로 간단하게 원하는 부분을 수정한다 테마 매개변수 및 CSS를 사용하여 제공된 테마를 재정의. 이를 위해서는 Sass 파일을 빌드하도록 프로젝트를 구성해야한다. 모양, 느낌, 색상, 패딩 및 테두리와 같은 요소...
git stash drop 시킨 변경사항 복구하기
비가 오고 싱숭생숭한 기분으로 stash 해둔 내용을 git stash drop 시켰을 때! 앞이 캄캄해져 다시 작업 해야하나 파일을 뒤적이다가 git stash drop 복구하기를 구글링했다. 천만 다행으로 drop 된 내용을 다시 복구하는 방법을 찾았다. git stash dr...
타이포그래피 규칙 Sass로 관리하기
디자인 시스템에서 정의한 타이포그라피 규칙을 코드화해 편리하게 사용하고 싶었다. 타이포그래피 규칙은 font-size, font-weight, line-height, letter-spacing 등 복합적인 속성으로 구성되어 있어 변수만으로는 원하는 구조를 구현하기 힘들어 보였다. ...
이미 사용중인 Port 정보 찾고 강제 종료하기
VScode의 Spring Boot Dashboard로 서버를 구동했을 때, 서버가 시작되다가 강제로 종료되는 상황이 발생했다. 하단 패널에서 Debug console 메뉴에 이미 8080포트를 사용하고 있어 서버 구동이 불가능하다는 메시지를 확인했다. 이렇듯 필요한 웹 서버 포...
input type이 search일 경우 safari에서 스타일링 문제 해결
<input> 태그에 값이 입력되면 삭제(cancel) 버튼이 자동으로 보여지기 위해 속성을 type="search" 로 선언했다.
2019
select와 option으로 커스텀 셀렉트 만들기
CSS로 만든 셀렉트박스에서 발생하는 주요 이슈로 인해 브라우저 기본인 <select> 와 <option> 을 사용해 드롭다운 되는 셀렉트 박스를 구현하고자 한다.
CSS를 사용해 HTML을 스타일링 하는 방법
사내 스터디를 위한 CSS 기초 지식을 정리 해본다. 그저 당연하게 사용하는것들에 대해 다시 곱씹어보는 계기가 되는것 같다 👏
Webpack으로 이미지 번들링 하기
이미지를 번들링하는데 필요한 로더 패키지를 설치한다
Webpack으로 Fontawesome 번들링 하기
npm으로 인스톨할 수 있긴 하지만 폰트 경로 설정 등의 이슈로 실패해 웹페이지에서 다운로드 받아 설정하는 방식으로 진행한다.
Webpack으로 CSS와 Scss 파일 번들링 하기
일반적으로 html파일에서 CSS 파일은 <head> 섹션에 링크를 걸고, javascript는 <body> 섹션에 그 소스 링크를 걸어둔다. 그런데 webpack에서는 이 CSS와 javascript를 하나의 번들로 통합할 수 있다.
Webpack Loader Babel 설치 및 설정
webpack document - Loaders
Webpack 개요 및 설정
웹팩이란?
자주 쓰는 VScode 단축키 정리
Cmd + \: 창 분할하기 Cmd + B: 사이드바 토글 Cmd + J: 하단 패널 토글 Cmd + P: Quick Open Cmd + Shift + T: Re Open Cmd + Shift + K: 한줄 삭제 Cmd + Shift + F: 워크스페이스...
원격 브랜치 삭제하기
로컬에 있는 브랜치를 로컬과 원격에서 동시에 삭제하고자 하는 경우, 브랜치 삭제하기 를 먼저 수행한 후 아래의 명령어로 upstream에 반영한다.
CSS 선언 순서
CSS를 작업하다보면 하나의 클래스에 여러개 속성을 선언하는 경우가 자주 발생한다. 속성 작성에 규칙이 있다면 추후 코드를 들여다볼 때 조금 더 내용 파악이 쉽지 않을까? 하는 마음에 구글링을 해보니, 역시나 CSS 선언 순서와 관련된 내용이 방대하고도 자세하게 정리되어 있었다.
Bootstrap 테마 설정
테마와 구성 요소의 변경을 쉽게 하기 위한 글로벌 스타일 설정이 가능합니다. 새로운 빌트인 Sass 변수를 사용하여 Bootstrap 4를 정의하세요.
커밋 수정하기
최근 커밋 수정
iTerm2로 강력한 터미널 설정하기
터미널을 좀더 편리하고 강력하게 사용하기 위해 iterm2와 homebrew, zsh(Z Shell), oh-my-zsh을 설치하고 사용한다.
IE에서 initial 대응하기
IE 크로스브라우징시 레이아웃이 깨지는 현상의 많은 경우가 CSS의 initial 값을 사용했을 때 발생했다. initial은 부모요소가 주는 모든 상속값을 건너뛰어 CSS 초기값을 되돌리는데 사용할 수 있다.
브랜치 이름 변경하고 리모트 저장소에 반영하기
브랜치 이름을 변경하는 명령어는 아래와 같다.
크롬 자동완성의 배경색상 변경하기
크롬 브라우저 및 webkit 기반 브라우저에서 자동완성기능 사용시 input 요소에 특정 배경색상이 적용된다. 가상 선택자 :-webkit-autofill 을 이용해 다음 CSS로 색상 수정 가능하다. 다만 background-color 속성이 아닌 box-shadow 속성을...
폰트 아이콘의 원리와 Fontello 사용 방법
웹에 아이콘을 넣는 방식은 다양하다. 이미지(png, gif등)로 불러오기, SVG를 불러오기 그리고 웹폰트로 만들어 추가할 수도 있다. Fontello는 미리 제공하는 아이콘 중 원하는 아이콘을 선택해 경량화된 웹폰트로 만들수 있으며 특히 SVG 파일을 업로드해 원하는 아이콘을 ...
VScode로 Sass 컴파일하기
Sass를 컴파일하기 위해 프롬프트에 직접 명령을 입력하는 방법, 기타 확장 프로그램을 사용하는 방법이 있다. VSCode의 확장 프로그램을 이용하면 버튼 한번으로 Sass파일의 변경을 지켜볼 수 있으니 훨씬 편한 작업 환경을 구축할 수 있다. 내가 사용하는 VScode의 Live...
Git에서 Untracked 상태인 파일 삭제하기
작업 도중 실수로 수정내역을 Add했을 때 Add 상태를 되돌릴 수 있다.
버튼 숨기기 vs 비활성화
버튼 또는 컨트롤러의 비활성 상태 (Inactive State)는 두가지로 표현할 수 있다. 버튼을 숨기거나 비활성화 된 상태(disabled)로 표시하는것이다.
Git에서 Untracked 상태인 파일 삭제하기
프로젝트를 진행하다보면 워킹 디렉토리에 Git에서 관리하지 않을 파일들이 생성된다. 저장소에 넣고 버전 관리 할 필요가 없는 build된 CSS파일이나(내가 진행하는 프로젝트는 배포시에 최종 빌드된 CSS만 버전을 관리하기 때문에), 테스트용 이미지등이 생긴다. 이런 파일들은 gi...
Merge 충돌 발생시 취소하기
Merge 도중 충돌이 발생했으나, 예상했던 일도 아니고 지금 당장 처리할 일도 아니라면 아래의 명령어로 Merge 이전으로 되돌릴 수 있다
브랜치 삭제하기
임시 브랜치나, 이미 dev에 통합되어 더이상 필요없게 된 브랜치를 삭제하는 방법이다.
Progress Control
진행률 컨트롤 (Progress control)은 긴 작업을 진행중인 사용자에게 피드백을 제공한다. 진행률 표시가 표시될 때 사용자가 앱을 조작할 수 없다는 의미이며 사용되는 표시기에 따라 대기 시간을 예측할 수 있다는 의미이다.
Git에서 다른 브랜치의 특정 파일 체크아웃하기
git-checkout 명령은 워킹 트리의 파일이나 디렉토리를 전체 병합하지 않고 다른 브랜치의 특정 파일이나 디렉토리로 업데이트하는데 사용할 수 있다. 이 기능은 여러 브랜치를 사용중일 때 유용하게 사용될 수 있다.