본문 바로가기
미디어위키

Help Cascading Style Sheets

by 다움위키 2024. 12. 13.

원문 보기: https://dawoum.duckdns.org/wiki/Help:Cascading_Style_Sheets

 

캐스케이딩 스타일 시트(Cascading Style Sheets)는 페이지의 유연한 서식을 허용합니다. 그것들은 가능할 때마다 비-테이블형 컨텐츠에 대해 테이블 대신 사용되어야 하는데, 왜냐하면 그것들이 CSS가 템플릿을 통해 또 다른 페이지에 삽입되면 독자에 의해 조작되거나 저자에 의해 재정의될 수 있기 때문입니다.

Levels of CSS settings

스타일은 컨텐츠의 특정 부분에 대해 특별히 선택될 수 있습니다; 예를 들어, 색상, 매개변수 범위를 참조하십시오.

대안적으로, 스타일은 CSS 선택자에 대해 지정되며, 요소, 클래스, 및 ID로 표현됩니다. 이것은 다양한 수준에서 수행됩니다:

작성자 스타일 시트, 다음 순서로:

주의: 로드된 모든 스타일 시트 목록에 대해 WP:CLASS를 참조하십시오.

MediaWiki core style-sheets

스킨당: MediaWiki Manual:Gallery of user styles 등. 전형적으로 로드되는 스타일 시트:

스킨-지정 주요 파일

예를 들어, monobook/main.css (PC에 대한 일반 스킨), chick/main.css (스마트폰에 대해 일반 스킨)

브라우저-지정 수정 사항 (역시 스킨-지정)

Monobook에 대한 예제:

Site-wide style-sheets

주의: 영어 위키피디아가 아닌 미디어위키 사이트는 MediaWiki:Common.css 대신 MediaWiki:Gadget-site.css를 사용할 수 있습니다.

Page-specific style-sheets

페이지-별 스타일-시트는 TemplateStyles를 통해 도입될 수 있습니다. 페이지, 특히 템플릿에는 인라인 CSS도 있을 수 있습니다.

일부 페이지에는 자체 CSS가 있습니다 (예를 들어, MediaWiki:FileUploadWizard.css)

User-specific style-sheets

CSS 용어로, 사용자-별 스타일 시트는 사용자 스타일 시트가 아니라는 점에 유의하십시오.

Usage

HTML 요소는 위키텍스트에서 그대로 가져온 것일 수도 있고 (위키텍스트에서 HTML 참조), 예를 들어 span일 수도 있고, 위키텍스트를 번역한 결과일 수도 있습니다. 예를 들어 '''...''' 코드가 <b>...</b>로 변경되거나, 스킨 코드의 일부일 수도 있습니다.

클래스는 소프트웨어에 의해 생성될 수 있습니다. 예를 들어, HTML-요소 "body"에 대한 ns-namespace number, 페이지 본문에서 interwiki 링크에 대한 extiw, 또는 위키텍스트에서 가져올 수 있습니다.

유사하게, ID는 소프트웨어에 의해 생성될 수도 있고, 예를 들어, bodyContent, 또는 위키텍스트에서 가져올 수도 있습니다.

컨텐츠의 부분에 대한 스타일 설정의 충돌의 경우에서, 결과 설정은 주로 "!important" 표시에 따라 달라집니다. 둘째, 둘 다 모두가 중요하면, 사용자가 이기고, 둘 다 중요하지 않으면 저자가 이깁니다. 셋째, 그것은 구체성에 따라 달라집니다. 마지막으로, 그것은 스타일 시트 사이와 스타일 시트 내의 순서에 따라 달라집니다: 마지막이 이깁니다. 따라서, 후자의 구체성이 더 크면, User:username/monobook.css는 MediaWiki:Monobook.css (저자 둘 다, 사용자가 아님)에서 이기지 않습니다. cascade도 참조하십시오.

Supported elements

미디어위키는 url() 속성과 같은 예외를 제외하고 대부분의 CSS를 지원합니다. 이전 버전에서는 CSS 지원에 몇 가지 버그가 있었습니다.

CSS in wikitext

일반 HTML 마크업에서와 마찬가지로, 코드에서 HTML 요소에 CSS 스타일을 사용할 수 있습니다 (미디어위키에 의해 지원되는 요소 목록에 대해, Help:HTML in wikitext를 참조하십시오).

예를 들어, 녹색 테두리와 오른쪽에 떠 있는 컨텐츠를 갖는 <div>...</div> 요소는 다음과 같이 생성됩니다:

<div style="float:right; border:thin solid green;">
Here comes a short paragraph that is<br />
contained in a "div" element that is<br />
floated to the right.
</div>

이는 오른쪽에 상자가 생성됩니다. 일부 위키텍스트 요소는 CSS 스타일을 직접 삽입할 수 있습니다. 예를 들어 테이블 구문은 다음과 같습니다:

{| style="your style here"
|-
|your table stuff
|}
Further information: Help:Tables

MediaWiki existing styles

