2024.1.15 기록 (css와 display flex)

css는 사실 사용하면 할수록 많이 감이 잡히는 계열중 하나이다.

 

flex는 기본 row배열이다. 쉽게 말하자면 가로로 나열된다.

이 부분에 있어서 탑을 쌓는 느낌이 들었다.

 

반복문으로 제작한 HTML 태그들 사이에 각각의 Class를 부여하고, 

그 class를 어떻게 배치할 것인지, 가끔은 grid를 사용하면 좋겠다는 생각도 들었다.

다음은 꼭 그렇게 써봐야지.

 

 

그리고 왜,

.detail_comment_wrap_list > #detailCommentReviewWrap i {
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px;
}

 

다음과 같이 경로를 이용해서 작성하는 지 또한 알게됐다.

 

정리하고 추적하기 쉽다. 이것은 굉장한 강점이다. 옵션을 변화시키고 싶거나, 어디서 문제가 발생하는지 알아보기 위해서 

물론, 하위 클래스를 일괄 변경하는 방식을 많이 사용하겠지만, 이번 프로젝트에서 우리 팀은 식별자를 용이하게 사용하기 위한 목적으로 많이 사용하게 되었다.

 

#movies > div .over {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.2);
}

 

hover와 over 관련 옵션도 많이 만져보았다.

 

약간의 공식들이 존재하기 마련이다. 대중적으로 많이 쓰이는 그림자를 주는 방식이나, 입체감을 주는 방식은 그림을 그리며 그림자로 명암을 넣을 때를 떠올리게 만들곤 한다.

 

최종적으로 백색인 white보다는 조금 약한 색감을 많이 사용했다.

 

클래식한 보드에 색감을 맞춰가며 괜찮은 ui를 구성하기란 어려운 법이라는 걸. 새삼 많이 느꼈다.

 

다음엔 grid로 배열을 남겨보고 이번 프로젝트에서 사용된 모듈화를 적극 사용해야겠다.