늘어나는 링크

CSS로 중첩된 링크를 “늘려서” HTML 요소나 Bootstrap 컴포넌트를 클릭 가능하게 만들어 주는 헬퍼예요.

출처: 문서

본문

링크에 .stretched-link를 추가하면 ::after 의사 요소를 통해 링크가 포함된 블록 전체를 클릭 가능하게 만들어요. 대부분의 경우, position: relative;를 가진 요소 안에 .stretched-link 클래스를 가진 링크가 있으면 그 요소가 통째로 클릭 가능해져요. CSS position의 동작 방식 때문에 .stretched-link는 대부분의 table 요소와는 함께 쓸 수 없다는 점에 주의하세요.

Card는 Bootstrap에서 기본적으로 position: relative를 가지므로, HTML 변경 없이 카드 안의 링크에 .stretched-link 클래스를 안전하게 추가할 수 있어요.

하나의 영역에 링크(탭 대상)가 여러 개 있을 때는 stretched link 사용을 권장하지 않아요. 다만 필요한 경우 일부 position과 z-index 스타일이 도움이 될 수 있어요.

<div class="card" style="width: 18rem;">
 <img alt="..." class="card-img-top" src="..."/>
 <div class="card-body">
  <h5 class="card-title">
   Card with stretched link
  </h5>
  <p class="card-text">
   Some quick example text to build on the card title and make up the bulk of the card’s content.
  </p>
  <a class="btn btn-primary stretched-link" href="#">
   Go somewhere
  </a>
 </div>
</div>

대부분의 커스텀 컴포넌트는 기본적으로 position: relative를 가지지 않으므로, 링크가 부모 요소 바깥으로 늘어나는 걸 막기 위해 여기서 .position-relative를 추가해야 해요.

<div class="d-flex position-relative">
 <img alt="..." class="flex-shrink-0 me-3" src="..."/>
 <div>
  <h5 class="mt-0">
   Custom component with stretched link
  </h5>
  <p>
   This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we’re using it here to give the component a bit of body and size.
  </p>
  <a class="stretched-link" href="#">
   Go somewhere
  </a>
 </div>
</div>

<div class="row g-0 bg-body-secondary position-relative">
 <div class="col-md-6 mb-md-0 p-md-4">
  <img alt="..." class="w-100" src="..."/>
 </div>
 <div class="col-md-6 p-4 ps-md-0">
  <h5 class="mt-0">
   Columns with stretched link
  </h5>
  <p>
   Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we’re using it here to give the component a bit of body and size.
  </p>
  <a class="stretched-link" href="#">
   Go somewhere
  </a>
 </div>
</div>

포함 블록 파악하기 (Identifying the containing block)

stretched link가 동작하지 않는다면 아마 포함 블록(containing block)이 원인일 거예요. 다음 CSS 속성들은 요소를 포함 블록으로 만들어요:

  • static이 아닌 position 값
  • none이 아닌 transform 또는 perspective 값
  • transform 또는 perspective인 will-change 값
  • none이 아닌 filter 값이나 filter인 will-change 값 (Firefox에서만 동작)
<div class="card" style="width: 18rem;">
 <img alt="..." class="card-img-top" src="..."/>
 <div class="card-body">
  <h5 class="card-title">
   Card with stretched links
  </h5>
  <p class="card-text">
   Some quick example text to build on the card title and make up the bulk of the card’s content.
  </p>
  <p class="card-text">
   <a class="stretched-link text-danger" href="#" style="position: relative;">
    Stretched link will not work here, because
    <code>
     position: relative
    </code>
    is added to the link
   </a>
  </p>
  <p class="card-text bg-body-tertiary" style="transform: rotate(0);">
   This
   <a class="text-warning stretched-link" href="#">
    stretched link
   </a>
   will only be spread over the
   <code>
    p
   </code>
   -tag, because a transform is applied to it.
  </p>
 </div>
</div>

더 알아보기 (Learn more)