기존 작업했던 과제인 영화페이지 만들기를 css로 관리하던 도중
flex만으로 작업을 하기도 했고 또, 하나하나 px값으로 주었던 부분이 장기적으로 반응형 웹을 만들 때 좋지 않은 퍼포먼스를 발휘 할 것 같아서 오늘은 특별히 더 grid에 대해서 공부를 하였다.
가장 먼저 css 작업을 진행할 때는 reset.css를 적용시킨다. 이 css는 가장 먼저 적용되게 배치하는 것이 좋다.
reset.css는 기본적으로 html의 태그들이 가지고있는 기본값, 즉 h1~h5와 같은 태그부터
form, main, footer와 같은 태그까지 기본적으로 가진 margin과 같은 값들을 전부 초기화 시켜주는 css이다.
이렇게 작업을 시작하면, 어느 환경에서라도 항상 균등한 값을 기대할 수 있기 때문에 무엇보다도 초기화는 중요하다.
css를 작업하기에 앞서서 기본적으로 태그자체 (h1 , p , body, main)에 속성을 부여하는 방법과
class , 그리고 id에 부여하는 방식이 있다.
각각 태그는 아무것도 없이, 태그만을
class는 .클래스명(dot)
id는 #아이디명을 사용하게 된다.
이것이 조금 중요한게 만약에 grid나 flex 속성을 부여하게 되면 하위 태그에 영향을 미치게 된다.
이것이 부모와 자식 이라는 매커니즘으로 작동하며, 이것은 앞으로 작업할 프로그래밍과정에서도 마찬가지로 영향을 주게 된다.
그렇기에 margin 값을 얼만큼 주고 padding값을 얼만큼 줄지에 생각하기 전에
지금 내가 수정하고싶은 '대상'은 어떤 부모를 가지고 있는지, 어떤 속성을 지니고 있는지 파악하는게 가장 중요했다.
이렇게 쓸 수 있는 이유는,
기존의 작업물을 flex로 작업했던 탓에 하나하나 grid로 변경해보면서 느낀 점이 너무너무 많기 때문이다.
createCard() {
return `
<div class="postbox" id="${this.id}">
<div class="card">
<img src="${this.poster_path}"class="movieImage" alt="...">
<div class="postBody">
<h5 class="movieName">${this.title}</h5>
<p class="movieContents" >${this.overView}</p>
<p class="movieValues">${this.vote_average}</p>
<p class="releaseDate">${this.release_date}</p>
</div>
</div>
</div>`;
}
}
이번에 사용하게 된 PostBox 라는 class의 div 태그는
body태그 내부의 main태그 내부의 section 태그 내부의 class = movieBox의 div 태그 안에서 생성이 된다.
<body>
<header>React_4기 6조</header>
<form class="movieHeader">
<input type="text" id="searchMovie" placeholder="영화 제목을 입력하세요" />
<button id="searchBtn">검색</button>
</form>
<main>
<section>
<div class="moviebox" id="movieContainer"></div>
//이곳에서부터 반복된 카드가 생성됩니다.
</section>
</main>
그러면, 당장 내가 movieName 이라는 class의 값을 조정하고 싶다면 body태그 아니 그 이전에 전역에서부터 설정을 받아오는 게 어떠한 것들이 있는지 살펴볼 필요가 있는 것이다..
게다가, css 작업을 진행하며 굉장히 불편함을 많이 느꼈는데,
추가 항목을 계속 밑에다 두고 작업을 하다보니, 태그와 상위 class에 부여한 값을 찾아서 올라갔다 내려갔다를 반복하는 일들이 비일비재했다.
header {
display: grid;
grid-area: header;
background-color: #fffefb;
justify-items: center;
justify-content: center;
width: 100vw;
height: 3rem;
font-size: 30px;
font-style: inherit;
color: #00668c;
}
/* 검색헤더 */
.movieHeader {
display: grid;
grid-area: form;
grid-template-columns: 20rem 5rem;
grid-template-rows: 2.5rem;
background-color: #313d44;
align-items: center;
justify-content: center;
/* width: 100vw;
height: 3rem; */
}
/* 영화 검색란 */
#searchMovie {
display: grid;
height: 2rem;
justify-content: center;
align-items: center;
}
결국 작업의 막바지에 기존에 있던 css의 속성값들을 재정렬, header태그의 아래는 header의 값들만 채워넣게 되었다.
물론 이 모든 작업들은 기존의 css를 싹 다 갈아엎어야 할 정도로 심각해서 참고자료로만 남기고 기존의 작업물은 flex인 그대로 제출하게 되었다.
flex로 작업을 할 때는 평면의 위치와 순서만을 고려한 느낌이라면 grid로 작업을 할때는 x와 y의 좌표를 제대로 계산해서 사용하는 느낌이 들었다.
머릿속에서 구상하고 있는 부분들이 제대로 배치가 되는지 확인을 매번 하며 백업본을 만들고 지우고를 반복했다.
작업을 하면서 느낀거지만, 영향을 주는 태그가 grid로 작성이 되어있다면 grid를 통합해주는 것이,
flex로 작성되어있다면 flex로 작성하는 것이 압도적으로 편하다.
물론 body 태그로 flex 혹은 grid를 선언했다고 해서 하나만 써야한다는 개념이 아닌, 위와같은 class postcard 의 상황에서는 더욱 그렇다..
최종적인 리터칭을 하위 클래스에서 진행하고, 상위 클래스에서는 크게 벗어나지않는 큰 틀을 잡아주는 것이 중요하다.
큰 틀을 벗어나지 않는 header태그와 footer 태그는 flex로 작업해도 무관하고
sidebar와 영화카드 같이 공간을 배열해야하면 그건 grid를 사용하는 부분이 훨씬 더 표현을 풍성하게 할 수 있다.
점선으로 표기된 부분은 반응형으로 제작해서 페이지가 좁아지면 아랫쪽으로 내려오게 만들고
최소 2개의 그림으로 구성하고 싶었다.
그럼, 사이드바를 포함해서 최대 5칸의 column으로 전개하고 하단을 auto로 넣는 부분이 필요했다.
*이곳에서 사용되는 x와 y는 임의의 값입니다.
grid-template-columns: xfr yfr 를 이용해 하나씩 줄 수도 있지만
grid-template-columns: repeat(5, xfr) 같이 일괄 적용을 시켜줄수도 있었다.
배치를 어디에 어디로 보낼 것이냐 라는 부분에 있어선 자식요소까지 내려가 (위의 경우 class postBox를 이용했다)
좌표와 같이 grid-column과 grid-row 을 사용하여 시작하게끔 배치 할 수도 있으나,
여기서는 area를 사용했다
body {
background-color: #f5f4f1;
display: grid;
grid-template-columns: repeat(4, 2.5fr);
grid-template-rows: 100px auto auto 30px;
grid-template-areas:
"header header"
"form form"
"main main"
"footer footer";
width: 100vw;
height: 100vh;
}
사이드바는 중간에 제작하다 방해되어 부분적으로 제거했다..
공간을 나누는 것 까지는 좋았다.
문제는 이 다음부터였는데,
flex로 작업했던 부분들이 grid박스를 넘어서 튀어나오고 값들이 미쳐날뛰니까 시간상 더 이상은 안되겠다는 생각이 들어
추후에 작업을 마무리짓기 위해서 별도로 css파일을 저장해두었다.
오늘의 교훈 픽셀값은 우리의 원수 rem과 em을 사랑합시다.
'html css' 카테고리의 다른 글
| css를 다루면서 정리하기 - 1 (0) | 2025.02.02 |
|---|---|
| 2024.1.15 기록 (css와 display flex) (0) | 2024.01.15 |
| 2023.12.12 기록(html과 css의 기초정리) (0) | 2023.12.13 |
| 2023.12.1 기록 (Mixed Content 문제해결) (0) | 2023.12.01 |
