노마드코더에서 리액트를 배우면서 오랜만에 css를 했다. css는 뭔가, 깊이 쓰기에는 얕고 자잘해서 이렇게 한 번 프로젝트를 할 때마다 정리를 하는 게 나을 것 같다.

Movie Application by Alex Banaga

로딩화면

로딩중... gif를 띄우는데, 화면 중앙에 띄워야 해서 화면을
흰색으로 꽉 채워야 했다. 하지만 body는 이미 아쿠아 색으로 채운 상태였고
100%를 해도 꽉 채워지지는 않았다.
너비와 높이에 각각 100vw 100vh하니까 잘되었다.
보통 px 외에 rem, em,vh/vw 등의 단위는 잘 쓰지 않아서 종종 잊곤 했는데, 같이 활용해서 유사시에 유용하게 써먹도록 해야겠다 생각했다.

:not

:not(:last-child):after

영화 장르를 스타일링하는 중에 생긴 일. 장르명 옆에 ","를 붙이고 맨 마지막 장르면 뒤에는 빈칸으로 두어야하는 상황이었다.
나는

:after{content:","}
:last-child:after{content:""}

이렇게 작성하고 있었기 때문에,
벨로그에서 last-child는 이제 쓰지 않는다는 제목의 글을 봤을 때, 찔려서 들어가보고 처음 알았다.

하지만 이상하게도 각 영화의 장르를 보여주는 <li className="genre__genre">는 무슨일인지 적용이 되지 않는 모습을 보여주어 저대로 쓰고 있다. 그리고 :after{content:","}에 쉼표 뒤 공백 한칸이 표현되지 않아 그냥 스페이스바를 눌렀는데, 반응이 없었다.

검색해보니 #stackoverflow 이런 답변이 있어서 잘 해결 할 수 있었다.

For CSS content   use \a0. The following is a list of different types of spaces and their CSS code:

• space: \20
• nbsp: \a0
• en space: \2002
• em space: \2003
• 3 per em space: \2004
• 4 per em space: \2005
• 6 per em space: \2006
• figure space: \2007
• punctuation space: \2008
• thin space: \2009
• hair space: \200a
• zero width space: \200b
• narrow nbsp: \202f
• medium mathematical space: \205f
• zero width nbsp: \feff

나는 \a0를 썼다.

:after{content:",\a0"}

:not(:last-child)

한편, 이렇게 친구들을 쌓아올려야 하는 상황이 있었는데,
처음에는 누가 추천한 것을 보고

const friendPf = document.querySelectorAll(".friend-pf");
friendPf.prototype.forEach.call(friendPf, function(e, i) {
    e.style.zIndex = elems.length - i;
});

이렇게 했으나 안되는 걸 보니 나의 상황에는 맞지 않아서..
(movie들의 총량만큼 friend-pf도 복제 되어, 3개가 아닌 60개였음. 즉 length도 60이므로 :not(:lastchild) 쓰기가 곤란했던 것이 아닐까 추측 )
저 식은 지워버리고

flex의 방향을 reverse해서 적용을 했더니 잘 되었다.
last child가 가장 앞에 있으므로 last child를 제외한 다른 엘리먼트가 겹겹이 쌓이도록 해주었다.

/*friends는 세 명을 감싸는 부모*/
.friends {
  display: inline-flex;
  flex-direction: row-reverse;
  margin-right: 4px;
}

/*friend-pf는 각각의 프로필사진*/
.friend-pf:not(:last-child) {
  margin-left: -3px;
}

네비게이션

따라하던 중 '아.. 이거 js로 따로 해야하나?' 싶었던 것이 아래 기능이었다.

네비게이션

기능은 두가지 였는데
1. 각 메뉴에 hover하면 border-left가 아쿠아 색이 되는 것
2. 아이콘과 메뉴명이 진하게 변하는 것
두 기능이 예상하지 못한 곳에서 발생하는 것이 문제였다.

문제

