이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 박스 모델을 구성하는 속성 HTML 문서에서 사용된 각각의 요소가 어떤 원리로 웹 브라우저에 배치되어 표시되는지 이해하려면 박스 모델을 알아야 한다. 박스 모델은 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념이다. 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지를 만드는 본질이다. 박스 모델은 아래와 같은 4가지 요소로 구성된다. 박스 모델은 크롬 웹브라우저 개발자도구(F12, ctrl+shift+i)에서 살펴볼 수 있다. margin 영역 margin은 박스 모델에서 가장 외부에 있는 영역으로, 요소의 외부 여백을 담당..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. CSS의 특징 기본 스타일 시트 hn 태그는 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시됐다. HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없다. 그렇지만 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문에 위와 같은 모양으로 표현될 수 있는 것이다. 기본 스타일 시트 기본 스타일 시트란 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서 양식을 말한다. 기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용된다. 적용 우선순위와 개별성 specificity 위와 같..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 기본 선택자 사용 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로, * 기호를 사용해 표시한다. 전체 선택자 전체 선택자는 모든 요소를 한 번에 선택할 수 있다. 태그 선택자 태그 선택자는 HTML 태그명으로 선택자를 지정하는 방법이다. 태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택한다. 안녕 하이 안녕 안녕 아이디 선택자 아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성 값을 이용해 선택자를 지정하는 방법이다. 이때 속성값 앞에는 # 기호를 붙여 구분한다. 안녕 id 속성값은 고유해야 한다...

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. CSS : Cascading Style Sheets 문법 형식 CSS 문법은 크게 선택자와 선언부로 구분한다. 선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역 선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, 중괄호 안에 작성 선언부에 작성하는 스타일은 반드시 속성과 값을 한 쌍으로 작성 값의 뒤에 세미콜론을 넣으면 여러 스타일을 연속해서 작성 가능 안녕 줄 바꿈과 들여 쓰기 CSS 코드를 작성할 때, 줄 바꿈과 들여 쓰기를 꼭 할 필요는 없다. 그러나 줄 바꿈과 들여쓰기를 적절하게 사용하면 코드의 가독성을 크게 향상할 수 있다. 스타일 시트 스..

본 게시글은 모두의 git,github(저자 : 강민철)의 내용을 개인적으로 정리하는 글입니다. 기본적인 명령어 기본 경로에 만들기 git init 원하는 경로에 만들기 cd 원하는 경로 (폴더가 이미 생성되어 있어야 함) git init 현재 경로 확인 pwd 작업 디렉터리 상태확인 git status 스테이지에 올리기 git add add 전과 후 변경 사항을 한꺼번에 추가하려면 git add . 커밋하기 git commit -m "커밋 메시지" git commit -message "커밋 메시지" 커밋 목록 출력 git log add와 commit 동시에 하기 git commit -am "커밋 메시지" git commit -a -m "커밋 메시지" git commit -all -message "커밋 ..

본 게시글은 모두의 git,github(저자 : 강민철)의 내용을 개인적으로 정리하는 글입니다. 깃허브는 아래의 두 가지 쓰임새가 있다. 개발자의 SNS 개발자 간 협업을 가능케 하는 원격 저장소 호스팅 서비스 Git은 우리의 컴퓨터 속에만 존재하는 저장소이다. 이는 로컬에 있는 저장소, 즉 로컬 저장소라고 부른다. 반면 원격 저장소는 우리들의 컴퓨터 속에만 있는 저장소가 아닌, 인터넷 세상 어딘가에 있는 다른 컴퓨터 속의 저장소를 의미한다. 깃허브의 원격 저장소는 깃허브가 관리하는 컴퓨터 속의 저장소를 의미한다. 원격 저장소를 통해 백업과 협업에 이점이 있다. 원격 저장소와의 네 가지 상호작용 원격 저장소와의 상호 작용은 크게 네 가지이다. clone : 원격 저장소 복제 push : 원격 저장소 밀어..

본 게시글은 모두의 git,github(저자 : 강민철)의 내용을 개인적으로 정리하는 글입니다. 브랜치란? 브랜치는 마치 줄기에서 뻗어 나오는 나뭇가지와 같이 버전을 여러 흐름으로 나누어 관리하는 방법이다. 브랜치는 버전의 분기이다. 작업을 분기하고 싶을 때 브랜치를 나누면 된다. 버전을 나누어 관리하는 것은 아래의 3단계로 버전을 관리하는 것을 의미한다. 브랜치를 나눈다. 각자 브랜치에서 작업한다. (필요할 경우) 나눈 브랜치를 합친다. 브랜치 나누고, 합치기 깃이 제공하는 가장 기본적인, 최초의 브랜치를 master 브랜치라고 한다. 가령 로컬 저장소를 만들고, 커밋 세 개를 만들었다고 가정하자 이 커밋 모두는 master 브랜치에 속한다. master 브랜치에 만들어진 세 커밋을 master 1번 ..

본 게시글은 모두의 git,github(저자 : 강민철)의 내용을 개인적으로 정리하는 글입니다. 버전 비교 직전 버전과 비교 아래의 그림과 같이 텍스트 파일에 변화가 일어났다고 하자 첫 번째 커밋을 클릭하면 초록색 +A가 뜨는데, 이는 A가 추가된 것을 뜻한다. 세 번째 커밋을 클릭하면 붉은색 -A가 뜨는데, 이는 A가 삭제된 것을 뜻한다. 버전별 비교 아래의 그림과 같이 텍스트 파일에 변화가 일어났다고 하자 두 번째 버전을 기준으로 생각했을 때 네 번째 버전은 아래처럼 A가 삭제되고, C가 추가됐다. 소스트리에서 두 번째 버전을 클릭하고 ctrl을 누른 상태에서 네 번째 버전을 클릭하면 변화된 내용을 확인할 수 있다. 비교할 파일을 선택하면 우측 하단에 두 번째 보전에 비해 네 번째 버전은 무엇이 달라..