mission - html/css

html과 css를 이용해 만들어본 과제에 대한 회고

마주친 문제

1. hover와 가상선택자를 이용한 버튼 구현 시 가상선택자 텍스트가 보이지 않음.

구조적인 문제 + 가상선택자에 대한 이해도가 낮은 것으로 문제점을 인식했다.
해서 우선 가상선택자 ::before, ::after 에 대한 내용을 다시 한번 학습했다.
이후 html 구조상의 문제로 보여 싹 다 지웠다.
그리고 제시된 와이어 프레임? 완성된 구현이미지? 를 분석하고 문제에서 제시한 규칙들을 미리 적으며 구조를 다시 생각해보았다.

다음은 문제가 되는 버튼을 만드는 것부터 다시 시작하였다.
hover 이벤트에서 문제가 발생했으므로 아예 hover이벤트 시 보여지는 css 부터 작성하였다.

처음에는 큰 div 부터 점점 줄여서 그림을 그려갔다면 이번에는 가장 작은 버튼, 그중에서도 hover 이벤트가 적용되는 그림부터 역으로 올라갔다.

이 방법이 생각보다 괜찮다는 생각이 들었다. 물론 제일 좋은 건 미리 구조를 분석해보는 부분이였지만, 작은 부분부터 키워나가는 것도 꽤 좋은 방법인 것 같다.

<button>
  <a href="/" target="_blank">
    <img src="./assets/icon/square.svg" alt="구매하기">
  </a>
</button>

button{
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  background-color: var(--c002);
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;
}
button:hover {
  width: 112px;
  height: 42px;
  background-color: var(--c005);

  display: flex;
  align-items: center;
  justify-content: flex-end;
}
button:hover::before{
  content: "구매하기";
  text-decoration: none;
  color: var(--c001);
}

<h2>오늘의 쇼핑 제안</h2>

h2{
  background-image: url('../../assets/icon/shopping.svg');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;

  padding-left: 30px;
}

참고링크