반응형
Github에서 마크다운을 활용할 때 다크 모드가 활성화되는 경우 라이트 모드 고정인 이미지가 잘 보이지 않거나 미적으로 안좋게 보이는 경우가 발생 할 수 있습니다.
다크 모드가 보편화된 만큼 github에서도 다크 모드를 지원하고 있는데 마크다운에서 별다른 처리를 해주지 않는 경우 어둡거나 밝거나 둘 중 하나로만 표시되게 됩니다.
README.md 혹은 PR을 작성할 때 마크 다운을 많이 활용하는데 여기에서 다크 모드 이미지를 대응하는 방법은 아래와 같습니다.
기본 이미지 첨부
마크 다운에 이미지를 첨부하면 아래와 같이 이미지 경로가 생성되는데 그 뒤에 각각 #gh-dark-mode-only / #gh-light-mode-only 를 붙여주면 됩니다.
반응형
<img>를 통한 첨부
좀 더 상세한 조정이 필요할 때 <img>를 활용해 이미지를 첨부하기도 하는데 이 같은 경우에서도 유사하게 진행하면 됩니다.
<img src="{uploaded image path}#gh-light-mode-only">
<img src="{uploaded image path}#gh-dark-mode-only">
<a> 등으로 감싸는 경우
특정 페이지 등으로 이동시키기 위해 <a> 등으로 감싸는 경우 <a href="{path}#gh-light-mode-only"> 와 같이 href 속성의 맨 뒤에 해당 요소를 붙여주면 됩니다.
<a href="https://github.com#gh-light-mode-only">
<img src="{uploaded image path}">
</a>
<a href="https://github.com#gh-dark-mode-only">
<img src="{uploaded image path}">
</a>
큰 내용은 아니지만 github에서 markdown 활용이 잦은 만큼 유용할 것 같아 작성해보았습니다.
반응형