스타일쉬트논의

마지막으로 [b]

내용출력

로그인[l]

목적: UseModWiki 의 출력 html 의 각 요소들에 class 를 지정을하여, 스타일쉬트를 변경하는 것 만으로 출력의 외관을 바꿀 수 있게 함 (아래 Notes 를 참조)

... 이 자리에는 ext 버전에서 출력할 때 나오는 각종 태그의 클래스들의 목록이 적혀 있었습니다만, 소스를 고치면서 클래스가 추가,삭제,변경이 될 때마다 이 페이지를 같이 반영하는 것이 쉽지 않아서 지웁니다.

wiki/wiki.css 파일이 현재 배포되는 tar.gz 파일에 있는 css 파일이니 이것을 참조하세요

-- Raymundo 2007-2-23 5:35 pm

Notes

(UseModWiki소스수정/사용자의견에 나온 얘기를 이곳으로 옮겼습니다.)

UseMod의 경우 소스를 받아가서 원하는 모양으로 고치는게 쉬운 일이 아닙니다. 스타일만 고치면 된다고 하지만, 코드를 뒤져가면서 원하는 내용을 출력하는 부분을 찾아서 고치는게 쉬운 일이 아니죠. 요소를 정리해서 코드상에서는 스타일을 지정하는게 아니라 클래스나 아이디만 지정해주고, CSS에서 해당 클래스에 대한 속성을 정해주면 되게 고쳤으면 합니다.

저는 대강 클래스로 지정해서 쓰고 있긴 합니다만, 이미 Raymundo님 소스랑 너무나 멀어진 상태이기 때문에... -_-; 그대로 적용하는건 무리가 있을 것 같고요. 서로 필수적인 요소에 대해서 기본적인 클래스 이름을 정해두면 CSS도 호환성이 좋아지지 않을까 생각합니다. http://www.usemod.org 에서도 관련 글이 있기는 하지만, 참고할 정도이지 제가 원하는 수준은 아닌 것 같더군요.

참고로 제 소스에서는 대강 다음과 같은 클래스들을 만들어서 쓰고 있습니다.

A.inter	interwiki 전용 링크 스타일
A.outer	일반 외부 링크 스타일
TABLE.wikitable, ...	위키에서 \|\| 기호를 써서 만드는 테이블에 적용되는 스타일
TABLE.gotobar, ...	위쪽 메뉴바에 적용되는 스타일
TABLE.calendar, ...	달력 매크로에서 사용하는 스타일

대강 이정도 클래스를 추가로 정해두고 소스에서 사용하면 위키를 알록달록하게 만드는데 일조를 할 것 같습니다. :-)

-- 조프 2003-2-20 1:57 pm

맞아요, 사용자 테마 수준까지는 안 되어도, 바탕화면 배색 수준은 충분히 될 겁니다. 위 테이블처럼, 요소에 대한 분류가 생각날 때마다 추가해 두었다가 한꺼번에 바꾸면 좋겠네요. 그런데 class 란게... html 에 붙일 수 있는 모든 태그에 다 붙일 수 있나요? div 라던가 심지어 p 라던가..

-- Raymundo 2003-2-20 2:03 pm

네, 잘 됩니다. http://jof4002.net/wiki.css 를 보시면 DIV.toc라는 클래스를 만들어놨습니다. 저 클래스를 쓰면

EveryDayLink 처럼 화면 오른쪽에 나오게 되지요. (원래는 스크롤을 해도 항상 저 자리에 있어야 합니다만, IE는 저 속성을 제대로 처리를 안해서 같이 스크롤 되어버립니다. 어쨌든.) DIV, P, SPAN 등에서도 잘 사용할 수 있습니다. css로 정해두면 BODY에는 배경을 깔고 테이블에는 그냥 바탕색을 사용한다거나 하는 일도 쉽게 할 수 있지요.

우와 TOC 굉장해요!!!

-- Nyxity 2003-2-20 3:32 pm

: 예 좋죠. 텍스트 내용을 가려버리기 때문에... 쓸지 말지 잘 정해야 합니다.
-- 조프 2003-2-20 6:18 pm

