개인 프로젝트(HTML/CSS) 1차 미션

grid가 편하다보니 float 공부를 소홀히 했다...
선택자 결합 관련해서도 공부량이 적었는데
그러다 보니까 확실히 프로젝트 하면서 전혀 연관지어 생각을 못했다
float으로 구현하는 프로젝트를 하는 중 한참동안 헤메다가
결국은 해결했지만 단순한 걸 너무 멀리 돌아온 느낌
역시 기본 공부는 해도해도 과하지 않다

너무나 단순한 원리로 해결한 float으로 이미지링크 grid처럼 배치하기

처음에는 a태그와 버튼을 만들어 div태그로 감싸고 그 div태그를 배치했는데 hover시에는 괜찮았는데 focus때 이상하게 border때문에 다른 요소들이 밀려서 이것저것 다른 방법을 이용해가면서 몇 시간동안 코드를 수정했다.

지금 생각해보니까 a태그와 div태그의 크기가 미묘하게 따로 놀아 그런게 아닐까 싶다. hover시엔 div태그에 마우스를 올렸지만 focus시에는 a태그가 선택되는...

결국 a태그를 block으로 바꾸고 width와 height를 지정해 해결했다.

더불어 요소 hover시나 focus시 다른 요소가 변화하게 하는 방법을 몰라 배운 부분에서 열심히 찾아보다가 선택자 결합을 이용한 방법을 알게되었다.

.product div {
   position: relative;

   float: inline-start;
}

.product a {
   display: block flex;
   justify-content: center;
   align-items: center;

   text-decoration-line: none;
}

a태그를 display: block으로 바꿀 수 있다. 명심하자

.product .image:hover ~ .button {
   width: 100px;
   height: 40px;
   border-radius: 0px;
   border: 1.5px solid var(--color-blue);
   background-color: rgba(0, 148, 228, 100%);
   color: white;

   font-size: 0.8rem;
}

.product .image:hover ~ .button::before {
   content: "구매하기" "\00a0\00a0\00a0"; 
   color: white;
   font-size: 0.8rem;

   position: relative;
}

.product .image:focus ~ .button {
   width: 100px;
   height: 40px;
   border-radius: 0px;
   border: 1.5px solid var(--color-blue);
   background-color: rgba(0, 148, 228, 100%);
   color: white;

   font-size: 0.8rem;
}

.product .image:focus ~ .button::before {
   content: "구매하기" "\00a0\00a0\00a0"; 
   color: white;
   font-size: 0.8rem;

   position: relative;
}

선택자 결합 '~'를 이용하면 A요소 hover(focus)시, 형제 요소를 변화시킬 수도 있다.

기타 선택자 결합들 다시 공부하기!!

한가지 마음에 걸리는 건 button의 역할을 하는 요소를 div태그로 만들고 a태그를 이용해 링크를 걸었다... 다음번에 한 번 봐서 수정할 계획이다.