각 요소와 CSS 모두 박스에 둘러 쌓여 있으며 이는상호작용한다.

콘텐츠(Contents)

‘패딩(padding)’이라는 박스 테두리 사이의 공간으로 감싸져 있으며 이 또한 크기 설정이 가능하다.

여백(margrin)

여백은 콘텐츠를 표시하는 방식이기 때문에 실제 요소와는 관련이 없다. 다른 요소와 관련된 공간의 여백을 부여한다.

경계(Border)

‘border’의 속성은 세 가지 주요 정의가 있으며

첫 번째로는 테두리의 넓이가 있다.

얇은 테두리를 지정하고 싶다면

{
border: 1px;
}

로 가능하다.

두 번째로는 테두리 유형이며 이는 ‘dashed’라는 점선 테두리와‘solid’라는 실선 테두리가 있다.

세 번째로는 테두리의 색상을 지정할 수 있으며 색상값을 입력한다.

 이를 HTML과 CSS 내부에서 표현하면

• HTML

<p>The Box Model</p>

• CSS

p{
	padding: 2px 4px 2px 4px;
	border: 2px dashed black;
	margin: 8px 6px;
}

와 같이 표현이 가능하며, 이에 대해 설명하자면

‘padding’의 숫자 4개는 각각 상부, 우측, 하부, 좌측에 대한 설정값이며

‘border’는 각각 경계의 크기, 테두리 유형, 색깔에 대한 설정값이고

‘margin’은 각각 요소의 상부와 하부, 좌측과 우측의 여백값을 의미한다.

CSS 그리드(CSS Grid)

CSS 그리드는 CSS에서 2차원적인 열과 행을 통제하는 레이아웃을 만들 때 사용하며 이는 플렉스박스의 핵심이론을 따른다.

display: grid

‘display: grid;’ 입력 시, 개발도구에서 ‘grid’ 옵션이 활성화 된 것을 볼 수 있으며 행과 열을 세는 숫자들이 레이아웃으로 나타난다.

예를 들어,

main ul {
display: grid;
}

와 같이 나타낼 수 있다.

gird-template-columns

‘gird-template-columns’ 입력 시, 그리드 안에 있는 구체적인 열의 수를 사전 정의할 수 있게 한다.

(’gird-tamplaate-columns: 400px 400px;’ 입력 시, 두 개의 열이 400px로 나타난다.)

그러나, 보편적으로 CSS 그리드를 이용할 때에는 ‘픽셀(px)’이 아닌 ‘프랙션(fractions)’을 이용하며 이는 특정 열에 적용해줄 그리드 내에 사용 가능한 영역의 공간을 정한다.

예를 들어, 

main ul {
  display: grid;
	gird-tembpate-columns: 2fr 1fr;
	}
	  

와 같이 나타낼 수 있으며, 이는 전체 넓이가 3fr이고 3fr의 넓이 중 첫번 째 열이 2fr, 두번째 열이 1fr의 공간을 차지한다는 것을 나타낸다.

gap

맨 앞 행과 맨 앞 열의 틈을 정하는 명령어이며

예를 들면

main ul {
  display: grid;
	gird-tembpate-columns: 2fr 1fr;
	gap: 100px 200px;
	}
	  

와 같이 나타날 수 있으며, 100px만큼의 행이 벌어지고 200px만큼의 열이 벌어지게 된다.

li:nth-of-type

그리드 컨테이너 안에 해당하는 번호를 지정하는 명령어이며

예를 들면,

li:nth-of-type(3) {
	}

와 같이 나타난다.

(’li:nth-of-type(3))’ 입력 시, 3번째에 해당하는 목록이 지정된다.)

grid-column

요소가 차지하는 열의 수를 지정하는 명령어이다.

예를 들면,

li:nth-of-type(3) {
	grid-column: 1 / span 2;
	}

와 같이 나타나고 해당 목록이 차지하는 열에서부터 2개의 요소에 해당하는 공간을 차지한다.

PWD(Print Working Directoy)

터미널에서 입력시 컴퓨터에게 현재 위치를 표시하도록 지시한다.

LS(List Items)

모든 폴더와 폴더 내의 모든 파일을 나열하여 위치를 확인한다.

CD(Change Directory)

디렉토리의 위치를 변경하는데 사용된다.

