CSS로 이미지에 오버레이 버튼

안녕! 오늘 튜토리얼에서는 몇 가지 간단한 CSS를 사용하여 이미지 위에 버튼을 추가하는 방법을 보여드리겠습니다.

이전에 제 튜토리얼을 따라해 본 적이 있다면 제가 프레젠테이션에 능숙하다는 것을 알고 계실 것입니다. 이를 위해 목표를 달성하는 데 필요한 필수 코드와 함께 몇 가지 외형적인 세부 정보를 포함했습니다.

필요한 곳에 주석을 추가하여 선택 사항과 필수 사항을 구분했습니다.

우리의 HTML:

html 코드의 경우 필요한 것은 (권장)* figure 요소, 이미지, (선택 사항) div 및 (필수) figcaption 요소를 래핑하는 p 및 몇 개의 버튼입니다.

<figure>
   <img src="img/example.png" alt="">
   <!--Optional, if you're only adding a single button-->
   <div>
       <!--Optional-->
       <figcaption>
           example:
       </figcaption>
       <!--Required for grouping buttons-->
       <p>
          <button>1</button>
          <button>2</button>
          <button>3</button>
       </p>
   </div>
</figure>

div를 제외한 모든 요소에 의미론적으로 중요한 요소를 선택했음을 알 수 있을 것입니다.


노트:
<figure> 요소는 시맨틱 값으로 권장되지만 기술적으로 원하는 컨테이너 요소를 사용할 수 있습니다. 예를 들면 section , p , article 및 div 가 있습니다. 그러나 SEO 및 접근성 이점을 위해 의미론적 가치를 지닌 요소를 고수하는 것이 좋습니다.

또한 참고:

단일 버튼을 사용하도록 선택할 수 있으며 이러한 경우 p 요소를 드롭할 수 있지만 CSS 코드의 div 및 p 요소와 같이 여전히 버튼을 배치해야 합니다. 아래에.

우리의 CSS:

이제 재미있는 부분이 있습니다. 여기서 다루어야 할 것이 많기 때문에 정말 주의를 기울여야 합니다. 그래도 걱정하지 마세요. 제가 분해해드리겠습니다. 주석으로 코드에 직접 설명을 포함했습니다.

/*OPTIONAL, but recommended:
  * Prevents borders and padding from messing with
    explicitly declared height or width.
  * Resets margin and padding on everything in the
    browser.
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* OPTIONAL: A matter of style and taste.*/
/* NOTE: I've grouped selectors together, wherever
properties are sharing values.
   * This reduces code duplication.
   * It makes it easier to adjust multiple styles at
     once.
   * Makes your code easier to maintain.
*/

body, p, div, figure, figcaption, button {
    display: flex;
    font-family: sans-serif;
    font-size: 10px;
}

body, figcaption, div, p, button {
    align-items: center;
}

body, button {
    justify-content: center;
}

/* OPTIONAL: This allows us to place the <figure>
element in the center of the page */

body {
    height: 100vh;
}

figure {
    /* Required: */
    position: relative;
    /* Optional: */
    width: 50%;
}

img {
    /*`aspect-ratio:` is not supported in older browsers*/
    aspect-ratio: 1/.5;
    width: 100%;
}

/*The div is optional, and only included to help with
placement.
   *NOTE HOWEVER: the `position: absolute;` property +
    value paair are required, along with at least one
    of: `bottom`, `left:`, `right:`, and `top:`.
*/
div {
    justify-content: flex-start;
    flex-flow: row nowrap;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    width: auto;
}

/*The figcaption is totally optional, but recommended.*/
figcaption {
    background-color: rgb(245, 245, 245);
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    height: 25px;
    letter-spacing: 2px;
    padding: 0 15px;
    text-transform: uppercase;
    width: 50%;
}

/*Required to group and distribute the buttons*/
p {
    /*Tells the element to take up all available space:*/
    flex-grow: 1;
    /*Tells the flexbox layout system to place items
    toward the right of the container.*/
    justify-content: flex-end;
    /*Not supported on older browsers; use margins on
    the child elements if such support is needed.*/
    gap: 15px;
}

/*You can style your buttons however you like*/
button {
    aspect-ratio: 1/1;
    border: 1px solid rgb(195, 195, 195);
    border-radius: 50%;
    background-color: white;
    font-weight: bold;
    height: 25px;
}

결과는 다음과 같습니다.

저와 똑같은 버튼 스타일을 선택했다면 브라우저에서 제공하는 기본 버튼 스타일이 비활성화되어 있기 때문에 가리키기 또는 클릭 상태가 표시되지 않습니다. :hover , :active 및 :focus 의사 클래스를 사용하여 이러한 상태를 추가할 수 있습니다.

연습 삼아 이러한 것들을 직접 가지고 놀면서 어떤 결과가 나오는지 확인할 수 있습니다. 결과가 궁금하시다면 주저하지 마시고 댓글로 공유해주세요!

더 많은 것을 찾고 계십니까?

CSS에 대해 자세히 알아보고 싶다면 여기 DEV를 팔로우하거나 , 및 Twitch에서 내 무료 콘텐츠를 확인하세요! 곧 더 흥미로운 CSS 콘텐츠를 공개할 예정이며, 여러분의 실험과 프로젝트에 대한 여러분의 의견을 항상 듣고 싶습니다. 그러니 자유롭게 공유해 주세요!