오늘 한 일
✔️ 웹 프로그래밍 A-Z 기초 (원격) - 1주차 7강까지
✔️ Git 실시간 강의 (2:00 ~ 6:00pm)
✔️ 원격강의 복습
✔️ git 수업 복습 -> 소스트리 이용한 commit과 원격 repo생성
HTML과 CSS
- HTML,CSS는 외우는 것이 아니라 필요할 때마다 찾아다 가져다 쓰는 것!! 무작정 외우려고 하지 말자!
뭔가를 꾸민다는 것은 일단 가리켜야 가능하다.
먼저 대상을 지목하고 그 대상을 꾸며준다고 생각하면 된다. 이 때 지칭하기 위해 사용한는 게 class 인데
class를 붙여주는 건 명찰을 달아준다고 생각하면 된다.
<h1 class="mytitle">로그인 페이지</h1>
로그인 페이지라는 제목에 title이라는 이름을 주면 이제 제목을 꾸며주고 싶을 때는 style태그 안에서 mytitle이라는 명찰을 달고 있는 부분을 지목해주는 것이다.
class는 여러 개 붙이는 것이 가능하다.
<button class="mybtn red-font">로그인하기</button>이미지 넣는 법
<style>
.mytitle {
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
}
</style>정형화된 코드이므로 이미지 넣기에는 이 코드 세 줄을 사용하면 된다.
전체를 옮기기
각각의 요소를 포함한 전체를 화면 가운데로 옮기고 싶다면 div로 묶어주고 div를 옮기는 것이 빠르다.
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요.</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn red-font">로그인하기</button>
</div>이런 식으로 전체를 div로 감싸주고 wrap이라는 클래스를 주면
style 안에서
.wrap {
width: 300px;
margin: auto;
}
이런 식으로 높이와 넓이를 정해서 구역을 정해줄 수 있다.
style.css파일로 css는 따로 분리할 수도 있다.
<link rel="stylesheet" type="text/css" href="mystlye.css">Git
Git이란?
프로젝트 버전관리를 위한 도구이다. 버전관리를 할 수 있고, history를 통해 작업내역을 확인할 수 있다.
프로젝트를 나누어서 작업하고 하나로 합치기에 편하기 때문에 협업 프로젝트에 유용하다.
Git vs GitHub?
- Github : Git 원격 저장소 + Git 으로 할 수 있는 커뮤니티 기능 서비스
소스트리를 이용한 버전관리와 commit
✅ sourctree 는 Git 을 쉽게 사용할 수 있는 도구
commit
- 현재 프로젝트 상태를 사진으로 찍는다고 생각하면 된다.
- 프로젝트의 상태를 포함해서 누가, 언제, 커밋(작업내역)메시지 의 세 가지 정보를 포함하고 있다.
직접 프로젝트 폴더 안에 파일을 만들어보고 수정하면서 commit을 해봤다.
- 소스트리에서 repository 생성하기
- git init : 프로젝트를 git 프로젝트로 설정하기
- 소스트리의 현재 프로젝트 상태에서 파일 옆 +버튼을 눌러 위로 올리기
- 위로 올라간 파일에 대해 작업한 내역에 대해 커밋 메시지를 적어주고 커밋하기
위의 순서처럼 커밋을 반복해서 진행하면서 연습해봤다.
파일 중 하나만 수정, 수정된 파일의 일부만 commit 등을 진행하고 history를 보면 내역이 다 나와있는 것을 확인할 수 있다.
원격repo 사용하기
- github에 접속해서 repo를 만든다. (public으로 설정)
- 소스트리로 push하기 - commit들을 원격 repo commit들에 합친다.
- 소스트리로 pull하기 - repo의 commit들을 로컬 repo commit들에 합친다.
👩💻 생각
- 개강 전에 웹개발 기초 강의를 들었기 때문에 조금 수월했지만 웹개발 경험이 부족하기 때문에 아직도 익숙하지 않은 느낌이다.
- git은 항상 어렵게만 생각해서 마주하기를 피했는데 튜터님의 설명과 함께 강의자료를 보면서 처음으로 commit과 수정을 여러 번 진행해봤는데 좀 더 연습해서 익숙해져야 할 것 같다.
- 구글링 tip
구글링할 때는 공식문서를 보는 것이 가장 좋다!
ex) git -> git scm 사이트 참고
