연습장:Kimchan/연구: 두 판 사이의 차이

146번째 줄: 146번째 줄:
{{pre2|lang=css|line=on|table {
{{pre2|lang=css|line=on|table {
margin: 0.8rem 0;
margin: 0.8rem 0;
border: 1px solid #e1e8ed;
background: #ffffff;
background: #ffffff;
}
}
168번째 줄: 167번째 줄:
th.headerSort {
th.headerSort {
padding-right: 1.5rem;
padding-right: 1.5rem;
}
}}
{{hr|none|color=black}}
infobox 클래스에 적용된 기본 레이아웃
{{pre2|lang=css|line=on|table {
border-collapse: separate;
border-radius: 0.35rem;
font-size: 13px;
}
caption {
font-size: 1.2rem;
padding: 0.2rem 0;
font-weight: bold;
text-align: center;
}
td {
border: 1px solid #e1e8ed;
padding: 0.3rem 0.6rem;
}
th {
padding: 0.3rem 0.6rem;
border: 1px solid #e1e8ed;
background: #f5f8fa;
font-weight: bold;
text-align: center;
}
}
}}
}}

2023년 7월 6일 (목) 10:16 판

경고: "김찬 연습장 <span style="font-size:14pt;"><span style="font-weight:normal;">(연구)</span></span>" 표시 제목은 먼저번의 표시 제목 "연습장:Kimchan/연구"을 덮어씁니다.

 틀 연구에 대한 내용은 김찬 틀 연습장 문서를 참고하십시오.

김찬 연습장
연습장
메모 낙서 노트 연구 공부 모듈
CSS Lua

개요

위키 문법 및 시스템과 기능을 연구하고 그에 대해 정리하는 연습장입니다.

아쉬운 점

미디어위키! 우리도 <colgroup>이나 <colbgcolor>, <colcolor> 씁시다! 왜 행 방향은 되는데 열 방향은 안 되는가!

접기가 기본적으로 접혀 있었으면 좋겠다. mw-collapsed 클래스나 커스텀 애니메이션 접기 같은 간접적인 방법 말고. 얘넨 원래 펼쳐져 있는 걸 강제로 접은 거라 문서 로딩할 때 잠깐 펼쳐진 게 보인다. <details>나 {{{#!folding }}}처럼 그냥 시스템 자체부터 접혀 있었으면 좋겠다.

모바일에서도 각주 말풍선 제대로 활성화해 줘라! 아주 가끔만 되고 대부분은 그냥 각주 목록으로 이동시켜 버린다. 그 수많은 각주 중에 찾아 읽어야 하고 다시 눌러서 본문으로 이동해야 한다. 불편하구만.

{{MT}}가 필요없는 시대가 왔으면 좋겠다. 그러니까 모바일에서도 너비 미지정 표가 100%로 보이지 않았으면 좋겠다. 그리고 왜 모바일 표는 상단 여백 0.8rem이 없지?

{{}} 이건 어케 쓰는 거냐? 나름 위키 문법이랑 CSS 공부 많이 했다고 생각했는데 얜 아직도 모르겠다. 뭐가 문제고 차이길래 리브레에선 되는 게 제이에선 안 되는 걸까?

문서 캐시가 바로 반영되지 않는 게 슬프다. 이를 테면 틀을 수정했거나 파일의 새 판을 올렸을 때다. 그나마 전자는 Alt+⇧ Shift+P로 새로고침하면 바로 반영이 되지만, 후자는 PC에서조차 Ctrl+R을 여러 번 눌러도 안 될 때가 많다.

보일제목

{{보일제목}} 또는 {{DISPLAYTITLE}}은 뒤에 콜론을 붙이고 제목으로 보일 내용을 적으면 그 내용이 문서의 제목으로 보인다.

실제 시스템상 제목이 바뀌는 것이 아니며 보이는 제목만 바뀌는 것이다.


제목 안에

각주 관련

각주 안에 각주를 넣을 시 뒤에 오는 닫는 문법에 오류가 나 버린다.

<ref>각주<ref>안의 각주</ref></ref>

이렇게 뜬다. ↓

인용 오류: <ref> 태그를 닫는 </ref> 태그가 없습니다</ref>


각주 안에 접기를 넣을 시 문서 최하단 각주 목록에서는 접기가 작동하지만 각주 말풍선 기능에서는 작동하지 않는다.

{{ref|{{folding|id=folding-in-reference|접기}}}}

[1]


각주 안에 표를 넣을 수 있을까?

<ref>
{|class="wikitable"
|-
|테스트||테스트||테스트
|-
|테스트||테스트||테스트
|-
|테스트||테스트||테스트
|}</ref>

[2]

잘 된다. 대신 레이아웃이 좀 달라지며 각주 말풍선의 너비가 너무 좁아서 안 이쁘다. 이것도 최하단 각주 목록에서는 괜찮다.

리스트

개수 한계가 있을까?

  • 1단계
    • 2단계
      • 3단계
        • 4단계
          • 5단계
            • 6단계
              • 7단계
                • 8단계
                  • 9단계
                    • 10단계
                      • 11단계
                        • 12단계
                          • 13단계
                            • 14단계
                              • 15단계
                                • 16단계
                                  • 17단계
                                    • 18단계
                                      • 19단계
                                        • 20단계
  1. 1단계
    1. 2단계
      1. 3단계
        1. 4단계
          1. 5단계
            1. 6단계
              1. 7단계
                1. 8단계
                  1. 9단계
                    1. 10단계
                      1. 11단계
                        1. 12단계
                          1. 13단계
                            1. 14단계
                              1. 15단계
                                1. 16단계
                                  1. 17단계
                                    1. 18단계
                                      1. 19단계
                                        1. 20단계

일단 둘 다 20단계까지도 문제없다. 대신 너무 길면 짤린다! 특히 모바일에서 주의!

테이블

wikitable이 모바일과 PC에서 조금 다르다.

PC에서는 테이블의 위아래 전부 0.8rem의 margin이 있지만, 모바일은 위가 없고 아래 여백만 있다.

모바일에서는 표의 너비 지정을 하지 않으면 무조건 100%로 보인다.


wikitable 클래스에 적용된 기본 레이아웃

table {
	margin: 0.8rem 0;
	background: #ffffff;
}
caption {
	font-size: 1.2rem;
	padding: 0.2rem 0;
	font-weight: bold;
	text-align: center;
}
td {
	padding: 0.3rem 0.6rem;
	border: 1px solid #e1e8ed;
}
th {
	padding: 0.3rem 0.6rem;
	border: 1px solid #e1e8ed;
	background: #f5f8fa;
	font-weight: bold;
	text-align: center;
}
th.headerSort {
	padding-right: 1.5rem;
}

infobox 클래스에 적용된 기본 레이아웃

table {
	border-collapse: separate;
	border-radius: 0.35rem;
	font-size: 13px;
}
caption {
	font-size: 1.2rem;
	padding: 0.2rem 0;
	font-weight: bold;
	text-align: center;
}
td {
	border: 1px solid #e1e8ed;
	padding: 0.3rem 0.6rem;
}
th {
	padding: 0.3rem 0.6rem;
	border: 1px solid #e1e8ed;
	background: #f5f8fa;
	font-weight: bold;
	text-align: center;
}

기타

틀 안에서 먹통이 되는 문법
이유는 나도 모르겠다.

  • <div>
  • <span>
  1. [ 펼치기 · 접기 ]
    접기
  2. 테스트 테스트 테스트
    테스트 테스트 테스트
    테스트 테스트 테스트