(cd .. 입력 시, 한 수준 위의 폴더로 이동한다.)

Clear

clear 입력 시 이전의 명령문들이 사라지며, 이는 위로 스크롤시 다시 나타나게 된다.

mkdir

현재 위치에 새로운 디렉토리를 생성하는 명령어이다.

(mkdir 폴더이름 입력 시, 폴더의 이름이 정해지며 생성된다.)

touch

현재 위치에 새로운 파일을 생성하는 명령어이다.

(touch 파일명.확장자명 입력 시, 파일의 이름과 확장자가 생성된다.)

rmdir

현재 위치에 존재하는 폴더를 삭제하는 명령어이다.

(rmdir 폴더이름 입력 시, 폴더가 삭제되며 이 폴더가 빈 폴더일 때 명령어가 작동한다.)

rm

현재 위치에 존재하는 파일을 삭제하는 명령어이다.

(rm 파일명. 확장자명 입력 시, 파일이 삭제된다.)

명령줄 인터페이스(CLI)와 그래픽 사용자 인터페이스(GUI)와 같은 방법들로 인에 사람이 컴퓨터를 통해 다양한 프로그램을 열 수 있게 만들어준다.

명령줄 인터페이스(Command Line Interface)

만약 사용자가 컴퓨터 사용에 익숙하지 않다면 컴퓨터와 상호작용 하는 데 있어 더욱 편리하다.

그래픽 사용자 인터페이스(Grahpical User Interface)

터미널 혹은 명령 프롬프트라고 불리며 명령을 기반 컴퓨터 상호작용한다. 마우스를 유지하지 않고 컴퓨터와 상호작용 할 수 있다는 이점이 있다.

init

레포지토리를 초기화하는 명령어이다.

status

파일의 상태를 확인하는 명령어이다.

add

변경사항을 스테이징 영역에 추가하는 명령어이다.

(’git add .’를 입력하면 모든 변경사항이 스테이징 영역에 추가된다.)

commit

변경사항을 저장소에 기록하는 명령어이다.

(’git commit -m “text”’를 입력하면 저장소에 기록하며 ‘””’ 안에 있는 메세지가 함께 기록된다.)

log

변경사항 기록을 확인하는 명령어이다.

git branch

현재 브랜치 목록을 확인하는 명령어이다.

(’git branch -m 이름’을 입력하면 현재 위치하는 브렌치의 이름을 바꾼다.)

git checkout -b

현재 위치하는 브랜치에서 나오며 새로운 브랜치를 생성하고, 그 이름을 지정하는 명령어이다.

('git checkout -b 이름'을 입력하면 현재 위치하는 브랜치에서 나오며 새로운 브랜치를 생성하고, 그 이름을 지정하는 명령어이다.)

git checkout -- .

브랜치를 마지막 커밋 단계로 리셋하는 명령어이다.

(’git checkout -- 이름’을 입력하면 해당 이름의 파일이 리셋된다.)

git merge

두 개의 브랜치를 하나로 합치는 명령어이며, 주로 개발이 끝난 기능을 메인 브랜치에 통합할 때 사용한다.

('git merge feature-branch'를 실행하면 현재 브랜치에 'feature-branch'의 변경 사항이 병합된다.)

cd

경로를 이동하는 명령어이다.

(’cd 이름’을 입력하면 해당 이름의 경로로 이동한다.)

git rm

저장소에서 파일을 삭제하는 명령어이다.

(’git rm 파일명’을 입력하면 해당 파일이 저장소와 디렉토리에서 모두 제거하며 변경사항을 자동으로 스테이징 영역에 추가한다.)

git reset

헤드를 이전 상태로 되돌려주는 명령어이다.

(’git reset —hard HEAD~1’를 입력하면 HEAD에 있는 기록을 1단계 이전으로 되돌려준다.)

git branch -D

브랜치를 삭제하는 명령어이다.

(’git branch - D 이름’을 입력하면 해당 이름의 브랜치가 삭제된다.)

git remote, git remote add

원격 저장소에 연결을 추가하는 명령어이이며 뒤에 원격 저장소의 링크를 입력해야 한다.

git push

코드를 로컬 저장소에서 원격 저장소로 원격 저장소로 가져온다.

(’git push 저장소명 브랜치명’을 입력하면 브랜치에 있는 코드 변경 이력을 저장소에 옮긴다.)