위키백과:사용자 페이지 설계 센터/스타일

스타일은 페이지 레이아웃이다. 여기서는 콘텐츠 구조화, 테두리, 페이지 색상 등과 같은 포맷 요소를 다룬다. 음, 그것보다 스타일링할 게 조금 더 있고, 나머지는 여기에도 있어.

레이아웃 테마

우리의 "Cheatsheet"는 기본적인 위키백과 서식을 배우는 좋은 출발점이다. 좀 더 완벽한 가이드가 여기에 있다.

당신은 위키백과 기사들이 배치되는 표준적인 방법에서 몇 가지 형식적인 팁을 얻을 수 있다. 물품은 표제, 단락, 글머리표 등을 사용한다. 단, 누구든지 실제 기사로 오인할 수 있는 사용자 페이지를 설정하지 않도록 주의하십시오(이것은 여기에서 권장되지 않음).

경험 많고 센스 있어 보이는 편집자(Wikipedian)를 만나게 되면, 자신의 사용자 페이지에 통합할 수 있는 설계 요소가 있는지 그들의 사용자 페이지를 살펴보십시오.

포털 형식

2018년 현재, 포탈 프로젝트는 포털 디자인에 놀라운 발전을 이루었고, 포탈을 만들고 수정하기 위한 바람을 일으키고 있다. 새로운 포털 설계의 한 가지 가능한 적용은 사용자 페이지다.

포털로 설정된 사용자 페이지의 예는 사용자:트랜스휴머니스트.

요소 형식 지정

포털 구성 요소

증가하는 포털 요소의 모음에서 나오는 많은 다양한 템플릿은 사용자 페이지의 설계에 큰 영향을 미치기 위해 사용될 수 있다. 예를 들어...

이미지 배너

{{Portal image banner File:Ethipothala Water Falls.jpg maxheight=140px overflow=Hidden }} 다음과 같다:

그림 슬라이드쇼

용기 또는 용기 안에 있는 열의 크기를 준수한다. 대부분의 포털에서는 반쪽 폭의 열에 있다. 여기서 전체 너비의 단일 열:

자세한 내용은 {{임의 슬라이드쇼로 파일을 변환}}을(를) 참조하십시오.

포털 템플릿

대체 페이지 제목 헤더

참고: 이 방법은 모든 위키백과 스킨에서 작동하지 않는 해킹이다. 예를 들어, Classic 스킨 사용자는 페이지 상단에 있는 링크를 제목으로 덮게 된다.

대체 제목 머리글은 페이지 상단에 있는 기본 머리글을 덮는 머리글이다. 기본 제목 머리글에는 굵은 글씨로 된 페이지 이름이 있다. 기본값이 마음에 들지 않으면 아래 지침을 따르십시오.

1. 먼저 사용자 하위 페이지(이 섹션에 설명됨)를 작성하십시오. "사용자:사용자/헤더 예"
2. 그런 다음 다음 다음 코드를 하위 페이지에 복사하고 모든 캡의 부품(예: "COLOR OF TEXTER" 및 "HEADER TEXT YOUR Want")을 변경하십시오.
3. 머리글을 사용자 페이지로 옮겨 놓으십시오(두 개의 곱슬 괄호 안에 하위 페이지의 전체 이름을 입력하십시오). {{}}}

예제 코드:

{ style="position:light, top:-50인치, 배경:#CCCFF; 색상:#000000;" valign="중간" - <h1 스타일="middle:0; 경계 하단:0; 색상:텍스트의 색;"> <중앙>원하는 헤더 텍스트 } 

국경

테두리가 멋져 보인다. 국경은 향신료를 더한다. 그리고 그것들은 적절한 가격이다.

아래 예에는 닫는 코드가 포함되어 있어 대화 페이지에서 이를 활용하기 어려울 수 있다. 추가된 내용에 관계없이 페이지 끝까지 테두리 및 배경을 확장하려면 테두리 마크업 예제의 끝에 있는 닫기 코드(</div>, </tr>, </td>, })를 삭제하십시오.

