김찬 연습장 (연구)

분류:

김찬/연습장

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

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

개요

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

그냥 내 연구를 위한 연습장? 메모?장이지만 여러분들에게도 도움 되는 내용이 있을?지도

사이트 1.41.243 업데이트에 관한 고찰...

장점

많은 사용자들이 업데이트 직후 단점만을 걱정하고 있지만, 이번 업데이트에서 장점이 없는 것은 결코 아니다.

---

1. 디자인 관련

일부일 뿐이지만 사이트의 전반적인 디자인이 깔끔하기 보기 좋아졌다. 특히 양쪽 내비게이션 바, 최근 변경과 정보 게시판이 그러하다. 최근 변경 내비게이션 바는 마지막 편집이 정확한 시각으로 나타나지 않고 현재로부터 n초, n분 전으로 나타나도록 바뀌기도 했다.

---

2. 사이트 최상단·최하단 이동 버튼

사이트 우측 하단에 사이트의 최상단과 최하단으로 이동할 수 있는 버튼이 생겼다. 이전에도 사이트 최상단으로 이동하는 버튼은 있었지만 최하단으로 이동하는 버튼은 없었으며, 특히 디자인도 나무위키와 비슷하게 깔끔하게 바뀌었다.

---

3. 편집창 내 미리보기

제이위키는 편집한 내용을 저장하기 전에 미리 보려면 편집창 아래 저장 버튼 옆에 있는 미리 보기 버튼을 눌러야 한다. 이때 편집한 내용이 적용된 본문이 편집창 위에 길게 늘어서서 자신이 편집한 내용만 한눈에 찾아보기 다소 어렵고, 그만큼 스크롤을 여러 번 했다가 다시 편집창으로 돌아오는 과정이 번거로웠다.

그러나 이번 업데이트에서 편집창 상단바 우측에 또 다른 미리 보기 버튼이 생겼다. 이것을 누르면 편집창이 반으로 쪼개져 기존 편집창은 왼쪽에, 미리 보기 화면이 오른쪽에 작게 표시된다. 덕분에 힘들게 스크롤을 하지 않아도 된다는 장점이 생겼다.

물론, 이 미리 보기는 사이트를 새로 로딩하지 않는 미리 보기라서 애니메이션이 추가된 커스텀 접기는 작동하지 않고 전부 펼쳐진 상태로만 보이게 된다.

단점

1. 분류 관련

업데이트 이후 가장 뜨거운 이슈. 기존에는 페이지 최하단에서 본문과 분리되어 있던 분류가 업데이트 이후 본문에 섞여 본문 최상단에 위치하게 됐다. 디자인은 나무위키처럼 바뀌었다!!

뭐, 기본 분류 기능이 나무위키처럼 바뀌었다는 점은 대환영이다. 처음엔 그런 점이 아쉬워서 {{namucat}}을 만들었던 거니까. 하지만 이 경우 다음과 같은 문제 또는 단점이 생긴다.

1. 이미 필자를 포함한 많은 사용자가 자신의 문서 전부 혹은 일부에 {{namucat}}을 쓰고 있다.
   • {{namucat}}은 만들어진 지 꽤 지난 틀이고, 기본 분류가 바뀐 것은 그로부터 약 1년 반이 지난 후이므로 나무위키 형식의 문서 디자인과 분류를 원했던 많은 사용자가 필자가 만든 {{namucat}}을 적극적으로 사용하고 있다. 하지만 이번에 기본 분류의 디자인과 위치가 나무위키처럼 바뀌면서 {{namucat}}과 중복되어 비슷한 디자인의 두 개의 분류 창이 본문 최상단에 함께 보이게 되었으며, 이를 해결하기 위해선 위키 내부적으로 기본 분류를 보이지 않게 하거나 {{namucat}}을 사용한 모든 문서에서 틀을 없애야 한다.
   • 하지만 필자만 해도 위키에 작성한 수백 개의 모든 문서에 예외없이 전부 {{namucat}}을 사용하고 있으며, 다른 사용자들도 이보다 적거나 많을 것이다. 현실적으로 이 틀을 사용하는 모든 사용자가 자신의 모든 문서에서 수백 번의 반복적인 편집을 해가며 틀을 일일이 기본 분류 문법으로 바꾼다는 건 불가능에 가까운 일이다.
   • 그렇다면 다른 방법인 "위키 내부적으로 기본 분류를 보이지 않게 하기"를 고려할 수 있는데, 이 방법도 불가능한 이유가 몇 가지 있다. 아래와 같은 이유로 기본 분류를 조정하기 위해선 미디어위키 엔진이나 운영자 측에서 직접 분류를 조정할 수 있는 기능을 추가해 주기를 기다리는 것밖에 없다.
     1. 위키 환경설정에 분류의 위치나 가시성을 조정하는 항목이 없다. 환경설정을 전부 뒤져봐도 분류 관련 항목은 숨은 분류를 보이게 하는 항목만 있을 뿐 임의적으로 분류의 위치를 최상단 혹은 최하단으로 옮기거나 아예 모든 분류를 보이지 않게 하는 것은 불가능하다.
     2. 브라우저의 F12 개발자 도구를 통해 기본 분류 창을 구성하는 태그나 아이디, 클래스를 조사하여 틀 스타일의 CSS 코딩을 통해 display: none; 또는 visibility: hidden; 등의 방법으로 지울 수 있으리라 기대했지만, 이 기본 분류 창이 틀 스타일 CSS로 간섭할 수 있는 범위 밖에 있다. 틀 스타일 CSS는 사이트 HTML 상에서 mw-parser-output이라는 클래스를 가진 div 안쪽만 간섭할 수 있는데, 이 mw-parser-output 클래스의 부모 요소는 mw-body-content 클래스를 가진 div고, 이 요소의 부모 요소는 mw-body-content 클래스를 가진 article이다. 그리고 기본 분류 창은 이 article의 바로 전에 오는 형제 요소다. 즉 범위가 밖에 있어도 한참 밖에 있다. 위키 내부적으로는 일개 사용자가 기본 분류를 건드릴 수 있는 방법이 아예 없다. → 직후 업데이트에서 해결

        [ 부모·형제 요소 관계 정리 ] ↓ 부모·자식 ↓ → 형 제 → div.catlinks (기본 분류) article.mw-body-content div.mw-body-content div.mw-parser-output (CSS 한계 범위)