미디어위키나 방문 중인 사이트에서 이미 미리 정의된 스타일 유형을 사용하고 싶을 수 있습니다. 페이지에 고유한 스타일을 만들 수도 있습니다.

벡터는 기본 스타일이며, MediaWiki:Vector.css에서 볼 수 있습니다.

CSS 태그에 기존 "class"를 지정합니다.

기존 수업 목록을 여기에 입력하십시오.

Tips and tricks

Non-display

삽입된 페이지에서, 한 버전에서는 주석을 숨기고, 또 다른 보기에서는 표시할 수 있습니다. 텍스트에 대한 극단적인 "스타일" 중 하나는 표시하지 않는 것입니다:

.''classname'' {display: none}
#''id'' {display: none}

기타 등등.

표시되지 않는 링크는 작동하지 않습니다 (글꼴이 매우 작은 링크와는 대조적으로).

템플릿 이름, 매개변수 이름, 매개변수 값, 링크에서 페이지 이름 등에 대한 표현에서 텍스트를 제거하는 데 사용할 수 없습니다.

숨겨진 텍스트를 보기 위해, 여기에서 파이어폭스에 대해 Web Developer Toolbar를 다운로드하고, 그런-다음 해당 툴바에서 Misc. → show hidden elements를 선택하십시오. 그러면 모든 숨겨진 요소가 표시됩니다.

Non-print

"noprint" 클래스의 컨텐츠를 선언함으로써 콘텐츠가 인쇄되지 않도록 제외할 수 있습니다:

<div class="someclass noprint">This will not appear in the print version.</div>

Major style blocks

  • column-content – 여백 내의 컨텐츠가 존재하는 전반적인 공간
  • firstHeading – 모든 각 페이지 상단의 머릿글 태그의 클래스
  • contentSub – 본문 텍스트 위, 주요 머릿글 바로 아래에 있는 위키 이름
  • content – 주요 페이지 컨텐츠를 포함하는 흰색 배경에 얇은 테두리가 있는 상자
  • bodyContent – 컨텐츠 상자 내의 주요 페이지 컨텐츠

포틀릿(portlet) 클래스는 주요 컨텐츠 주변의 모든 div 블록에서 사용하는 스타일입니다. 해당 클래스를 사용하여 식별된 블록:

  • p-cactions – 주요 컨텐츠 (페이지, 토론, 편집 등) 위쪽에 있는 페이지-관련 탭 목록에 대한 id, 꼭대기.
  • p-personal – 주요 컨텐츠 (사용자 이름, 토론, 등) 위쪽에 있는 사용자-관련 링크의 목록에 대한 id, 꼭대기.
  • p-logo – 로고를 포함하는 블록에 대해 id, 꼭대기 왼쪽.
  • p-navigation – 페이지 왼쪽에 있는 탐색 링크를 포함하는 블록에 대한 id.
  • p-search – 검색 버튼을 포함하는 블록
  • p-tb – 도구 상자 링크를 포함하는 블록
  • p-lang – 언어-사이 링크를 포함하는 블록

페이지의 바닥에서 바닥글은 다음 id를 갖는 블록을 포함하고 있습니다:

  • footer – 전체 바닥글 컨테이너 블록
  • f-poweredbyico – 통상적으로 페이지 오른쪽에 있는 powered by MediaWiki 이미지
  • f-list – 페이지 바닥에서 모든 텍스트 비트를 포함하는 목록에 대한 id

Style depending on a parameter or variable

Variable class or id

클래스 또는 id는 템플릿에 의해 생성된 결과나 템플릿 매개변수에 따라 달라질 수 있습니다, 예를 들어, class="abc{{{1|def}}}". 가능한 클래스 이름 중 하나 이상에 대해, 해당 클래스의 스타일을 정의할 수 있습니다. 클래스가 정의되지 않으면 그것이 무시되므로, 표준 스타일이 사용됩니다.

가장 간단한 경우에서, 예를 들어 class="abc{{{1}}}"가 있고 클래스 abcdef를 정의합니다. 매개변수 값이 "def"이면 그것이 적용됩니다.

일반적으로 사용되는 페이지에서 특정 클래스에 대한 스타일이 정의되어야만 의미가 있으면, 이것들은 MediaWiki:Common.css 페이지에서 지정해야 하며, 이는 모든 사용자와 모든 스킨에 적용되며, 재정의되지 않는 한 적용됩니다.

Variable style parameter value

다음으로 읽는 위키텍스트는

<span style="display:{{{3|none}}}">Wed</span>

매개변수 3이 정의되어 있지만, 그 값이 "none"이 아니면 "Wed"를 표시하고, 매개변수 3이 정의되지 않았거나 "none"이면 아무것도 표시하지 않을 것입니다. 매개변수 3의 값이 "none"이 아닌 표시 스타일이면, 해당 스타일이 적용됩니다.

Wiki headings

위키 머릿글은 다음 기본 CSS를 사용합니다:

See also

 

관련글

티스토리툴바