GitHub 마크다운에서 <a> 태그 안의 <img> 옆에 나타나는 밑줄 없애버리기

오랜만에 깃허브 리드미를 작성하다가 답답한 상황을 마주쳤다.

바로 <a/> 태그 안에 작성된 <img/> 태그 옆에 계속 밑줄이 생기는 것이다.

기본적으로 다음과 같은 형태의 코드에서 작업하였다.

<p>
  <a href="...">
    <img src="..." alt="..." style="max-width: 100%;">
  </a>
</p>

<a/> 태그 안에 여러 inline-style을 추가해보았다.

text-decoration: none, display: inline-block;, width: fit-content; 등...

또한 <img/> 태그 안에 style을 어떤 값을 넣어줘도 제대로 동작하지 않았었다.

해결 방안은 너무도 어이가 없었다.

위 내용을 참고하여 코드를 다음과 같은 형태로 수정해보았다.

<p>
  <a href="..."><img src="..." alt="..." style="max-width: 100%;"></a>
</p>

...해결 완료!

추정컨대 문제의 원인은 <a> 태그와 <img> 태그 사이의 공백문자를 Github 마크다운 인식기에서 우리의 생각과는 조금 다르게 인식한 것이 아닌가 싶다.

사실 정말 내용이 별거 없어서 이런 글을 적어도 되나 싶었다.

하지만 적어도 누군가는 내 글을 읽고 같은 문제를 해결할 수 있으니...