2. 기본 분류에는 분류를 블러로 가릴 수 있는 기능이 없다. → 직후 업데이트에서 해결
   • 특정 분류를 블러로 가린다는 것은 사실상 {{namucat}}의 가장 큰 강점 중 하나였다. 하지만 새로 바뀐 기본 분류는 이처럼 분류를 블러로 가릴 수 있는 기능이 없다.
   • 모방해 온 나무위키에서도 분류를 블러로 가리는 기능의 가장 주된 사용처이자 이유는 분류 그 자체가 문서에 있어 스포일러가 될 수 있기 때문인데, 분류가 문서 최상단에 있다면 문서에 접속하자마자 스포일러인 분류가 눈에 들어올 수밖에 없다. 나무위키에서는 서브컬처나 게임, 영화, 드라마 등 다양한 작품을 특히 집중적으로 다루기 때문에 이러한 기능을 추가한 것으로 보인다.
   • 창작 위키인 제이위키에서도 나무위키보다는 덜할지 몰라도 이처럼 분류를 가릴 수 있는 기능이 반드시 필요하다. 또는 분류의 위치를 최하단으로 내리거나. 이 경우 분류를 보기 위해 먼저 본문을 열람해야 하므로 스포일러인 분류를 가릴 필요가 없다.
3. 디자인이 다소 어색하다. → 직후 업데이트에서 어느 정도 해결
   • {{namucat}}은 제작자가 직접 나무위키의 분류 창을 F12 개발자 도구를 통해 디자인에 사용된 정확한 CSS 속성들을 입력한 디자인이다. 즉 나무위키의 분류와 디자인적으로 일치한다.
   • 하지만 새로 바뀐 분류 창은 한눈에 봐도 나무위키의 분류나 {{namucat}}과 비교하여 비슷하기만 할 뿐 일치하지 않으며, 오히려 가장 좌측 '분류' 글자와 첫 분류 사이의 여백이 너무 넓은 등 어색한 면들이 있다.
   • 이 부분은 일개 사용자 제작인 하나의 틀과 달리 사이트 전체의 변경 사항이므로 나무위키의 디자인을 그대로 가져오기엔 저작권 면에서 다소 제한되는 부분일 것이다. 어쩔 수 없는 부분이지만 아쉬운 것 또한 어쩔 수 없다.

---

2. 접기 관련

여기서 말하는 접기란 사용자가 제목을 커스텀할 수 있는 커스텀 접기가 아닌 미디어위키에서 가장 기본적으로 제공하는 mw-collapsible에 관해서다.

업데이트 이전에는 접기의 버튼이 HTML 상에서 <a> 태그, 즉 하이퍼링크와 같은 태그를 사용했다. 하지만 업데이트 이후 이것이 <button> 태그로 바뀌었다. 이게 무슨 문제냐면,

