프론트엔드 첫걸음

git restore --staged [파일명] git add . 로 수정한 파일 모두를 스테이지에 올렸다. 그런데 스테이지에 올린 파일 중에 내가 스테이지에서 올리고 싶지 않은 파일이 포함되어있는 것을 확인했다. 이 때 git restore --staged [파일명] 사용하면 된다. 명령어 수행 후 git status 로 확인하면 해당 파일은 untracked files에 포함되어있는 것을 확인할 수 있다. * git status 했을 때 스테이지에 올라간 파일은 git restore --statged 명령어 통해 스테이지에서 내릴 수 있다고 쓰여있다.

git restore --source HEAD~1 [파일명] 1단계 전 커밋으로 돌린다. 현재 파일의 커밋되지 않은 변화는 사라진다. 이 때 HEAD는 여전히 가장 최근 커밋에 있고, 다시 가장 최근의 소스로 돌리고 싶으면 git restore [파일명] 하면된다. ex) a.txt 와 b.txt를 3개의 커밋 전으로 돌리고 싶다. git restore --source HEAD~3 a.txt b.txt

git checkout HEAD [파일명] 마지막 커밋 이후 a.txt 파일과 b.txt 파일을 수정했다. 그런데 a.txt 파일의 코드가 엉망이라 그냥 마지막 커밋지점으로 되돌리고 싶다. 이때 git checkout HEAD a.txt 를 사용하면 a.txt만 마지막 커밋의 코드로 되돌릴 수 있다. 또는 git checkout -- a.txt 를 사용할 수 있다. (HEAD대신 -- 사용) git restore [파일명] git checkout이 여러 기능을 하는 상태에서 git switch와 git restore가 도입되어 git checkout의 기능을 일부 대신하게 되었다. git checkout HEAD a.txt 대신 git restore a.txt 사용할 수 있다. 파일을 수정하고 git s..

git checkout HEAD~1 헤드에서 1개 이전커밋을 참조(확인)한다 git checkout HEAD~2 헤드에서 2개 이전커밋을 참조한다 git checkout HEAD~1 두번한 것과 같은 결과. git switch - 분리된 HEAD를 떠나 다시 가장 최근에 있던 브랜치로 돌아가고 싶을 때 사용한다. (내가 있던 브랜치 기억 안날때 사용한다. 기억이 나면 git switch [브랜치명] 사용하면 된다.)

Position 기능 top, left, bottom, right로 요소의 위치를 변경할 수 있다. 하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. position은 좌표속성을 적용할 기준점을 지정해주는 역할을 한다. 또한 position 속성을 부여하면 요소가 공중에 뜬다. Position 종류 position : static; 좌표적용 불가. top, left, bottom, right, z-index 속성이 아무런 영향도 주지 않는다. position : relative; 기준 : 자기자신의 원래위치 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. position : absolute; 부모 중에 position : relative..

body태그에 기본 마진이 있으므로 body 태그에 마진을 0으로 만들어서 의도하지 않은 공백을 없앤다. 이처럼 기본적으로 주면 좋은 효과들이 있다. 김버그님은 항상 이렇게 시작한다. * { box-sizing: border-box; margin: 0; } 테이블 칸 끼리의 간격 없애는 효과도 항상 필요할 것 같다. table { border-collapse : collapse; } 검색해보니 읽을만한 글이 많았는데, 아직 이해하려면 멀은 것 같다. https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0 2022 CSS Reset 다시 써보기! ..2022년 지금은 CSS Reset을 어떻게 만들어야 할까? 하..

- 박스의 테두리가 겹치면 margin-collapse 현상이 발생하여 하위 박스에 margin효과가 들어가지 않는다. 상위의 박스에 padding: 1px; 주면 박스 테두리 겹침이 해소되어 하위 박스에 margin 효과가 들어간다. * 상위박스에 border를 줄수도 있다.

background-image : url(이미지 주소); 해당 이미지를 배경이미지로 한다. background-size cover - 그림이 잘려도 됨. 배경을 div 박스에 가득 채우기 contain - 여백이 생겨도 좋으니까 그림 잘리지 않도록함. background-position 그림이 채워질 때 어디서부터 채워지느냐 background-attachment 스크롤 시 배경 위치 filter 박스에 보정효과. (그림 안의 글씨에도 효과 적용됨)

block 과 inline-block의 차이 display : block 한 행을 전부 차지 display : inline-block 내 크기만큼 차지 inline-block의 문제점 문제점 1 태그 사이에 띄어쓰기가 있으면 요소가 한줄을 통째로 차지해버린다! - inline-block은 내 크기만큼 차지하므로 내 크기만큼 차지한 left와 content사이에 html 상의 띄어쓰기가 한칸이라도 있으면 (left 20% + content 80% + 띄어쓰기 ? => 100% 초과 ! => left와 content가 한 줄 안에 해결방법 1. 주석을 넣는다. 2. container의 font-size를 0px로 조정한다. 문제점 2 inline-block 박스 안에 글을 쓰면 박스가 찌그러져 버린다 (우씨..

float 사용하여 기본 레이아웃 만들기 See the Pen float 사용해서 기본 레이아웃 만들기 by JEONG (@cona) on CodePen. float 요소를 공중에 띄운다고 생각 (left와 content 모두 float:right 이면 left태그가 더 오른쪽에 보여진다) clear : both https://developer.mozilla.org/ko/docs/Web/CSS/clear clear - CSS: Cascading Style Sheets | MDN clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다. develo..