[TIL] CSS - 이미지를 감싸는 a 태그 focus 영역

과제를 진행하면서 hover와 focus를 구현하다가 border와 outline이 맞지 않는 문제가 생겼습니다.

구현1

html

<div class="content-list">
  <div class="content-item">
    <a href="/" role="tab">
      <img src="https://via.placeholder.com/280x280" class="item-img">
    </a>
  </div>
</div>

css

* {
	 box-sizing: border-box;
}

.content-item {
	width: 300px;
	height: 300px;
	border: 1px solid black;
}

.content-item .item-img {
	margin: 10px;
}

.content-item:hover {
	border-color: red;
}

.content-item a[role="tab"]:focus {
	border-color: red;
}

왼쪽 hover는 원하는대로 적용되는것을 볼 수 있는데 focus는 적용되지 않았습니다.

웹접근성이 필요했기 때문에 focus 또한 동작했어야했습니다.

구현2

css

.content-item a[role="tab"] {
	border: 1px solid black;
}

.content-item a[role="tab"]:hover,
.content-item a[role="tab"]:focus {
	border-color: red;
}

같은 영역에 효과를 주기 위해 a 태그에 border을 주었지만 img와 a태그의 영역의 크기가 달랐습니다.
검색을해보니 a태그는 inline요소로 inline에는 block이 들어갈 수 없지만 a태그는 특이점으로 block을 포함할 수 있다고 되어 있었습니다.

그래서 a태그를 block 효과를 추가해 img를 감싸는 영역이되었습니다.

하지만 a태그의 영역이 content-item을 넘어가버렸습니다.
이는 box-sizing이 border-box로 설정되어 border 영역이 요소 사이즈가 되어 내부의 크기가 box보다 작아져 발생했습니다.

box-sizing : border-box는 필요했기 때문에 다른 방법으로 구현해야 했습니다.

해결

검색을하고 고민을 하다가 쿠팡사이트를 참고하여 해결하게 되었습니다.

쿠팡 컨텐츠

쿠팡은 content-item 또는 a 태그에 border를 주는것이 아닌 span요소를 position : absolute를 사용하여 border와 hover, focus를 주었습니다.

저는 현재 코드에 새로운 태그요소를 추가하고 싶지 않아 가상태그인 :before, :after를 사용하여 해결하였습니다.

css

.content-item {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 10px;
}

.content-item .item-img {
	width: 100%;
	height: 100%;
	padding: 10px;
}

.content-item a[role="tab"] {
	display: block;
	text-decoration: none;
	outline: none;
}

.content-item a[role="tab"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid black;
}

.content-item a[role="tab"]:hover::before,
.content-item a[role="tab"]:focus::before {
	border-color: red;
}

before에 border가 잘 적용되어 focus와 hover에도 잘 적용되는것을 확인할 수 있습니다.

마무리

혼자서 한두시간 고민을 해봤지만 원하는 답을 얻지는 못했습니다.
다른 사이트를 참고하였지만 그것을 나만의 방법으로 응용하고 해결할 수 있다면 충분히 도움이 되는거 같습니다.

inline과 block 요소에 대해서는 크게 생각하지 않고 있었던거 같은데 이번에 다시 리마인드 되었던거 같습니다.