도움말:디자인/환경 대응 문서 원본 보기

{{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:디자인<span style="display: block">{{부제| 환경 대응}}</span>}}
{{분류|도움말}}
{{상위문서|도움말:디자인}}
{{도움말}}

{{목차}}
== 개요 ==
이 문서는 자신의 문서가 여러 환경에 대응되는지 확인할 수 있는 체크리스트 형태의 '''도움말'''입니다. 강제성이 주어지지는 않지만, 문서의 가독성을 위해서 따르면 좋습니다.

가장 확실한 방법은 다크 모드와 작은 화면으로 직접 전환해서 문제가 되는 부분을 고치는 것이지만, 대부분 아래의 경우에 해당하니 귀찮은 작업을 줄일 수 있습니다.

== 다크 모드 ==
* '''투명 배경에 기본 글씨 색(<code>var(--text)</code>)이 아닌 검은색(<code>#000000</code>, <code>black</code>, <code>#000</code>) 텍스트를 설정했는지'''
** 표나 틀에서 많이 등장합니다. 틀을 제작할 때 자연스럽게 검은색을 적용하지 않았는지 확인하면 좋습니다.
* '''그림자 등에서 반투명(<code>{{반투명|#ff0000|8%}}</code>, <code>#ff000010</code>)이 아닌 고명도(<code>#ffdddd</code>)를 설정했는지'''
* '''.jpg 확장자 등으로 인해 투명하지 않은 이미지가 불가피하게 들어갔는지'''
** iOS와 같은 경우 사진첩에 투명한 이미지가 저장되지 않기도 합니다. 파일 앱을 통해 업로드하심을 추천합니다.
* 투명 배경에 어두운 글씨 색을 설정했지만 다크모드 대응 틀이 적용되지 않았는지
** <style> 안에서는 <code><nowiki>{{adt|#000000}}</nowiki></code>으로 사용할 수 있고, <nowiki>{{style}}</nowiki> 안에서는 <code>##000000</code>로 사용합니다. 
** 적용하면 자동으로 다크 모드에서 높은 명도로 표시합니다.

== 모바일 ==
* '''표나 틀의 폭(<code>width</code>, <code>w</code>)에 350px 이상의 값을 적용했는지'''
** 작은 화면에서 화면을 초과하기도 합니다. 따라서 <code>width</code>(<code>w</code>)는 <code>100%</code>로 설정하고 <code>max-width</code>(<code>maxw</code>)를 <code>500px</code>과 같이 설정하면 모바일에서는 화면을 꽉 채우고 PC에서는 정해진 규격으로 표시됩니다.