[TIL] 스파르타) Project 3 - 3일 차 (CSS 관련)

 

학습 키워드: javascript, css, position, grid, git, rebase

 

1. CSS Grid

프로젝트 3일 차를 진행하면서 Grid를 많이 손봤는데, 지난번에 작성했던 Grid에 대한 정보 중 추가할 부분들이 있어서 작성하기로 했다.

.info-container {
    position: relative;
    width: 50vw;
    left: 50vw;
    transform: translate(-50%, 0);
    
    padding: 10px 10px 10px 10px;
    
    display: grid;
    column-gap: 10px;
    grid-template-areas: 
    "a b"
    "a c"
    "a d"
    "a e";
}

.info-left {
    grid-area: a;
    /* background-color: blue; */
    margin-right: 20px;
}

.info-rt {
    grid-area: b;
    /* background-color: green; */
    border-bottom: 1px solid white;
    padding: 10px;
}

.info-rm {
    grid-area: c;
    /* background-color: purple; */
    /* overflow-y: scroll; */
    height: 180px;

    padding: 10px;
}

.info-rmb {
    grid-area: d;
    /* background-color: chartreuse; */
}

.info-container .info-right .info-rb {
    grid-area: e;
    /* background-color: orangered; */
    overflow-x: scroll;
    height: 254px;
}

 - 프로젝트에 추가된 css의 일부를 발췌한 것인데, 집중해야할 부분은 .info-container의 프로퍼티인 grid-template-areas 다. 이 프로퍼티의 value는 a b c 등 어딘가 배열을 닮은 모양으로 문자열이 배치되어 있다. 이 문자열들은 각각 grid의 한 영역을 나타낸다. 예를 들어 위와 같이 작성하면 Grid의 구성이 왼쪽의 a가 하나의 merge된 column이고, 오른쪽의 b c d e 가 각각 한 개의 row를 차지하는 모양으로 생성된다. 이런 식으로 문자열을 사용해 모양을 미리 그려서 grid를 생성하는 기능이다.

 - 각각의 영역을 차지할 css class는 해당 클래스에 grid-area라는 프로퍼티로 구역에 해당하는 문자를 할당해주면 된다.

 

2. CSS의 여러가지 단위

1) What is it?:

 - px와 %처럼 프로퍼티의 값(크기 관련)을 설정할 때 사용하는 단위들이다. CSS를 사용할 때 마다 항상 px와 %만을 사용했었는데, 이 번 프로젝트 동안 몇 가지 다른 단위들을 알아내어 사용해봤다.

 

2) How does it work?:

 - fr: fraction의 약자로, grid의 구역을 비율로 나눠주는 역할을 한다. 지난 TIL에서도 한 번 다뤘으나 개념적으로 제대로 알지는 못했는데, grid-template-columns: 1fr 5fr 4fr; 처럼 나눈 경우 그리드의 column을 1:5:4 비율로 나누게 된다.

 - vh, vw: viewport의 height와 width를 의미한다. 항상 사용하던 %는 상위 class에 설정된 크기에 영향을 받게되는 경우가 있는데, 그럴 때 이 viewport의 크기로 값을 지정해준다.

 - em, rem: em은 글꼴 크기와 상대적으로 계산되는 단위라고 한다. font의 크기를 이 단위로 설정하면 해상도의 DPI에 따라 글자 크기가 달라진다고 한다. 또한 어떤 container의 width 등을 이 em으로 설정하면 해당 컨테이너에 설정된 글꼴 크기에 따라 width의 크기가 결정된다는 뜻이다. rem은 em에 root를 붙인 것이라고 생각하면 되는데, 현재 element의 root, 즉 HTML에 적용된 글꼴 크기를 의미한다. em이 무엇의 약자인지는 의견이 많이 갈리는 듯 하다. 근원이 명확하지 않다고 한다.

 

3) Why use it?:

 - 단순하게 px를 사용하는 방법은 viewport의 크기가 바뀌는 것에 유동적으로 대처할 수 없다. 또한 %는 상위 css class에 설정된 property의 값에 영향을 받기도 하고, 전체적인 viewport 크기 변경 시 글자와 화면 비율이 유지되지 않을 수 있다. 이렇게 화면 속 element들의 비율을 일정하게 유지하는 과제를 바로 responsive design (반응형 디자인)이라고 한다. 페이지를 반응형으로 설계하면 매 번 추가적인 css 작업을 하지 않아도 여러 크기의 화면에 자동으로 맞출 수 있어 편리해진다.

 

3. CSS position과 z-index

[240418] TIL - 스파르타) 미니 프로젝트 1

 - 한참 전 스파르타 첫 팀 과제 때 의문을 가졌던 부분인데, 당시에 z-index가 원하는대로 작동하지 않아서 overlay 생성에 난항을 겪던 문제가 있었다. 아래는 이 번 프로젝트 css의 일부다.

.dropDown {
    display: inline-block;
}
.dropDown:hover .subMenu {
    display: block;
}

.dropDown-btn {
    border: none;
    border-radius: 5px;
    color:white;
    background-color: coral;

    width:50px;
    height: 24px;   
}

.subMenu {
    position: absolute; /* #1 추가한 부분 */
    display: none;
    width: inherit;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0,0,0,0.17);
    background-color: black;
    z-index: 10; /* #2 추가한 부분 */
}

 - 팀원의 dropdown 메뉴 css 클래스 중 일부인데, 원래는 이 dropdown 클래스가 적용된 메뉴가 해당 element 아래에 위치한 모든 컨테이너를 아래로 밀어버리는 현상이 있었다. 여기서 #1의 position:absolute를 추가하여 밀림 현상을 해결했는데, 이 dropdown이 영화 정보 카드의 뒤에 위치하게 되어 안보이는 현상이 발생했다.

 - 바로 이 지점에서 지난번에 실패했던 z-index를 투입했는데 z-index 의 값에 단위를 붙이지 않고 사용하니 기능이 정상적으로 동작했다. 큰 값이 주어질수록 더 앞 쪽에 위치하게 되고, 작은 값 일수록 다른 div보다 뒤에 위치하게되어 가려지게된다.

 

4. git rebase 문제

 - git rebase를 간혹 사용해왔는데, 뭔가 기능을 잘 못 이해하고 있는 것 같다. develop 브랜치의 분기 브랜치에서 개발을 하다가 develop 브랜치가 업데이트되면, 그 기능을 내 분기 브랜치에 추가하기 위해 rebase를 사용해왔는데, 로컬에서 rebase할 당시에는 아무런 문제가 없다가 원격 저장소에 push를 할 때 쯤 부터 문제가 생기는 것 같다. 이 부분은 시간 날 때 알아보고 제대로 작성 해봐야겠다.

 

 

--

 

REFERENCES:

 

GitHub - donkim1212/nbc_ch2_tmdb: 스파르타) JavaScript Project 3

 > 프로젝트 repository

CSS Grid Layout + Firefox = ❤️

 > css fr 유닛 참고

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch

 > css 단위 참고

CSS values and units - Learn web development | MDN

 > css 단위 참고

Responsive design - Learn web development | MDN

 > responsive design (반응형 디자인)