미디어위키 엔진 상에서 <button> 태그에는 :hover, :active, :focus 등 다양한 동작에서 추가적인 스타일링 요소가 있다. 쉽게 말해, 기존의 접기 제목은 마우스를 올리거나 누를 때도 링크와 같이 제목에 밑줄이 쳐지는 정도에서 그쳤지만, 업데이트 이후 접기의 제목은 마우스를 올리면 초록색 배경이 생기고, 누르고 있으면 글씨 색이 바뀌며, 한번 누른 제목에는 두꺼운 검은색 외곽선이 생긴다. 그래도 무슨 말인지 이해가 어렵다면 도움말:위키 문법 문서의 접기 문단에 가서 직접 아무 접기나 눌러보자. 필자의 몇 번의 시도 끝에 이는 틀 스타일 CSS로도 조정이 불가능했다.

나중에 깨달았는데 이건 그냥 필자가 CSS 적용과 틀 수정을 잘못 해서 안 된 거였다. 틀 스타일 CSS로 간단히 해결된다. 뻘짓

---

3. 문단 번호 관련

미디어위키 버전 1.38부터 모든 문단에 일괄적으로 문단 번호가 사라졌다. 이는 업데이트를 진행한 운영자 측에서도 예상하지 못한 문제였고, 어떤 방식으로든 해결할 것이라고.

실제로 업데이트 직후 거의 곧바로 이 문제는 해결되었다. 근데 여기에 왜 써놓은 거예요

---

4. 기타

• <s>, 즉 취소선이 적용된 내용 위에 마우스를 올려도 취소선이 사라지지 않게 되었다. 이는 틀 스타일로 간단히 직접 해결할 수 있으므로 큰 문제는 아니다.
• 문서에 있던 모든 댓글들이 사라졌다!! 이럴 수가?

1.41.243a 업데이트

그리고 얼마 지나지 않아 1.41.243a 업데이트가 이루어졌다. 엔진이나 사이트 상의 커다란 업데이트보다 1.41.243 업데이트의 문제 요소들을 수정하고 디자인적으로 개선한 업데이트에 가깝다. 업데이트 내역은 다음과 같다.

• 미디어위키 1.38에서 제거된 문단 번호 매기기 기능을 복구했습니다.
• 분류와 분류 내용 사이의 간격을 일부 조정했습니다.
• {{블러}} 틀을 이용해 해당 문서에서 분류에 블러 효과를 줄 수 있습니다.
• 틀, 미디어위키 등 이름공간에 그림자가 추가되었습니다.
• 문단 편집이 우측정렬로 변경되었습니다.
• 문단 구분선이 점선에서 선으로 바뀌었습니다. (dash -> solid)
• 각주 이용시 자동으로 가장 아래쪽에 구분선과 함께 각주가 배치됩니다.
• button 방식의 펼치기 접기시 발생하는 주변색 변화효과를 삭제했습니다.
• 소셜프로필의 반응형 업데이트가 있었습니다.
• <h2> 등으로 문단을 구성해도 목차가 보이도록 변경되었습니다.
• 분류를 일반적인 css로 수정할 수 있도록 변경했습니다.
• <s>에 마우스를 올리면 취소선이 사라지도록 변경했습니다.
• 다크모드 지원 범위가 이전 수준으로 확대되었습니다.

기존에 {{namucat}}을 깊이 오래 사용해 온 사용자거나 틀의 제작자라면 알겠지만 디자인적인 면에선 {{namucat}}과 매우 유사해졌다. 이에 따라 제이위키는 나무위키를 모방한 {{namucat}}을 모방한 디자인을 갖게 되었다. (??)

디자인적인 면 외에도 앞서 고찰했던 단점 대부분이 해결되었다. 분류를 블러로 가릴 수 있는 기능 추가, 문단 번호의 부활 등. 하지만 여전히 기본 분류의 위치나 가시성을 조정할 수는 없어서, {{namucat}}을 사용 중인 사용자는 틀을 사용한 모든 문서에서 이 틀을 지워야 하는 소요가 발생했다.

하지만 틀 제작자이자 필자가 깊이 생각해 보니 {{namucat}}에서 분류 창만 없애고(=즉 기본 분류 창만 문서에 보이게 하고) 틀에 내장된 ¹문서 디자인을 나무위키와 유사하게 바꾸기나 ²분류를 간편하게 삽입하는 정도의 기능만 유지하면 굳이 틀을 전부 갈아끼울 필요는 없어 보인다.

이후 몇 번의 추가적인 변경 사항에서 기본 분류를 틀 스타일 CSS로 조정할 수 있게 되면서 기본 분류 창에 맞추고 적응해 나가야 할 필요는 없어졌다.

결론

1.41.243 업데이트나 1.41.243a 업데이트나 전체적으로 제이위키가 나무위키의 기능과 디자인을 따라가려는 모습이 많이 보이는 업데이트였다.