그냥 이참에 템플릿을 만들어버리는게 낫지 않을까요?

-- Bab2 2003-2-20 9:40 pm

저 같은 게으르니즘에 빠진 사람에게는 벅찬 제안이군요. -_-; Bab2님이 하신다면 말리지는 않겠습니다. :-)

-- 조프 2003-2-20 11:08 pm

: 헉 ^^;
-- Bab2 2003-2-21 12:53 pm

상관없는 얘기입니다만, 모인모인은 ||<셀색깔> 내용 || 이렇게 하더군요.

-- Bab2 2003-2-24 9:56 pm

다른 패치 (변경내역 매크로를 제외하고는 딱히 손 댈 것이 떠오르지도 않습니다만) 를 건드리기 전에 이것을 먼저 해버려야 두고두고 편하겠다는 생각이 드네요. 위에 목록에 있는 거 말고도 생각나는 대로 죄다 적어 주세요~

-- Raymundo 2003-2-28 2:12 am

전 기다리고 있다가 덥썩 받아가야겠네요 ^^

-- Bab2 2003-2-28 5:52 pm

목빠지게 기다리는 중 :)

-- Nyxity 2003-2-28 11:10 pm

목이 빠지게 기다리셔도 좋고, 덥썩 가져가셔도 좋은데, 뭐 빼먹은 거 없는지 좀 봐주시라니깐요~ :-) 그리고 CSS 에 쓸 수 있는 각종 속성들 (margin 이라든가, 등등..) 을 일목요연하게 테이블로 만들어 둔 문서 같은 거 있으면 링크 좀 달아 주세요~ 클래스 구분은 반 정도 해 놨는데 정작 각 클래스에 넣을 만한 속성을 몰라서 결국 모양이 그대로라는 슬픈 사연이... ㅠ,.ㅠ

-- Raymundo 2003-3-1 12:04 am

: CSS 홈페이지에 있는 specification을 보셔도 되지만... -_-; [TopStyle]이라는 윈도우용 프로그램이 있습니다. CSS 편집기인데, 어떤 태그에 어떤 속성을 정의할 수 있고, 그 속성이 화면에 어떻게 나오는지 확인할 수 있으며, 어떤 브라우저에서 사용가능/불가능한지를 보여줍니다. 유료이며, 평가용으로 받으면 25번 실행해볼 수 있습니다. ... 라고 해도 색깔, 배경, 테두리, 여백... 정도로 모양이 결정되지 않나요? :-) 프로그램 자체는 꽤 괜찮더군요.
-- 조프 2003-3-1 12:58 am
: 아래링크중에 캐나다사이트정도만 참고해도 충분할거 같네요. 우웅.. 그럼 전 계속 목빼고.. ^_^a
-- Bab2 2003-3-1 1:02 am

대충 손보긴 했는데.. 소스 코드 전체에 걸쳐서 html 태그를 출력하는 부분을 찾아내는 것도 쉽지 않은 터라.. 일단 위에 나열된 목록을 위주로 해 봤습니다. 한 번 구경이나 해 보세요. [여기]입니다.. 색상이 좀 엽기적이죠.. -_-; web-safe color 들만 가지고 구분을 시켰더니 그렇습니다. R,G,B 각각 99, CC, FF 세 가지 값을 주어서 조합을 만들어 (3*3*3 = 27개로군요) 각 클래스마다 다른 background 를 준 겁니다. 클래스 갯수가 27개보다 더 많은 터라 두개의 클래스가 같은 배경색으로 나오긴 합니다만.. 어쨌든 어느 정도로 클래스를 나누었는지는 감이 오실 겁니다.

저 css 버리지말고 나중에 저한테 보내주세요. 함 써봐야지... 으흐흐 ^ㅍ^

-- Bab2 2003-3-1 11:40 am

http://gypark.pe.kr/cgi-bin/csstest/wiki.css 입니다.

-- Raymundo 2003-3-1 8:15 pm

저 css를 기본틀로 하는게 맞는거죠?

-- Bab2 2003-3-2 12:58 pm

