본문에 적용되는 디시 CSS
- div, p, table, td, ul, b { margin:0; padding:0; border:0 }
- reset.css가 본문 태그의 기본 여백을 전부 지웁니다. 간격은 직접 지정해야 생깁니다.
- .writing_view_box { line-height:1.5 }
- 본문 기본 줄간격입니다. 13px 글자에서 19.5px이 됩니다.
- table { font-size:12px; font-family:돋움 계열 }
- reset.css가 표에 글자 크기와 글꼴을 직접 겁니다. 바깥에서 지정한 값이 표 안으로 상속되지 않습니다.
- td { padding:2px 4px; border-top:1px solid #eee; vertical-align:middle; color:#333 }
- 전역 규칙이라 본문 안의 표 칸에도 그대로 걸립니다. 첫 행만
tr:first-child td로 윗줄이 없습니다.
- .view_content_wrap .writing_view_box td { text-align:left; font-size:13px }
- 표 칸 글자는 13px로 되돌아가고 왼쪽 정렬로 고정됩니다.
- table { table-layout:fixed }
- 첫 행의 칸 너비가 표 전체를 결정합니다. 2단 배치에서 <td width>가 잘 먹는 이유입니다.
- ol, ul { list-style:none }
- 목록 표시가 꺼집니다. 다만
.write_div > ul과 .write_div > table ul에서는 다시 켜집니다.
- .write_div div { padding-bottom:5px }
- 본문 안의 모든 div 아래에 5px이 더 붙습니다. padding을 직접 지정하면 사라집니다.
- .write_div { width:900px; overflow:hidden }
- PC 본문 칸이 900px로 고정되어 있습니다.
야간모드는 색을 바꾸는 게 아니라 반전입니다
- .darkmode .write_div { filter: invert(100%) }
- 디시는 본문 전체를 뒤집습니다. 그래서 밝은 바탕에 진한 글씨로 쓴 글은 저절로 어두운 바탕에 밝은 글씨가 되고, 읽히는 정도는 주간과 같습니다. 대신 채도가 있는 색은 보색으로 바뀝니다.
- .darkmode .write_div img, video, iframe, embed { filter: invert(100%) }
- 이미지와 영상만 한 번 더 뒤집어 원래대로 되돌립니다.
- .darkmode td { color:#ccc }
- 표 칸에 색을 직접 걸어 상속을 끊습니다. 반전을 거치면 #333이 되므로, 색을 안 적은 표 칸의 글자는 야간모드에서만 어두워집니다.
<td>에 color:inherit을 붙이면 해결됩니다.
- .darkmode .lnk { color:#fda145 }
- 주황으로 적어 두었지만 반전을 거치면 #025eba가 되어, 주간모드의 #0066cc와 거의 같은 파랑으로 보입니다.
- @media (-ms-high-contrast) { … color:#aaa!important }
- 본문 글자색을 #aaa로 덮는 규칙이 dark.css에 있지만 인터넷 익스플로러 전용 조건 안에 들어 있어, 요즘 브라우저에서는 적용되지 않습니다.
이 재현이 맞는지 확인한 방법
실제 배포글(268730) 본문을 디시의 진짜 CSS 7개를 건 문서와 이 미리보기에 각각 넣고, 헤드리스 브라우저로 요소 344개의 계산된 스타일 36항목과 위치·크기를 전부 맞대었습니다. 주간과 야간 모두 차이 0으로 일치합니다.
대비 검사는 요소의 배경을 부모까지 거슬러 흰 바탕 위에 합성한 다음 글자색과의 명암비를 냅니다. 3:1 미만이면 경고입니다. 야간모드는 이 화면의 반전이므로 따로 재지 않습니다.
실제 글 대조는 뤼튼 여성향 미갤의 확장프로그램 배포글 두 편(268730·260085)을 기준으로 삼았습니다. 두 글 합쳐 flex·grid·border-radius·box-shadow·linear-gradient가 한 번도 쓰이지 않았습니다.
글쓰기 화면과 올라간 글은 다릅니다: 디시 에디터는 .note-editor .note-editable table td { border:1px solid #ececec } 로 표의 모든 칸에 안내용 선을 그립니다. 편집 중에는 칸이 보이지만 올리고 나면 사라집니다. 글에 선을 남기려면 <td> 에 테두리를 직접 적어야 합니다. 이 미리보기는 올라간 글 쪽을 재현합니다.
미리보기의 한계: 이미지를 못 불러오면 자리 표시로 대체합니다. 모바일은 폭만 재현하며, 적용한 CSS는 PC판 기준입니다.