10/27/2022/Thu
화요일 간단한 오티를 하고, 첫 진도를 나간 목요일!
먼저 수업 초반에 말씀해주신 것 중에 중요한 것을 정리하자면 3가지다.
- velog/티스토리/노션 등 무조건 기록을 생활화하기 - 포트폴리오
- git 잔디 열심히 심기!
- 면접은 최대한 많이 경험해보기
그리고 VS Code와 VS Code 확장 프로그램을 설치했다.
VS Code: 개발할 때 편하게 쓰기 위한 도구, 에디터
- Auto Commit Message
- Gitlens
- Wakatime: 개발하는 시간 측정
Git
파일의 변경사항을 추적 - 예전 시점이나 최근 시점으로 다시 돌아갈 수 있다.
숨김 폴더를 해제하면 .git 폴더를 찾을 수 있다. 이 폴더에 모든 변경사항이 저장되며, .git 폴더가 있는 곳에 master 브랜치가 생성된다.
Git Bash
cd Desktop(바탕 화면)
mkdir github
cd github
git init
git config --global init.defaultBranch main
바탕화면으로 이동하여, github라는 새로운 폴더를 만들었다.
그리고 github 폴더로 이동한 다음, 이 폴더를 깃허브 저장소로 쓸 것이기 때문에 git init을 실행해주었다.
기본 저장소 이름은 main으로 설정했다.
git config --global user.name "프로필 이름"
git config --global user.email "이메일 주소"
git config --local --list 사용할 각자의 프로필 이름과 이메일 주소를 입력해주면 되고, 마지막에 git config의 리스트를 확인함으로써 제대로 입력되었는지 체크한다.
Git 사용 방법
git add
내가 작업한 공간에서 Staging 영역으로 보낸다.
git add .
git commit
Staging 영역에서 Local Repository(.git 폴더)로 보낸다. 여기서 feat은 규칙이니 꼭 써준다!
git commit -m "feat: 커밋 메시지"
git push
Local Repository에서 Remote Repository, 즉 깃헙 웹사이트로 파일을 보내준다.
git push
git pull
Remote Repository에 있는 걸 내 작업 공간으로 가져온다.
항상 공부를 한 다음에는 혹시 모르니 git pull 명령어를 먼저 실행할 것!
git pull
- HTML: 명사
- CSS: 형용사
- Javascript: 동사
HTML
Hypertext Markup Language
웹페이지를 구성하는 가장 기초적인 언어로, 웹 페이지에서 다른 페이지로 이동하도록 하고 문서나 데이터의 구조를 명기한다.
HTML 구성요소
-
태그: <태그 이름></태그 이름>
그러나 무조건 태그를 닫아야 하는건 아니다.<html> <head> </head> <body> </body> </html><head></head>: 출력되지 않으면서 메타데이터를 담고 있는 부분
<body></body>: 출력되는, 눈에 보이는 내용을 담고 있는 부분
-
요소 element
1. 빈 요소 Empty Element
내용 없이 구조적인 기능만 하는 요소, 닫히지 않아도 작동한다.
예시:<br>: 엔터 역할, <hr>: 가로 구분선
2. 블록 요소 Block Element
기본적으로 부모 요소의 전체 너비(100%) 차지. 태그가 시작되면 무조건 줄바꿈이 일어난다. 모든 인라인 요소를 포함하거나 다른 블록 요소를 포함한다.
예시:<h1></h1>, <div></div>, <p></p><div></div>: 가로폭 전부 차지 - 컨텐츠의 영역이나 그룹화할 때
<span></span>: 태그 안의 내용 부분만 차지 - 텍스트 구별할 때
-> div 안에 span이 들어갈 수는 있지만 그 반대는 불가능하다.3. 속성 Attribute
태그를 보조하는 명령어로, 태그 안쪽에서 작동.
태그마다 사용한 속성이 정해져 있다. id, class, style은 모든 요소가 사용할 수 있는속성이다.
예시: id, class, style, width, height 등등HTML 기본 태그
<h1></h1>: 구획 제목 요소 h1~h6까지 있는데 6으로 갈수록 작아진다.<p></p>: 하나의 문단<br>: 텍스트 안에 줄바꿈, 엔터 기능<img>: 이미지 삽입 width, height, title 속성을 가질 수 있다. alt 속성은 이미지 파일이 보이지 않을 때 보이는 제목을 설정한다.<a></a>: 하이퍼링크 기능
<a href="https://google.com" target="_self">google</a>:디폴트, 기본 창에서 바뀐다.
<a href="https://google.com" target="_blank">google</a>: 새로운 창이 생긴다.<div></div>: 순수 컨테이너, 컨텐츠 분할 요소, CSS로 꾸미기 전에는 컨텐츠나 레이아웃에 영향을 주지 않는다.
<span></span>: 구문 컨텐츠를 위한 컨테이너. 어떤 특성을 공유하는 요소를 묶을 떄 사용한다.
div와 매우 유사하지만 div는 블록 요소이지만 span은 인라인 요소<ul></ul>: 순서가 없는 목록
<ol></ol>: 순서가 있는 목록
<li></li>: 목록의 항목. 반드시<ul>, <ol>혹은<menu>안에 위치해야 한다.
실습. html을 이용해서 카페 음료 메뉴판 만들기
상대경로: 내가 사용하고 있는 파일로부터의 상대적인 위치
-> 폴더 구조를 변경하면 적용되지 않는다. 그러므로 위험성이 있다.
절대경로: 파일 탐색기로 찾았을 때, 경로를 복사했을 때 나오는 위치
처음 시작점부터 전부 기입하는 방식. - vs 코드 확장프로그램 live server로는 적용X
Git Repository 가져오기
git init
git add RADME.md
git commit -m "commit message"
git branch -M main
git remote add origin github주소
git push -u origin main 