Welcome to Visit!!
Let's get it
웹 개발자로의 새로운 여정을 시작해 보겠습니다.
여러분들의 방문을
진심으로 환영합니다
웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃
참고하는 웹사이트 목록 💻
필자가 자주 참고하는 웹사이트를 둘러보세요.
CSS 스타일링 🎨
웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.
목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..
목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다. 예제 파일 작성하기 1. Index.html 수정 index.html의 body 부분 안에 밑의 코드를 작성한다. HTML 2. Style.css 작성. 우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } 이후 .box1 부분에 다음과 같이 CSS를 작성한다. CSS .box1 { width: 200px; height: 200px; border: 5px solid..
목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 1. 한줄만 나타내기 결과) Lorem, i..
목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..
Guest Book
블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~
Tag Page
원하시는 태그를 클릭해보세요.
Light Dev
Light Dev에서 공부한 내용을 정리합니다.
[Git] 💽 자주 쓰는 Git 명령어 💯 총 정리 본문
목차
시작하며
자주 쓰는 git 명령어
를 git commands cheat sheet
를 참고하여 정리해보자. 자세한 내용은 git-scm 공식 사이트가 더 정리가 잘 되어있다.
git
으로 새로운 프로젝트를 시작하려고 하면 프로젝트 생성하기로 이동하면 된다. 또는 필요한 명령어나 자주 쓰는 명령어만 찾아서 프로젝트에 사용하면 된다.
자주 쓰는 Git Command
# 현재 directory 의 모든 파일을 Staging Area 로 이동
git add .
# file 들의 tracking 상태 보기
git status
# Staging 의 파일들 commit 하기
git commit -m "messsage"
# 저장소에 commit 반영하기
git push
# 저장소에서 commit 가지고 오기
git pull
# remote origin의 development branch merge
git merge origin/development
# 한 줄로 그래프 형태로 commit 히스토리 보기
git log --oneline --graph
# remote에서 삭제된 brach를 local 에서도 깔끔하게 삭제
git fetch origin --prune
Setup 초기 설정
사용자 이름, Email 설정
시작 전에 사용자 이름과 Email
을 설정한다.
git config --global user.name “[firstname lastname]”
git config --global user.email “[valid-email]”
출력 색상 변경
출력되는 command line
를 읽기 쉽도록 자동으로 색상을 설정한다.
git config --global color.ui auto
사용자 설정 정보 확인
전체 설정 정보 확인을 위해 아래 명령어를 실행하거나 혹은 .gitconfig
파일을 확인한다.
git config --list
사용자 정보는 아래와 같이 확인한다.
git config --global user.email
git config --global user.name
Git 프로젝트 생성하기, 가져오기
아래 두 가지 방법 중 한가지로 Git 저장소
를 시작할 수 있다.
- 아직 버전관리를 하지 않는 로컬 디렉토리 하나를 선택해서
Git 저장소
를 적용하는 방법 - 다른 어딘가에서
Git 저장소
를Clone
하는 방법
git init: 기존 디렉토리를 Git 저장소로 만들기
프로젝트 directory
로 가서 git init
을 실행하면 새로운 Git 저장소
가 만들어진다.
# 프로젝트 directory로 이동
cd [my_project path]
# README 파일 생성
echo "# my_project" >> README.md
# git 저장소로 등록
git init
# 관리할 file을 Staging Area 추가
git add README.md
# Staging Area 에 추가된 파일 commit
git commit -m "first commit"
# 최초 등록된 master branch 대신 main branch 사용하도록 변경
git branch -M main
# 원격 remote repository에 추가
git remote add origin [git URL]
# git push
git push -u origin main
git clone: git repository 가져오기
기존에 사용 중인 저장소를 clone
해서 가져올 수 있다.
git clone [url]
Snapshot 스냅샷 다루기
Git
스냅샷 즉 특정 상태의 버저닝을 생성한다. Staging Area
에 파일을 추가하고 commit, push
정도만 알면 된다.
git add
working directory
에서 파일/폴더를 Staging Area(“index”)
에 등록하여 git
으로 관리를 시작한다.
git add [file]
git status
Git
의 현재 상태 확인한다. Staging Area, UnStage Area
에 있는 파일 및 Untracked
상태의 파일을 확인 할 수 있다.
git status
git diff
git diff
명령은 두 트리 개체의 차이를 보고 싶을 때 사용한다.
# stage 되지 않은 변경 비교
git diff
# stage 되어 있으나 아직 commit 되지 않은 변경 비교
git diff --staged
git commit
git commit
명령은 Staging Area
의 모든 파일을 커밋한다. 저장소에는 하나의 스냅샷으로 기록된다. 그 뒤 현재 Branch
가 새 커밋을 가리키게 한다.
git commit -m “[커밋 상세 메시지]”
--amend
옵션으로 최근 커밋을 재작성할 수 있다.
git commit --amend
아래와 같이 commit
에 깜박한 파일이 있으면 아래와 같이 수정 가능하다. 이렇게 --amend
옵션으로 커밋을 수정하는 작업은 이전의 커밋을 완전히 새로 고쳐서 새 커밋으로 변경하는 것을 의미한다. 이전 커밋은 일어나지 않은 일이 되는 것이고 당연히 히스토리에도 남지 않는다.
git commit -m 'initial commit'
git add forgotten_file
git commit --amend
git reset
git reset
명령은 되돌리는(Undo) 명령이다. git reset
명령은 기록이 없어질 수 있어서, 위험하므로 주의하여 사용해야 한다.
# Staged 상태의 파일을 Unstage 로 변경
git reset
# staging area가 초기화되고 working tree를 특정 커밋시점으로 덮어쓰기
git reset --hard [commit]
# 이전 Head 시점으로 초기화. working directory, 최근 commit 이력이 삭제된다.
git reset --hard HEAD^
git rm
Staging Area
나 Working directory
에 있는 파일을 삭제한다.
git rm [file]
git mv
파일/폴더의 이름을 변경한다.
git mv [existing-path] [new-path]
mv 명령어
는 사실 아래와 같이 동작한다. 즉, 이름이 변경된 파일을 삭제하고 다시 add
하는 것과 똑같다.
mv README.md README
git rm README.md
git add README
git clean
working directory
에서 필요 없는 파일을 삭제한다. 충돌로 생긴 파일이나 build artifact
파일을 삭제할 때 편리하다.
git clean
Branch와 Merge
git branch
branch
를 관리하는 명령어이다.
# branch 목록 조회, *가 현재 branch
git branch
# 원격 branch 목록 조회
git branch -r
# 전체 branch 목록 조회
git branch -a
신규 branch
를 생성한다.
# branch 생성
git branch [branch-name]
Branch
를 변경하고 해당 파일을 Working directory
로 복사한다.
# branch checkout
git checkout
git merge
다른 Branch
를 현재 Checkout
된 Branch에 Merge
한다. Merge
하고 나서 현재 Branch가 Merge
된 결과를 가리키도록 옮긴다.
# 특정 branch를 현재 checkout 된 branch에 merge
git merge [branch]
# remote origin의 main branch merge
git merge origin/main
# local 저장소의 main branch merge
git merge main
log
git log
commit 히스토리
를 시간의 역순으로 보여준다.
# 커밋 히스토리를 시간 순으로 조회
git log
# 최근 number개만 노출
git log -[number]
# oneline 으로 히스토리 노출
git log --oneline
# graph 로 출력
git log --graph
공유 & 업데이트
git fetch
로컬 저장소에 있는 것을 뺀 remote 저장소
의 모든 것을 가져온다.
git fetch [remote]
--prune
옵션으로 remote 저장소
에 지워진 브랜치를 local
반영하여 local
의 불필요한 branch
를 삭제한다.
git fetch --prune
git pull
remote의 commit
을 가져오고 병합한다. git fetch
와 git merge
명령을 순서대로 실행하는 것과 같다.
git pull
git push
로컬 저장소의 commit
내역을 remote 저장소
로 전송한다. -u
옵션은 upstream repository
를 설정해준다. 즉, 한번 설정한 후로는 git push, git pull
만 간단히 사용할 수 있다.
git push [remote] [branch]
git push -u origin main
git remote
원격 저장소 설정 관리 도구를 의미한다.
# 현재 프로젝트에 등록된 리모트 저장소를 확인
git remote
# 단축이름과 URL을 함께 조회
git remote -v
# git url 에 remote(저장소) 이름으로 등록한다.
git remote add [remote] [url]
git remote add origin https://github.com/cusbert/TIL.git
임시 저장
git stash
git stash
은 현재 작업을 임시 저장할 때 사용한다.
예를 들어 A라는 작업을 진행하다가 잠깐 다른 B 작업을 우선 할 일이 생겼을 때
A를 커밋하지 않고 Stash
했다가 B를 끝낸 후 다시 A라는 작업을 진행 할 수 있다. 즉, Branch
에 관계없이 아직 끝나지 않은 수정사항을 스택에 잠시 임시로 저장했다가 나중에 다시 적용하는 방식이다.
# modified, staged 변경 내용 임시 저장
git stash
# stashed 조회
git stash list
# stash 내역 working directory로 추가
git stash pop
# stash file 제거
git stash drop
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.
사이트를 방문해 주셔서 감사합니다
만일 도움이 되셨으면 공감과 구독 버튼 클릭 부탁드립니다.
추가적인 질문사항이나 이해가 안되는 점이 있으면 댓글로 적어주세요.
© Copyright 2023 Light