HTML, CSS, GIT - 헷갈리는 개념 정리

blue·2022년 10월 3일

1. HTML

1.1. div와 p

div는 디자인만을 위한 태그이므로 아무 의미 없이 div 안에 넣는 것은 지양하는 것이 좋다.
p는 문단 작성을 위한 태그이다.
따라서 html을 작성할 때는 의미 목적으로 태그를 사용한 뒤, 디자인하는 것이 좋다.

1.2. a와 button

a와 button 모두 클릭시 링크로 이동이 가능하다.
하지만 a는 마우스를 갖다댔을 때 하단에 링크가 뜨고, button은 뜨지 않는다는 차이가 있다.
a는 보통 다른 링크로 넘어가기 위한 태그로 사용된다.
button은 onclick을 위한 태그이며 팝업을 띄우거나 요청을 처리하는 이벤트 로직을 관리하는 역할이다.

1.3. ol과 ul

ol과 ul은 모두 목록 태그이다.
ol은 ordered list로 순서가 존재하는 태그이지만, ul은 unordered list로 순서가 존재하지 않는 태그이다.
각각 ul과 ol을 이용하였을 때 다음과 같이 작성된다.

2. CSS

2.1. margin과 padding

margin은 border을 기준으로 바깥쪽 부분이고, padding은 border을 기준으로 안쪽 부분을 의미한다.

2.2. display와 position

display는 inline, block, inline-block 3가지 종류가 있고, position은 static, relative, absolute, fixed, sticky 5가지 종류가 있다.

1) display
inline 속성은 해당 내용이 차지하는 영역까지만 채워진다. (ex. span ...)
block은 무조건 한 줄을 다 채운다. (ex. div, p ...)
inline-block은 inline과 비슷하지만 style로 width를 조절할 수 있다.

2) position
relative는 원래 위치를 기준으로 위치를 결정한다.
absolute는 기본적으로 최상단을 기준으로 하지만, 부모 요소에 relative가 있으면 해당 부모를 기준으로 위치를 결정한다.
fixed는 absolute와 비슷하지만, 스크롤 하면 딸려올라가지 않는다.
sticky는 fixed와 비슷하지만, 스크롤을 했을 때 주어진 위치에 닿았을 때부터 fixed와 같이 고정된다.

2.3. transition과 transform

transition은 요소의 두 가지 상태 사이에 변화를 준다. (ex. hover, active)
transform은 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여한다.

2.4. justify-content와 align-items (flex)

justify-content와 align-items는 진행 방향을 기준으로 결정된다.
justify-content는 진행 방향을 기준으로 정렬하는 역할을 한다.
align-items는 진행 방향의 수직을 기준으로 정렬하는 역할을 한다.

3. GIT

3.1. git과 github

git은 코드를 관리해주는 툴로, 코드 히스토리를 기록한다.
github는 git 원격저장소로, 원격을 도와주는 사이트이다.

3.2. git revert와 git reset

git revert와 git reset의 목적은 이전 커밋으로 돌아가고자 하는 것으로 동일하다.
그러나 둘의 방식이 다르다.
git revert는 이전 커밋으로 돌아가는 것 자체를 기록하여 하나의 커밋을 추가하는 명령어이다.
git reset은 커밋 자체를 삭제하여 이전 커밋으로 돌아가는 명령어이다.
이 때 git reset의 옵션은 mixed, soft, hard가 존재한다.
mixed는 보이는 코드는 똑같지만 add가 되어있다.
soft는 커밋 로그는 지워지지만 add가 안 되어있는 상태로 현재 코드가 보인다.
hard는 커밋 로그도 지워지고 현재 보이는 코드도 과거의 코드로 돌아간다.