나무위키 형식과 스타일을 좋아하는 필자로서는 환영이지만, 오히려 그 정도가 지나치기 때문에 자칫 제이위키의 특색이 지워지는 게 아닌가 하는 우려도 있다.

그리고 이러한 업데이트 방향의 주요한 원인으로 {{namucat}}의 제작자이자 나무위키 구현 프로젝트의 창시자인 필자의 영향이 적잖게 반영된 것 같아 이 또한 걱정이다. 많은 사용자들이 {{namucat}}을 사용한다는 건 그만큼 나무위키 형식과 스타일을 바란다는 것이고, 그렇기 때문에 사이트가 전체적으로 나무위키와 비슷해져 가면서 본래의 특색을 잃어가는 게 아닐까. 그렇다면 이번 업데이트로 본래 제이위키의 특색을 버리지 않고 편집해 온 사용자들에게는 환영받지 못하는 업데이트가 되는 건 아닐까.

아쉬운 점

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

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

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

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

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

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

보일제목

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

실제 시스템상 제목이 바뀌는 것이 아니며 보이는 제목만 바뀌는 것이다. 즉 다른 문서에서 보일제목을 쓴 문서를 링크할 땐 원래 제목을 링크해야 링크가 된다.

---

제목 안에

• 가능한 것
  • <span> 태그 (하위 속성에 적용 가능한 것이라면 대부분 가능)
  • 각종 글씨 크기 조절 태그
• 불가능한 것
  • <div> 태그
    하지만 <span> 태그는 가능하므로 여기에 display: block;을 적용하면 div처럼 쓸 수 있다. 마찬가지로 줄바꿈할 부분에 아무 속성 없이 block만 적용한 span을 넣으면 <br> 비슷하게 쓸 수 있다.
  • <br> 태그 (줄바꿈)
  • <ruby> 태그 (루비 문자)

  • 테이블

  • [[하이퍼링크]]
  • 틀 스타일에 적용된 CSS
  • [[파일:~~.png]]

---

보일제목은 당연히 한 문서에 하나만 있어야 한다. 두 개 이상 있으면 먼저 온 것만 적용되며 뒤에 온 것들은 오류가 남.

각주 관련

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

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

이렇게 뜬다. ↓

</ref>

---

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

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

---

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

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

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

리스트

개수 한계가 있을까?

• 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;
}

문법 관련

나무마크와 미디어위키의 문법 차이점

기능	나무마크	미디어위키	비고
볼드체	'''볼드체'''
이탤릭체	''이탤릭체''
취소선	--취소선--	<s>취소선</s>
밑줄	__밑줄__	<u>밑줄</u>
위첨자	^^첨자^^	<sup>첨자</sup>
아래첨자	,,첨자,,	<sub>첨자</sub>
글씨 색	{{{#red 글씨 색}}}	{{c|red|글씨 색}}
글씨 크기	{{{+1 글씨 크기}}}	{{fs|14|글씨 크기}}
하이퍼링크	[[하이퍼링크]]
표	||테이블||테이블|| ||테이블||테이블||	[ 펼치기 · 접기 ] {| |- |테이블 |테이블 |- |테이블 |테이블 |}
이미지	[[파일:이미지.png]]
문단	== 문단 ==	==문단==
리스트1	○*○리스트 ○*○리스트 ○*○리스트	*리스트 *리스트 *리스트
리스트2	○1.○리스트 ○1.○리스트 ○1.○리스트	#리스트 #리스트 #리스트
가로줄	----
HTML	{{{#!wiki style="display: inline; background: yellow; border: 1px solid gray;" HTML}}}	<span style="background: yellow; border: 1px solid gray;">HTML</span>
끼워넣기	[include(문서 제목)]	{{:문서 제목}}
	[include(틀:틀 제목)]	{{틀 제목}}
각주	[* 각주]	<ref>각주</ref>
공동 각주	[*A 공동 각주]	<ref name="A">공동 각주</ref>
	[*A]	<ref name="A" />
접기	{{{#!folding 접기 제목 접기 내용}}}	<div class="mw-collapsible mw-collapsed">접기 내용</div>
분류	[[분류:분류 제목]]
문법 무효화	\'''문법 무효화'''	<nowiki>'''문법 무효화'''</nowiki>
넘겨주기	#넘겨주기 문서 제목	#넘겨주기 [[문서 제목]]
주석	## 편집 메모	<!-* 편집 메모 -->
루비 문자	[ruby(글자,ruby=루비)]	<ruby>글자<rt>루비</rt></ruby>

CSS 관련

transform: skew(); 이거 span에선 안 된다. div에서만 된다. 아마 display의 차이일 듯.

---

CSS에서 지원하지 않는 속성 또는 문법

• 변수 var(--variable-one) 등
• background: url(); 구문

기타

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

• <div>
• <span>