[TIL] 유데미X사람인 부트캠프 4일차 / 깃 브랜치, css flexbox

[1. 오늘 배운 것]

1. 브랜치 병합, 병합 충돌 수정 이해하기

- git branch : 브랜치 목록을 보여주는 명령어

- git branch -m 수정할_브랜치의_수정된_브랜치명 : 브랜치명을 수정

- git checkout 이동할_브랜치명 : 다른 브랜치로 바꾸기

- git checkout -b 생성할_브랜치명 : 브랜치를 생성하고, 그 브랜치로 위치를 바꾸는 명령어

- git merge 브랜치명 : 현재의 브랜치에 다른 브랜치를 합치는 명령어

- git log : 깃 로그 확인

- git add : 깃 커밋 전 커밋할 부분에 추가

- git commit -m : 깃 커밋과 커밋메세지

 

2. 브랜치&커밋 삭제, 단계적 &비단계적 되돌리기

- git branch -d 삭제할_브랜치명 : 브랜치 삭제

- git rm 삭제할_파일명 : 파일 삭제

- git reset --hard HEAD~1 : 현재 브랜치의 마지막 커밋으로 돌아감

- git checkout -- . : 스테이징되지 않은 변경사항 되돌리기

 

3. 깃과 깃허브

- 이미지1

- 이미지2

- 깃허브를 사용하는 이유 :  cloud저장, 포트폴리오 페이지, 협업, 기여

 

4. 웹사이트 제작

 

5. 로고 제작

- text-transform : 글자 변환 (소문자, 대문자 등등)

- html

    <header>
        <div id="page-logo">
            <a href="/index.html">Travel Goals</a>
        </div>
    </header>

-css

body{
    font-family: "Quicksand", sans-serif;
    margin:0;
}

#page-logo a{
    padding: 10px;
    font-family: "Oleo Script", sans-serif;
    color: rgb(245, 243, 160);
    font-size: 50px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgb(0,0,0);
}

 

6. 페이지 탐색 추가

- html

    <header>
        <div id="page-logo">
            <a href="/index.html">Travel Goals</a>
        </div>
        <nav>
            <ul>
                <li><a href="/places.html"></a>Destinations</li>
                <li><a href=""></a>About</li>
            </ul>
        </nav>
    </header>

- css

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

 

7. flex-box

- display : flex; => 플렉스박스 형태로 만들어준다

- flex-direction : column; => 열 형식으로 배치된다

- flex-direction : row; => 행 형식으로 배치된다 (기본값)

- flex-wrap : wrap; => 너비에 맞게 행에서 열로, 열에서 행으로 바뀐다 (반응형, 기본값=nowrap)

 

8. 플렉스 아이템 정렬

- justify-content: 배치/정렬할 방식 설정 (동일한 너비/ 양쪽 끝 등등 ~)

 

9. 프로젝트의 플렉스박스

- css

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 60px;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

header ul{
    display: flex;
    justify-content: flex-end;
}

header li{
    margin-left: 20px;
}

 

 

10. 배경에 이미지 넣기

- html

    <main>
        <section id="hero">
            <h1>SH's Travel Page</h1>
            <p>Let's explore world together!</p>
            <a href="/places.html">Discover</a>
        </section>
        <section id="hightlights">

        </section>
    </main>

- css

#hero{
    height: 800px;
    background-image: url("images/places/ocean.jpg");
    background-position: center;
    background-size: cover;
}

- 폴더

- 결과

 

11. 히어로 콘텐츠를 위한 컨테이너 생성하기

- html

<main>
        <section id="hero">
            <div id="hero-content">
                <h1>SH's Travel Page</h1>
                <p>Let's explore world together!</p>
                <a href="/places.html">Discover</a>
            </div>
        </section>
        <section id="hightlights">

        </section>
    </main>

- css

#hero-content{
    width: 900px;
    background-color: rgba(51, 47, 47, 0.8);
    box-shadow: 2px 4px 8px rgb(68, 67, 67);
    border-radius: 8px;
    text-align: center;
    padding:50px 0;
    margin: 0 auto; 
    position: relative;
    top: 200px; 
}

- 결과

 

12. 히어로 콘텐츠 스타일링

- css

#hero-content h1{
    color: white;
    text-transform: uppercase;
    font-size: 50px;
    font-family: "Raleway", sans-serif;
    margin:0;
}

#hero-content p{
    color:  white;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: lighter;
    margin-bottom: 32px;
}

#hero-content a{
    text-decoration: none;
    background-color: rgb(255, 251, 0);
    padding: 12px 24px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
    box-shadow: 2px 4px 8px rgb(68, 67, 67);
}

#hero-content a:hover{
    background-color: rgb(255, 238, 0);
}

- 결과

 

13. 고정&절대위치 이해

- 고정 : 스크롤에 상관 없이 그 자리에 있음, position:fixed;

- 절대 : 스크롤에 따라 이동

 

[2. 오늘 잘한 점]

드디어 VSCODE에서 왜 오류가 나는지 알았다 ㅋ ㅋ ㅋ ㅋㅋ ㅋ Normal일때는 타이핑이 안된다 한영키를 누르고 영어상태로바꿔서 i또는 fn+i를 누르면 해결된다 끼야웅ㄹ

그리고 VSCode에서 브래니끼리 충돌이 왜 안됐었는지 알게 되었다 알려주신 혀나언니 감사합니다 ^-^

 

[3. 개선해야할 점]

이제 VSCode에서 발생한 충돌을 어떻게.. 해결하면 된다!