명진 — 2024-09-11 오전 1:41
확인했습니다. https://libertyga.me/wiki/사용자:명진/대문 도 참조 부탁드립니다.
리버티게임
사용자:명진/대문
이 문서는 리버티게임:대문 문서에 틀처럼 인용된 형태로 포함되어야 합니다! 그리고 이 문서 역시 관리자만 편집하도록 보호하는 것을 잊지 마세요!
Senouis — 2024-09-13 오전 12:13
지금 작성한 부분 중 장르별 인기 게임은 원래는 탭보다는 제이위키 인기 소설처럼 스크롤되는 방식이었으면 했지만
그쪽 구현을 보니 별도의 HTML파일을 만들고 그걸 임베딩했더군요
그래서 추가 개선할 만한 요소로 연기했습니다
그리고 가로폭이 모바일 브라우저 종류나 해상도에 따라 미묘하게 달라지니 참 골치아프네요
명진 — 2024-09-13 오전 12:16
그래서 반응형 웹 디자인이 있습니다.
Senouis — 2024-09-13 오전 12:17
사파리는 일렬로 나오는 장르 탭이 모바일 크롬에서는 하나가 밀려서 두 줄이 되고...
반응형 디자인...꽤 많이 연습해야겠네요
명진 — 2024-09-13 오전 12:18
특정 폭 미만 및 이상일 시에 따른 레이아웃 배치를 조절할 때 사용됩니다.
Senouis — 2024-09-17 오후 4:06
오늘은 스킨 별로 상단 고정 메뉴 위치를 조절했습니다. 타임리스/벡터 레거시/벡터 2022 별로 적용했습니다.
나중에 새 스킨을 들여온다면 그것도 따로 스타일 전용 소도구로 대응하려고 합니다
Senouis — 2024-09-17 오후 4:21
그리고 디자인 가이드를 문서에다 같이 적어놓았으며 이걸로 최종 수정을 하려고 하는데, 혹시 가이드에서 부족한 부분이 있을까요?
명진 — 2024-09-18 오후 4:39
리버티게임토론:대문 거기가 공식 대문 디자인 창구입니다.
명진 — 2024-09-19 오전 11:31
GOG.com의 경우 특정 문단은 2단으로 표시되네요. 제가 괜히 신규 대문의 일부 문단을 2단에서 1단으로 변경한 것 같습니다만 거긴 특별한 모양을 표시하지 않는다는 점이 있습니다.
그리고 좁은 화면에서는 1단, 넓은 화면에서는 2단으로 표시됩니다.
명진 — 2024-09-22 오전 12:34
이미지
명진 — 2024-09-22 오전 1:34
그림의 투명 배경을 채워줄 그라데이션과 게임 제목과 요약을 표시하는 그라데이션은 별개로 취급하므로 방향은 일치할 필요가 '없습니다'. 즉 그라데이션 방향이 달라도 된다는 것입니다.
hsl0 — 2024-09-24 오후 9:23
장르별 인기 게임의 탭 배경을 검정색, 선택한 배경을 녹색으로 바꿔봤는데 어떤가요?
이미지
Chabiytb0792 — 2024-09-24 오후 9:24
오 괜찮네요
명진 — 2024-09-24 오후 9:24
왠지 Windows 8식 디자인 같아 보이지만 깔끔합니다.
hsl0 — 2024-09-24 오후 9:25
리버티게임 로고에서 배경이 검정색이고 포인트 색상이 녹색인 점에서 착안하였습니다. 기존에 선택된 색상이 흰색인 게 눈에 잘 안띄기도 해서 이 부분에 대한 개선도 겸하고요.
다만 모바일에서 너무 안보이는 문제가 있어 이에 대한 개선도 진행하고 있습니다
정확히는 안보이기보다는 이상한 것에 가깝지만요
hsl0 — 2024-09-24 오후 9:51
그럼 이렇게 저장해보죠
이렇게 검은 테두리를 넣는 건 어떨까요? 검은 상자 안에 여러 탭 버튼이 있고 선택된 부분만 네모낳게 강조되는 느낌이죠
이미지
hsl0 — 2024-09-24 오후 9:58
이건 모바일 버전입니다
이미지
Chabiytb0792 — 2024-09-24 오후 10:09
이게 더 깔끔하고 가독성이 좋은 것 같기도 하네요
명진 — 2024-09-24 오후 10:19
이게 더 낫습니다.
hsl0 — 2024-09-24 오후 10:21
그럼 이걸로 하죠
Senouis — 2024-09-24 오후 11:50
저도 찬성입니다!
Senouis — 2024-09-25 오전 1:15
그런데 지금 벡터 2022를 쓸 때는 상단 메뉴가 정상적인데, 타임리스나 벡터 레거시는 엉뚱한 형태로 보입니다
현 상단 메뉴 디자인으로 간다면 틀 CSS 속성을 소도구 쪽으로 옮기는 것이 어떨까요? 스킨별 CSS 소도구 문서는 이미 만들어 두었습니다
hsl0 — 2024-09-25 오전 1:20
제가 확인해봤을때는 이상한 점을 못찾았지만, 타임리스 스킨을 모바일 화면으로 보면 본문 영역이 비정상적으로 얇게 나오는군요. 그런데 이건 safemode를 적용시켜도 발생하는 현상이라 스킨 문제로 추정하고 있지만, 리버티게임:대문/신규 대문 (2024) 문서에서만 발생하는 문제라서 또 잘 모르겠네요.
Senouis — 2024-09-25 오전 1:23
원인 찾았습니다.
'* > :has(.gamecards)' 셀렉터가 문제네요
게임카드/CSS 문서 쪽에 있을 겁니다
벡터가 아닌 타임리스면 이게 더 상위의 엘리먼트에 적용되나봅니다
hsl0 — 2024-09-25 오전 1:25
꼭 저렇게 광범위하게 상위 요소를 지정해야 했을까 싶긴 하네요 올바른 활용으로는 보이지 않는 코드인 것 같습니다
Senouis — 2024-09-25 오전 1:27
BANIP님이 타임리스 스킨을 생각하지 못하고 추가하신 것 같네요 해당 부분 고쳐보겠습니다.
hsl0 — 2024-09-25 오전 1:27
개발자 도구에서 해제해 봤을 때는 큰 차이가 보이지는 않지만, 그럴수록 원 작성자에게 해당 코드의 목적을 정확히 알 필요가 있을 것 같습니다
그래도 일단은 해당 부분을 주석처리하는 것으로 임시 조치해야겠군요
Senouis — 2024-09-25 오전 1:28
잠시만요
개발 서버에 제가 메모한 게 있네요
해당 CSS 속성은 1.40 이상의 벡터 스킨에서도 문제를 일으켜서
hsl0 — 2024-09-25 오전 1:29
게임 목록에서 해당 코드를 해제해보니 데스크탑 환경에서 2열로 보이던 게 모바일 환경처럼 1열로만 뜨는 것으로 보아 2열 정렬을 위한 코드로 보이네요.
Senouis — 2024-09-25 오전 1:30
2열 정렬이 필요하다면
그냥 display:grid가 낫지 않을까요?
안 그래도 현 버전은 간혹 2열 게임 카드의 행이 엇갈릴 때가 있어서
1.41 넘어가기 전에 반드시 고치고 가려고 했는데
타임리스까지 이러는 걸 보니 바로 고치는 게 맞겠습니다
hsl0 — 2024-09-25 오전 1:31
다단 나누기를 위한 css 속성으로는 column-count 속성이 있군요
.gamecards 에 column-count: 2를 적용하니 간단히 대체되었군요
Senouis — 2024-09-25 오전 1:33
그래도 셀렉터는 바꿔야겠네요.
덤으로 데탑 타임리스는
이런 상태입니다
이미지
hsl0 — 2024-09-25 오전 1:34
문제 부분 주석처리+column-count 적용하여 수정 완료했습니다
hsl0 — 2024-09-25 오전 1:36
이거는 벡터 2022에서 작업했는데, 100%가 상위 요소의 비율에 정확히 맞지 않더라고요. 게다가 사이드바를 펼치고 접고에 따라서 왔다갔다까지 하니 폭을 딱 맞추고 줄바꿈 막는 건 포기하고 그냥 대충 적당한 수치 넣은겁니다. 넘어가지 않게 수치를 낮추면 여백이 좁아서 탭 사이가 구분이 잘 안되고 못생겼거든요.
도대체 왜 폭이 안맞는지 모르겠어요
--CSS는 너무 어려워--
Senouis — 2024-09-25 오전 1:38
맞습니다. 대문 트리 구조가 워낙 복잡하고, CSS 속성이 확장 기능 + 커먼CSS + 스킨별 소도구+ 태그 내 스타일로 흩어져 있는 것이 문제 같다고 생각되네요
그냥 CSS 확장 기능 구문을 과감하게 신규 대문에서 빼고
스킨별 소도구 쪽에 몰아 넣는 것이 어떨까요?
저도 useskin으로 왕복하면서도 골치가 아프더라고요
모노랑 미네르바 노이에를 빼길 진짜 잘 한 것 같습니다
hsl0 — 2024-09-25 오전 1:40
대문에만 적용되는 CSS는 대문에 쓰는게 맞다고 생각합니다. 스킨 구분은 body 요소의 skin-* 클래스로도 가능해요
Senouis — 2024-09-25 오전 1:41
그럼 docTop id는 추후 게임 제작 쪽에도 쓰일 수 있으니 스킨별 소도구에 두고
docTopWithoutHeader id는 대문 CSS로 통일할까요?
hsl0 — 2024-09-25 오전 1:41
스킨별 소도구는 모든 사이트에 적용되는 코드만 넣는게 좋아요. 너무 방대해지면 불필요한 코드가 사이트 로딩속도에 영향을 줍니다
Senouis — 2024-09-25 오전 1:43
그래서 docTop id에 대문 설계 이외에 재활용 여지를 주자는 겁니다
hsl0 — 2024-09-25 오전 1:43
리버티게임 메뉴에 적용되는 CSS 말하는거죠?
Senouis — 2024-09-25 오전 1:43
맞습니다
hsl0 — 2024-09-25 오전 1:43
그거는 리버티게임 메뉴 문서에 넣으면 되지 않나요?
Senouis — 2024-09-25 오전 1:43
지금 거기도 상단 부착을 준비하고 있어요
그렇긴 한데 나중에 상단 메뉴 부착을 원하는 게임이 나올 가능성이 있다고 생각해서
hsl0 — 2024-09-25 오전 1:44
범용적으로 쓸 수도 있긴 하겠네요
Senouis — 2024-09-25 오전 1:44
그래서 스킨 소도구에 짧게나마 옮긴 겁니다
hsl0 — 2024-09-25 오전 1:44
그러면 글로벌 CSS에 넣어도 괜찮기는 하겠네요
그런데 대안도 있습니다. 별도의 CSS 문서를 만들고 틀처럼 끼워넣을 수 있게 해서 필요한 문서에만 포함시키도록 모듈화를 시키는 방법도 있습니다.
주석/툴팁 계열 틀에 이미 이 기법을 적용시켰어요
Senouis — 2024-09-25 오전 1:47
그러면 아무래도 상단 틀 메뉴를 만들 때 CSS에서 스킨을 인식하는 방법에 대해 도움말에 서술할 필요가 있겠네요
CSS 관련 도움말에 잠깐 주석 문법으로 기록하겠습니다
hsl0 — 2024-09-25 오전 1:48
이거는 위키문법을 응용한거라서 CSS 문법이 아니기는 합니다
CSS에 @import 문법도 있기는 한데 미디어위키에서 합쳐서 한번에 보내지 못하고 브라우저에서 CSS를 먼저 받고, 해석할 때 import를 발견하면 그때서야 다시 요청하는 방식이라서 한번에 불러올 수 있는 틀 문법을 응용한겁니다.
틀:주석/CSS 문서의 맨 아랫줄입니다. 이렇게 onlyinclude 영역을 만들고 그냥 틀로 호출하면 css로 다시 불러오도록 #css 함수를 사용하고, 틀:툴팁/CSS의 내용도 같이 불러오도록 하는 것입니다. 틀:툴팁/CSS 문서에도 <onlyinclude>{{#css:틀:주석/CSS}}</onlyinclude> 구문이 있습니다.
/* <onlyinclude>{{툴팁/CSS}}{{#css:틀:주석/CSS}}</onlyinclude> */
CSS 문서에 이런 코드 한 줄만 넣으면 CSS를 틀처럼 불러올 수 있습니다.
Senouis — 2024-09-25 오전 1:53
잠시만요
이거 게임카드가 지금 완전히 깨져서 나오는 것 같은데...
잠깐 롤백할까요?
아니다
지금 콘솔에 MIME 타입 오류가 나오네요
hsl0 — 2024-09-25 오전 1:58
css 함수가 CSS 코드를 URL로 잘못 해석했나 보네요
명진 — 2024-09-25 오전 1:58
개발자 도구의 그 콘솔이죠?
hsl0 — 2024-09-25 오전 1:58
틀:게임카드/css에도 이 방식을 써서 수정해봤습니다
예상치 못한 부분이 깨지네요. 롤백했습니다.
Senouis — 2024-09-25 오전 2:01
음...너무 길다 싶으면 오버플로우 비슷한 것이 생기나 싶기도...
CSS 확장 기능 내부의 문제일 수도 있겠고요
hsl0 — 2024-09-25 오전 2:01
gamecards에 column-count를 적용해야 되는데 실수로 gamecard에 적용했네요...
다시 수정했습니다
Senouis — 2024-09-25 오전 2:04
이게...지금 '2열' 대응이 안 되는 것 같은데, 느낌이 쌔하군요
지금 CSS 확장 기능, CSS 문서, 커먼 CSS 중에 뭐가 우선순위가 높은지 애매해서 명진님의 초안에서 공개 의견 받기 전까지 수정을 거듭했었는데
스킨별 소도구 CSS가 가장 우선 순위가 높고, CSS 확장 기능이 태그 내 스타일보다도 우선순위가 낮은 느낌입니다.
hsl0 — 2024-09-25 오전 2:07
셀렉터는 완전히 똑같나요?
Senouis — 2024-09-25 오전 2:08
CSS 확장 기능 vs 태그 내 스타일은 확실히 태그 쪽이 확장 기능 설정을 찍어 누릅니다
아
원래 그렇군요
태그 쪽 inline이 제일 우선 순위가 높네요
그럼 CSS 확장 기능 vs 스킨 소도구 vs common.css가 문제인데...
이쪽은 일단 내일 생각할게요
hsl0 — 2024-09-25 오전 2:13
이건 미디어위키나 브라우저가 정하는 거라서 서로 충돌하면 셀렉터로, 정 안된다면 !important로 찍어눌러야죠
아니면 css에 layer 기능이 새로 추가되었는데 한번 알아보시는 것을 추천드립니다.
그래도 스킨 소도구는 우리가 건들 수 없어서 적용하기는 어렵겠지만요
언젠가 여유가 되면 common.css, 스킨별 사이트 css, 소도구별 css, 틀별 css에 layer를 적용하면 나중에 편해지긴 하겠네요
미디어위키와 스킨의 css는 phabricator에 싹싹 빌 수밖에 없고요
명진 — 2024-09-25 오전 2:21
본래 저는 사이트 대문에 시맨틱 태그를 적용하고 싶었습니다만(header, section, footer 등) 미디어위키가 이를 지원하지 않아 소스를 보기에는 불편해 보일 수 있는 div를 사용하였습니다.
Senouis — 2024-09-25 오전 2:23
혹시 그건 나중에 도전과제 API 서버 만들 때 부수적으로 리버티게임 + 리버티책 통합 소개 페이지를 만들려고 하는데 그때 적용하는 것이 어떨까요? 지금 리액트 연습을 겸해 조금씩 준비하고 있습니다.
혹시 그걸 본격적으로 만들기 시작하면 참여하실 생각 있으실까요?
명진 — 2024-09-25 오전 2:25
그건 HTML Living Stendard의 일부라서 리엑트와는 관련이 없습니다. 저는 LibertyEngine에서는 지원할지 모르겠어요.
일단 지저분해도 이러한 부분을 각주로 남기겠습니다.
hsl0 — 2024-09-25 오전 2:30
section 태그의 경우 미디어위키에서 지원해달라는 요청(https://phabricator.wikimedia.org/T25932) 이 있기는 한데 특정 확장기능의 파서 태그와 충돌해서(https://phabricator.wikimedia.org/T32597) 도입이 지연되는 것 같습니다