테두리:

---

위의 디자인은 그림 액자를 모방하기 때문에 짧은 페이지에 가장 잘 사용된다. 그것은 이미지나 상 등에 잘 어울릴 것이다.

둥근모퉁이

2008년 11월 현재, 둥근 모서리는 모질라 파이어폭스, 애플 사파리, 구글 크롬에서만 전시될 것이다. 편집: 2011년 6월 현재 Internet Explorer 9에도 둥근 모서리가 표시됨
상자나 프레임에 둥근 모서리를 추가하려면 스타일 파라미터로 {{Round 코너}; 템플릿(표시된 대로, 세미콜론 포함)을 포함하십시오. 반올림할 요소는 우선 테두리가 있어야 한다는 점에 유의하십시오. 여기 마크업 예제가 있다.

<div style="경계:1198 솔리드 #5599FF; {{Round corner}}; margin: 5px;"] 샘플 텍스트 샘플 텍스트 샘플 텍스트 </div>  

원형 모서리를 만들기 위한 특정 코드를 보려면 템플릿:둥근 귀퉁이.

둥근 모서리의 사용에 대한 멋진 예는 Zeerus의 사용자 페이지를 참조하십시오.

아, 시시한 방법으로.

남자다운 방법은 다음과 같다: -moz-border-radius:Xpx, 여기서 X는 둥근 가장자리가 되어야 하는 픽셀 수입니다.

색

CSS를 사용하여 페이지 색상 변경

사용자 페이지의 색상을 변경하려면 다음 코드를 추가하여 대문자로 표시된 텍스트를 원하는 웹 색상으로 바꾸십시오.

