JNarin Development Story

node-sass버전은 계속 올라가는데 오류가 발생하는 듯하다. 알아보니 버전을 다운 그레이를 해야 한다고 한다. 먼저 기존의 node-sass를 삭제한다. $ npm uninstall node-sass $ yarn remove node-sass 그런 다음 낮은 버전으로 node-sass를 설치를 한다. $ npm install node-sass@4.14.1 $ yarn add node-sass@4.14.1 npm과 yarn을 쓰시는 것에 따라 두 가지 명령어를 작성하였다. 생각보다 버전을 낮추라고 나오는 경우가 꽤 있는 듯하다. TMI node-sass는 노드에 의존성이 강하기 때문에 노드 버전에 따라 node-sass의 버전이 달라진다. 그래서 npm에서 node-sass공식문서에 보면 다음과 같은 ..

공부를 하다가 문득 커밋 메시지의 오타를 발견하였다. 이미 원격에 올린 상태였고, 이를 수정하는 방법에 대해 알아보았고 그에 대한 내용을 적으려고 한다. 커밋 메시지를 수정하는 방법은 크게 두 가지로 나뉠 수 있다. 하나는 로컬에만 있을 때와 이미 로컬에서 원격으로 올린 경우 두 가지로 나뉠 수 있다. 먼저 우리는 로컬에만 커밋이 있고 수정을 할 때의 방법을 알아보려 한다. 1. 로컬의 커밋 수정하기 1. 1) 가장 최근의 커밋을 수정하기 git commit --amend 위와 같이 amend를 이용하면 가장 마지막에 commit 한 내용을 수정할 수 있다. 1. 2) 중간의 커밋을 수정하기 git log 먼저 내가 수정할 커밋의 순번을 찾는다. git rebase -i HEAD~2 필자는 커밋의 두번째..

생각보다 깃허브에서 활용할 방법은 많았다. 무작위로 해결을 할 때마다 정리를 하게 되었지만, 어느정도 내용이 모여서 문서로 찾아보기 쉽게 글을 쓰게 되었다. 제목을 클릭하면 해당 내용을 새창에서 볼 수 있습니다. 1. Github 꾸미기 깃허브 자기소개페이지 만들기 우연히 다른 개발자를 찾아보니까 자기만의 소개 페이지가 있는 것을 발견하였다. 이제 개발자로 살아가기 위해서는 깃허브 또한 보기 좋게 관리를 해야 한다고 생각하기 때문에 이번에 한번 jnarin-development-story.tistory.com 2. 무료링크 만들기 1) Github에서 무료 링크 만들기 깃허브 웹호스팅으로 쉽게 링크를 만들자 이전에는 닷홈 호스팅을 사용할 때는 FTP를 이용하여 수정할 때마다 업로드를 해야 하는 번거로움이..

생각보다 내가 깃관련하여 내용들을 정리를 꽤 해두었다. 해당 내용을 좀 더 빠르고 쉽게 보기 위해서 이 글로 정리를 하려 한다. 제목을 클릭하면 해당 내용을 새창에서 볼 수 있습니다. 1. Git 초기 세팅 1) Git 이란? & Git 설치하기 협업을 하기 위해 Git을 설치해보았다. 사실 깃을 처음 접한 계기는 매우 단순하였다. 바로 개발 블로그를 만들고 싶었고, 오픈 저장소가 있다고 하여 GitHub를 알았고 그것을 사용하기 위해서는 Git을 설치해야 하길래 설치 방법 그대로 jnarin-development-story.tistory.com 2) Git config로 초기 세팅하기 Git 초기 세팅 깃을 설치하면 기본적인 설정이 필요하다. $ git config --global user.name "..

구글 문서를 쓰다 보면 일반적으로 한글과 다른 점으로 인해, 헷갈리는 경우가 생긴다. 그러한 것 때문에 자주 검색을 하게 되는데 이를 방지하고자 정리를 하게 되었다. 이 글을 상황에 따라 계속 업데이트가 될 예정이다. 1. 가운데 정렬 표를 정리하다보면 가운데 정렬을 많이 하게 되는데, 세로로 가운데 정렬은 아무리 눈 씻고 찾아봐도 보이지 않는다. 하지만 한글처럼 생각 말고 우클릭을 해보면 아래 이미지처럼 보인다. 표 속성을 클릭한다. 표 속성에서 셀 세로 정렬이라는 카테고리가 존재한다. 해당하는 부분에서 가운데로 변경을 한 후 확인을 눌러준다. 그럼 다음과 같이 세로 가운데 정렬이 된 것을 확인할 수 있다. 한글과 다른점은 역시 우클릭에서 표 속성을 통해야지만 세로 가운데 정렬이라는 게 좀 불편하지만,..

오늘은 한 번도 생각하지 않았던 부분에 대해 피드백을 받게 되어 사용하게 된 CSS를 정리하려고 한다. 원래는 낱말이 자동으로 줄 바꿈이 되면 기존의 낱말이 떨어지는 경우가 일반적이다. 그런데 이 부분도 보기에는 좋지 않고 줄 바꿈에 의해 영어의 경우 하이폰(-)을 넣곤 하는데 그런 비슷한 기능이라 할 수 있다. word-break 형식 정의 줄바꿈을 할 때 단어 기준으로 할지, 글자 기준으로 할지 정하는 속성입니다. 기본값: normal 상속 : 가능 애니메이션: 불가 버전: CSS Level 3 word-break: 값; word-break의 값은 다음과 같다. 1) normal 기본 줄 바꿈 규칙을 사용합니다. 한국어는 한 글자씩, 영어는 한 단어씩 줄 바꿈이 실행이 된다. 2) break-all ..

보통 그러데이션은 벡 그라운드에 주로 사용한다. 그래서 그 사용법은 CSS Gradient 사이트에서 쉽게 바꾸어 코드로 변환할 수 있다. 근데 우연히 Font Gradient를 바꾸어야 할 경우가 생겨서 알아보다가 찾게 되어 글을 쓰게 되었다. Font Gradient Access 폰트에 그라디언트 적용하는 방법은 다음과 같다. See the Pen CSS: Font Gradient by miok-jung (@miok-jung) on CodePen. 위 코드는 폰트에 gradient를 적용한 예시이다. .border-box{ background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { backgro..

이번 주는 프로그래스 바를 업그레이드한 방법으로 예제는 많이 나아 있는 것 같지만, 기록과 정리를 위해 글을 쓰게 되었다. 1. Scroll Indicator( 스크롤 표시기 ) CSS와 자바스크립트를 통해 이 페이지를 어디까지 보았는지 확인할 수 있는 일종의 게이지 바 같은 것이다. 사실 이 명칭을 어떻게 표현이 되는지 잘 모르겠다. 그래서 찾는데 생각보다 오래 걸려 하루 종일 회사 프로젝트에 이 한 가지 구현만 찾게 되었다. 하지만 실상은 너무 간단한 코드였다. document.addEventListener('scroll', () => { progress = document.querySelector('.progress-bar'); let winScroll = document.body.scrollTop..