오늘 한 일

✔️ 웹 프로그래밍 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을 해봤다.

1. 소스트리에서 repository 생성하기
2. git init : 프로젝트를 git 프로젝트로 설정하기
3. 소스트리의 현재 프로젝트 상태에서 파일 옆 +버튼을 눌러 위로 올리기
4. 위로 올라간 파일에 대해 작업한 내역에 대해 커밋 메시지를 적어주고 커밋하기

위의 순서처럼 커밋을 반복해서 진행하면서 연습해봤다.

파일 중 하나만 수정, 수정된 파일의 일부만 commit 등을 진행하고 history를 보면 내역이 다 나와있는 것을 확인할 수 있다.

원격repo 사용하기

1. github에 접속해서 repo를 만든다. (public으로 설정)
2. 소스트리로 push하기 - commit들을 원격 repo commit들에 합친다.
3. 소스트리로 pull하기 - repo의 commit들을 로컬 repo commit들에 합친다.

👩‍💻 생각

• 개강 전에 웹개발 기초 강의를 들었기 때문에 조금 수월했지만 웹개발 경험이 부족하기 때문에 아직도 익숙하지 않은 느낌이다.
• git은 항상 어렵게만 생각해서 마주하기를 피했는데 튜터님의 설명과 함께 강의자료를 보면서 처음으로 commit과 수정을 여러 번 진행해봤는데 좀 더 연습해서 익숙해져야 할 것 같다.
• 구글링 tip

  구글링할 때는 공식문서를 보는 것이 가장 좋다!
  ex) git -> git scm 사이트 참고