-
[TIL] 스파르타) Project 3 - 3일 차 (CSS 관련)TIL-sparta 2024. 5. 3. 22:24
학습 키워드: 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
- 한참 전 스파르타 첫 팀 과제 때 의문을 가졌던 부분인데, 당시에 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:
> 프로젝트 repository
> css fr 유닛 참고
> css 단위 참고
> css 단위 참고
> responsive design (반응형 디자인)
728x90'TIL-sparta' 카테고리의 다른 글
[TIL] 스파르타) CS 강의 수강 (Character Encoding, Numbers Representation) (0) 2024.05.05 프로그래머스) 명예의 전당 (1) 문제 풀이 (JavaScript) (0) 2024.05.04 [TIL] 스파르타) Project 3 - 2일차, Github Pull Request, review, 그 외 팀 프로젝트 관련 사항들 (2) 2024.05.02 [TIL] 스파르타) Project3 시작 (TMDB 팀 과제), Github Issues (2) 2024.05.01 [TIL] 스파르타) CS 강의 수강 (DB, DBMS) (0) 2024.04.30