{ style="properties:배경색, 색상:텍스트 색상"

그래서, 화려한 색상을 사용하길 원해? 다음은 User에서 변환된 Web-Safe 색상(비 디더링)의 범위:레지던트 마리오/태블릿

내용

자동 목차가 사용자 페이지에 나타나지 않도록 하려면 사용자 페이지의 어딘가에 다음 줄을 놓으십시오.

__NOTOC__

목차 상자를 오른쪽으로 띄우려면 상단을 표시할 위치에 다음 줄을 놓으십시오.

{{TOCright}}

섹션 표시/숨기기

축소/확장 가능한 섹션의 예:

카테고리에는 다음과 같은 몇 가지 템플릿이 있다.템플릿 접기.

수행 링크

전환 피쳐

상자

• 상자를 만들려면 다음을 수행하십시오.

1. <div style="백그라운드-컬러:당신이 원하는 COLOR;" 텍스트 앞에" >
2. 색상 선택(사용할 수 있는 전체 색상 목록은 다음 페이지: [1][2][3]을(를)
3. 텍스트 입력
4. 텍스트 뒤에 </div>를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

<div style="백그라운드-컬러:노란색;"Hi</div"

• 다음과 같이 보일 것:

곡선 테두리

• 테두리를 곡선으로 만들려면(Mozilla 기반 브라우저에서만 작동) 이전 섹션에서 설명한 코드에 다음 코드를 추가하십시오.
• 테두리 장식:15인치;
• 그래서 이제 당신의 코드는 <div style="백그라운드 컬러:다크골든로드, 테두리 반지름:15px;">히</div>
• 로 나타날 수 있는 것.

텍스트 형식 지정

다음은 텍스트를 포맷하는 방법에 대한 몇 가지 팁:

중앙-알리ign

• 텍스트를 가운데 정렬하려면 다음 코드를 사용하십시오.

1. <div style="text-align: 가운데;"를 입력하십시오.
2. 그런 다음 텍스트를 입력하십시오.
3. 마지막으로 </div>를 입력한다.

• 전체적으로 코드는 다음과 같아야 한다.

<div style="text-align: central;"central text</div"

• 코드를 입력하면 텍스트가 다음과 같이 표시됨:

텍스트 스트라이크 스루

• 텍스트를 강조 표시하려면 다음 코드를 사용하십시오.

1. 텍스트 앞에 <s>를 입력하십시오.
2. 텍스트 입력
3. 텍스트 뒤에 </s>를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

블라블라블라블라블라블라블라드

• 코드를 입력하면 텍스트가 다음과 같이 표시됨:

어쩌구 저쩌구.

위첨자

• 위첨자를 삽입하려면 다음 코드를 사용하십시오.

1. 텍스트 앞에 <sup>을 입력하십시오.
2. 텍스트 입력
3. 텍스트 뒤에 </sup>을 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

일반 텍스트 설명 텍스트

• 코드를 입력하면 텍스트가 다음과 같이 표시됨:

일반 텍스트^{superscript text}

첨자

• 삽입하려면 다음 코드를 사용하십시오.

1. 텍스트 앞에 <sub>를 입력하십시오.
2. 텍스트 입력
3. 텍스트 뒤에 </sub>를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

일반 텍스트<sub> 구독 텍스트

• 코드를 입력하면 텍스트가 다음과 같이 표시됨:

일반 텍스트_{subscript text}

히든 코멘트

• 숨겨진 설명을 삽입하려면 다음 코드를 사용하십시오.

1. 텍스트 앞에 <!-->를 입력하십시오.
2. 텍스트 입력
3. 텍스트 뒤에 -->를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

<!--- blah blah blah-->

• 이 페이지의 텍스트는 볼 수 없지만, 이 페이지를 편집하려고 할 때 볼 수 있다. 숨겨진 텍스트는 대부분 경고에 사용된다.

보조 헤드라인

• 보조 헤드라인을 삽입하려면 다음 코드를 사용하십시오.

1. 텍스트 앞에 a ==를 입력하십시오.
2. 텍스트 입력
3. 텍스트 뒤에 a ==를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

===blah blah blah blah====

탭

• 탭을 삽입하려면 다음 코드를 사용하십시오.

1. 텍스트 앞에 ::를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

::blah blah blah blah blah blah

• 코드를 입력하면 텍스트가 다음과 같이 표시됨:

어쩌구 저쩌구.

글꼴 색

• 텍스트 색상을 변경하려면 다음 코드를 사용하십시오.

1. 텍스트 앞에 <스팬 스타일="컬러: ColorName"을 입력하십시오.
2. 색상 선택
3. 텍스트 입력
4. 텍스트 뒤에 </span>을 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

<span style="color: red">blah blah blah blah blah blah.

• 코드를 입력하면 텍스트가 다음과 같이 표시됨:

어쩌구 저쩌구.

---

• 또 다른 방법은 다음과 같다.

1. 텍스트 앞에 <font color="ColorName"을 입력하십시오.
2. 색상 선택
3. 텍스트 입력
4. 텍스트 뒤에 </font>를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

<색깔="빨간색">블라블라블라블라블라블라블라블라블라블라블라.

• 코드를 입력하면 텍스트가 다음과 같이 표시됨:

어쩌구 저쩌구.

그라데이션 텍스트

이 템플릿을 사용하여 왼쪽에서 오른쪽으로 점차 색이 변하는 텍스트를 만들 수 있으며(블라블라블라블라), 이 템플릿을 사용하여 무지개의 모든 색을 그라데이션으로 하는 텍스트를 만들 수 있다(블라블라블라블라블라블라).

마우스 커서

• 텍스트를 가리킬 때 마우스의 커서를 변경하려면 다음을 수행하십시오.

1. <스팬 스타일=" 커서 입력:텍스트 앞에 커서;" > 입니다.
2. 커서 선택(예: 십자형, 기본값)
3. 텍스트 입력
4. 텍스트 뒤에 </span>을 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

<span style="curser: crossshair;"blah blah blah blah blah"/span"

• 해당 코드를 입력하고 텍스트 위에 마우스를 놓으면 다른 마우스 커서가 있어야 한다.

어쩌구 저쩌구.

링크

• 외부 링크를 내부로 표시하려면 다음을 사용하십시오.

1. 텍스트 앞에 <span class="plainlinks"><font color="002bb8">을 입력하십시오.
2. 외부 링크 입력
3. 텍스트 뒤에 </font>를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

<span class="spanlinks"><<pan color="002b8"][http://wikipedia.com 외부 링크]</pan]

• 이 코드를 입력한 후 외부 링크는 다음과 같이 표시되어야 한다.

외부 링크

• 다른 링크 색상을 지정하는 사용자 정의 스킨(예: 내부 링크의 경우 녹색, "레드링크"의 경우 보라색)을 사용하는 경우, 이 코드로 포맷된 링크는 여전히 파란색으로 표시되며 외관상 다른 링크와 일치하지 않는다는 점에 유의하십시오.

굵게

• 텍스트를 굵게 표시하려면 다음을 수행하십시오.

1. 텍스트 앞에 3개의 아포스트로피를 입력하십시오.
2. 텍스트 입력
3. 텍스트 뒤에 아포스트로피를 3개 더 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

'''문자''' 메시지를 보내다

• 코드를 입력하면 텍스트는 다음과 같이 표시되어야 한다.

문자 메시지를 보내다

이탤릭체

• 텍스트를 기울임꼴로 표시하려면 다음을 수행하십시오.

1. 텍스트 앞에 아포스트로피 2개를 입력하십시오.
2. 텍스트 입력
3. 텍스트 뒤에 아포스트로피를 2개 더 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

''문자'' 메시지를 보내다

• 코드를 입력하면 텍스트는 다음과 같이 표시되어야 한다.

문자 메시지를 보내다

밑줄 긋기

• 밑줄 텍스트를 만들려면 다음을 수행하십시오.

1. 텍스트 앞에 <u>를 입력한다.
2. 텍스트 입력
3. 텍스트 뒤에 </u>를 입력한다.

• 전체적으로 코드는 다음과 같아야 한다.

텍스트

• 코드를 입력하면 텍스트는 다음과 같이 표시되어야 한다.

문자 메시지를 보내다

글꼴 크기

• 텍스트를 특정 크기로 만들려면 다음 코드를 사용하십시오.

1. 텍스트 앞에 <font size="10"을 입력하십시오.
2. 크기 선택
3. 텍스트 입력
4. 텍스트 뒤에 </font>를 입력하십시오.

• 전체적으로 코드는 다음과 같아야 한다.

<<fonts size="4">blah blah blah blah blah blah>.

• 코드를 입력하면 텍스트가 다음과 같이 표시됨:

어쩌구 저쩌구.

글꼴 패밀리

• 다음 글꼴 패밀리를 사용하려면 아래 코드를 사용하십시오.

1. <span style="span-family: (span 글꼴); 글꼴 크기: 12pt">
2. 원하는 글꼴 입력
3. 코드 바로 뒤에 텍스트를 입력하십시오.
4. 텍스트 뒤에 </span>을 입력하십시오.

따라서 다음과 같이 보여야 한다.

<스팬 스타일="스팬-패밀리: 코믹 산스 ms; 글꼴 크기: 12pt">[/span]

이 결과는 다음과 같다.

신난다

글꼴 목록

사진 형식

템플릿

많은 사용자들이 그들의 페이지를 장식하기 위해 찾고 있다! 이 절에는 다른 사람들이 개발한 정말 멋진 앱 몇 개가 나열되어 있다.

이모티콘

스마일리스라고도 불리는 이 이모티콘들은 문자메시지에 감정 표현을 추가하는 데 유용하다. 확실히 기사에 사용하기 위한 것은 아니지만, 대화 페이지, 특히 사용자 대화 페이지의 메시지를 강화하기에 적합하다. 그것들은 메뉴 아이콘과 사용자 페이지 아트로도 사용될 수 있다.

참고 항목