: 당연히.. 최종 결과물은 저게 아닙니다만... 저건 일단 class 만 나눈 거고, 색이나 글꼴 등을 손보고, 클래스 순서를 정리하는 등의 손을 보고 있습니다. 클래스 구분은 거의 변하지 않았으니 기본틀이라 보셔도 괜찮을 겁니다.
-- Raymundo 2003-3-2 1:33 pm
: 아, 생각해 보니... 상단 메뉴를 통채로 gotobar 로 처리하면 폐인월드 같은 곳에서는 애매해지는군요. 어차피 유연성을 보장하기에는 미흡하지만, 상단 메뉴 테이블의 각 셀도 별도의 클래스로 나누는 게 좋겠습니다. 클래스를 좀 더 나눠야겠군요.
-- Raymundo 2003-3-2 1:43 pm

참, css 와 관계없이... UseModWiki소스수정/diff출력개선의 Notes 에 올릴 질문에 답 좀 해 주세용~

-- Raymundo 2003-3-1 3:16 am

찾아보기버튼을 버튼속성에 넣으려면 어떻게 해야되죠?

-- Bab2 2003-3-1 11:37 am

빼먹은 게 분명히 있을 것 같습니다만.. 어쨌거나 UseModWiki소스수정/스타일쉬트 에 반영되었습니다. 예쁜 css 화일 좀 만들어 올려 주세요~ :-)

-- Raymundo 2003-3-2 3:36 pm

역시 빼먹은 게 있었군요. mysign 엔트리를 추가했습니다.

-- Raymundo 2003-3-3 1:54 am

현재 불여우를 사용해보고 있는데요. 제홈과 레이문드님 위키가 기능상 문제는 없지만 IE에서 보던 모양과 좀 달라 보입니다. Jof님 위키는 별 차이가 없는데 말이죠. 스타일쉬트문제일 듯한데 한번 확인해 주셨으면 합니다. (글꼴하고 가로선이 조금 이상해 보입니다. 특히 상단 메뉴 부분)

-- Nyxity 2004-11-16 6:54 pm

<HR class='gotobar'> 이 태그가 테이블하고 붙어서 그러는 것 같네요. 사실 이건 불여우가 너무 솔직히 렌더해서 그러는거라고 봐야 할텐데 말이죠... hr gotobar에 마진을 설정하시면(margin-top:2px; 정도?) 되긴 되겠지만 또 IE에서 어떻게 나올지. 참고 : [불여우용 editcss]

-- 조프 2004-11-16 8:09 pm

잠깐 살펴보고 왔더니 그새 조프님의 답변이 달렸군요. 조프님 말씀처럼 메뉴바 바로 아래 HR 이 붙어버리는데 이건 딱히 뭐가 더 맞는 건지 몰라서 건드리지 않았고, 가로선은 제일 가로선이 불여우에서 안 되고, 굵은 경우 바탕색이 없길래 HR 에 대해서 background-color: darkred; 을 추가해 주면 됩니다. 전 그것보다도 body 글꼴부터 완전 엉망이라 (어째서 굴림이 안 나올까요?) 도대체 어떻게 손을 봐야 할 지 모르겠더군요. 저는 포기합니다. :-) 1) 불여우를 쓰며 2) 유즈모드 ext 버전이 제대로 안 보이는 것이 매우 불만인 분들이 해결해 주시면 감사히 적용하겠습니다. ^_^

-- Raymundo 2004-11-16 8:24 pm

body의 폰트와 TD.diff의 폰트가 틀리군요. 편집화면의 textarea나 diff 쪽은 굴림이 제대로 나오는 것을 보니 이쪽으로 맞추시면 될 것 같습니다. 그리고 위에도 올렸지만 editcss 확장을 설치하면 실시간으로 수정해서 결과를 확인하실 수 있으니 매우 도움이 될 것이라고 생각합니다.

-- 조프 2004-11-16 8:29 pm

: editcss 이 아직 1.0용이 없는지 버전이 안맞는다고 하는군요.
-- Nyxity 2004-11-16 9:43 pm