<!--네비게이션-->
<ul className="main-ul navul">
  <li className="main__li navli">
    <svg className="main svg-icon" xmlns="http://www.w3.org/2000/svg"   width="25" height="25" viewBox="0 0 23 23"  fill="none" stroke="#d2d6df" strokeWidth="2"  strokeLinecap="round"   strokeLinejoin="round">
      <path d="M1 12s4-8 11-8   11 8 11 8-4 8-11 8-11-8-11-8z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
   Discover
  </li>
  ...
</ul>

<ul className="labels-ul navul">
    <li className="labels__li navli">
       <svg className="label svg-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffab57" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
       </svg>
      See with  Bobbie
    </li>
  ...
</ul>

먼저, html의 구조는 이렇다. 두개의 ul 태그로 각각 main 리스트와 label리스트를 만들어주고, li태그에 svg와 따로 태그를 씌우지 않은 메뉴명 텍스트를 넣어주었다.

처음 생긴 문제 상황은 이랬다.

li 태그에 :hover를 했을 때,
Discover만 진하게 변하고 svg-icon에는 변화가 없길래.. li 아래의 모든 태그를 선택하자는 생각에 li * :hover{ } 를 했더니만, 눈 옆에도 파란 줄이 생겼던 것 같다.

그리하여 선택자는 li만, 그러나 적용은 동시에 두 엘리먼트에 하려면 js밖에 답이 없나 싶었다.

해결

그런데, 여차저차 하다가(선택자를 다시 훑음..) 이런 코드를 짰는데 됐다?

.navli:hover .main.svg-icon * {
  stroke: #59485d;
}
.navli:hover {
  border-left: 3px solid #13e3f7;
  background: linear-gradient(
    to right,
    rgba(35, 229, 248, 0.1) 2%,
    rgba(0, 0, 0, 0) 5% 100%
  );
  color: #59485d;
}

어떻게 해결이 된건지 정리를 해보자면

• 선택은 하나 적용은 둘이 불가능하므로, 기능을 적절히 나눠주는 것이 맞다.
• 그리고 돌아돌아 오기 전에 적절한 선택자를 찾아보고 사용하는게 맞다(..)
  이번 경우에는 stackoverflow에서 운좋게도 비슷한 예시를 찾아서 잘 응용할 수 있었다.
  li 안에 있는 svg안에 :hover이 작동하지 않는다는 문제였는데,

li:hover svg path {
  fill: red;
}

li:hover{
  color: red;
}

첫번째 선택자로 svg를, 두번째 선택자로 li를 선택해 동시에 효과가 작동하는 느낌을 준다는 것.
참고로 li svg * :hover 이렇게 거꾸로는 안되더라

내 svg태그 안에는 path 뿐만아니라 circle도 있어서 그냥 li svg *으로 svg아래의 모든 것을 선택했다.

스크롤바

스택오버플로우에서 css-tricks 사이트의 그림을 참조해 보여주었는데 스크롤바의 몰랐던 부분들을 알게 됐다.

/**스크롤바**/
.movies::-webkit-scrollbar-track,
.movies::-webkit-scrollbar-track-piece {
  background: #f2f5f7;
}

/* Handle */
.movies::-webkit-scrollbar-thumb {
  background: #d5dde9;
  height: 1rem;
}
/* Handle on hover */
.movies::-webkit-scrollbar-thumb:hover {
  background: #bfc8d6;
  height: 1rem;
}

흠... 그런데 not working이다. 왜지?
정확한 클래스에 가상 선택자도 맞고, 환경도 크롬인데? 왜??? 일단 갈길이 급해서 패스하겠다.

---

선택자는 정말 봐도봐도 돌아서면 까먹게 된다. 결합선택자 형제선택자 등등 뭐가 너무 많아서... 구글링 능력과 기록의 중요성을 다시금 느꼈다.

선택자 구글링에 많은 도움이 되었던 사이트를 올리고 간다.
DEVKUMA