멋사 FE 2주차. html,css로 레이아웃잡기, 미디어쿼리

 

html 단축키

 

1. link:css 입력후 enter

link:css 입력후 enter

<link rel="stylesheet" href="style.css">

2. ctrl + /

아무것도 없는 공간에 커서대고 ctrl+/

주석 <!-- -->

 

드래그 하고 ctrl+/ 

그 줄 주석 <!-- -->

3. !+tab

html 탬플릿 출력

4. bk + tab

background-color:

5. >

 

하위요소 생성

header>ul>li

6. *

반복 태그 생성

ul>li*5

 

7. . #

class id설정

ul#menu>li.item*3

 

 

참고자료:https://www.hanl.tech/blog/emmet-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%B0%8F-%ED%8A%B8%EB%A6%AD-9%EA%B0%80%EC%A7%80/

VS Code 작업 속도 향상을 위한 Emmet 단축키 및 트릭 9가지 | 하늘네트

 

 

새로이 배우게 된 것

 

html

 

1. 단축키의 중요성 

해커톤을 진행할 경우 프론트엔드는 아주 적은 시간동안 몇십 페이지를 만들어야 하는데 이 때문에 빠르게 코딩하는 법을 배우는 것이 중요합니다. 위에서 살펴본 단축키를 통해 시간을 많이 줄일 수 있습니다.

저는 단축키를 쓰고 나서 2시간 걸리던 것을 1시간으로 줄일 수 있었습니다. 

 

2. id와 class 차이

html 태그 하나는 class를 여러 개 가질 수 있지만 id는 한 개밖에 가지지 못합니다. 이를 기억하지 못하고 id에 여러 개 적을 경우 기동하지 않으니 조심하세요.(vscode가 안알려줌)

예를 들어

<header id="header" class= "hd1 hd2">는 가능하지만

<header id="header container" class= "hd1 hd2">는 불가능합니다.

 

3. 이미지 크기 조절 - img에 width,height 직접 주기

div안의 img의 크기를 조절하려고 div의 크기만 설정하면 img 크기가 조절되지 않습니다. 그러므로 img 태그 자체에 width, height값을 설정해주어야 합니다. 하지만 이 방법은 media-query로 브라우저 크기에 따라 이미지 크기를 달라지게 할때 이미지가 깨질 수 있으므로 추천하지 않습니다.

4.  이미지 크기 조절- 상위요소에서overflow:hidden;

상위요소에 overflow:hidden을 주는 것이 대표적으로 이미지 크기를 조절하는 방법입니다. overflow:hidden만 주면 상위요소의 크기만큼 하위 요소를 보여줍니다. 하위요소 크기는 그대로 유지 되기 때문에 하위요소의 일부만 보여주는 단점이 있습니다.

추가로 하위요소에 width:100%;height:100%; object-fit:cover를 주면 원본비율을 맞추고 상위요소에 딱 맞춰 들어가게 만들 수 있습니다.

.image-box {
    width:380px;
    height:220px;
    overflow:hidden;
    margin:0 auto;
}

.image-thumbnail {
    width:100%;
    height:100%;
    object-fit:cover;
}

 

참고자료: https://multifidus.tistory.com/182

 

3. media-query  -@media(max-width:100px){ ... }

아래의 코드를 추가해 680px로 브라우저 크기가 줄어들면 구성요소들을 변화시킬 수 있습니다. 

@media(max-width:680px) {
    #header{
        display:block;
    }
    .h1{
        width: 680px;
        height: 100px;
    }
    .h2{
        width: 680px;
        height: 100px;
    }
    #main{
        display: block;
    }
    .main-img1{
        width: 680px;
        height: 225px;
    }
    
    .main-img2{
        width: 680px;
        height: 230px;
    }
    
    .main-img3{
        width: 680px;
        height: 225px;
    }
    #footer{
        display: block;
    }
    .ft1{
        width: 680px;
        height: 100px;
    }
    .ft2-01{
        width: 680px;
        height: 50px;
    }
    .ft2-02{
        width: 680px;
        height: 50px;
    }
}

 

4. display: flex; -세로정렬

상위 요소에 display:flex를 주면 하위 요소에 속한 div를 세로 정렬할 수 있습니다.

저는 .row라는 클래스를 새로 만들어 요소들에 이 속성을 주려고 했지만 media-query를 쓸 때, 불편하여 직접 상위 요소 클래스마다 적어주었습니다. html요소에 부여한 클래스이름은 바꿀 수 없기 때문에 한번에 여러 개의 클래스를 가진 html요소를 만드는 것은 좋지 않습니다.

 

5. height:0; - 요소 지우기

height:0;으로 html요소를 안보이게 만들 수 있습니다. 미디어 쿼리에서 요긴하게 사용됩니다.

 

github

 

 

1. 로컬 저장소로 내려 받기 위한 3가지 방법

1. git pull

원격저장소에 있는 프로젝트의 변경사항을 그대로 로컬저장소에 옮겨와 자동으로 병합
팀 단위로 사용하는 계정이 아닌 개인적으로 깃허브를 사용하는 사람들이라면 git pull 명령어를 가장 많이 사용할 것이다.
"변경 사항을 가져옴과 동시에 자동으로 병합이 되기 때문에 무엇이 추가되고 병합되었는지 확인이 안 됨"

2. git fetch

원격저장소에 있는 프로젝트의 변경사항을 가져오기만 한 후 병합(merge)은 따로
깃 입문자 또는 깃허브를 개인적으로 사용하는 사람이라면 git fetch 명령어는 거의 사용하지 않을 것이다.
"다른 사람이 수정한 부분을 확인하고 병합할 수 있다는 장점이 있음"

git fetch [원격저장소 이름] [브랜치이름]
git fetch origin main
# 원격저장소에 변동사항만을 가져 옵니다

git checkout origin/main
#git checkout으로 변경사항 조회하기
#새로운 commit으로 변경사항을 미리 적용해보고, merge 혹은 pull을 적용할 수 있습니다.

git switch main
#merge또는 pull을 하기 전에 다시 main branch로 돌아가 줍니다.

git pull
#git pull로 commit 변경사항을 적용시켜 줍니다.

참고자료: https://velog.io/@jhyeom1545/git-9-HEAD-checkout-fetch-pull

3. git clone

clone이라는 단어처럼 원격저장소의 내용을 새로운 폴더에 그대로 복사하는 것!

 

참고자료: https://sin0824.tistory.com/11

 

2. git bash에서 code .

git bash에서 code . 을 치면 그 경로로 vscode가 열립니다.