연습장:카페인러브 편집하기

__FORCETOC__ __NEWSECTIONLINK__ [[분류:연습장]]
== alpha ==
<div style="background:-webkit-linear-gradient(top, #1ab5e6 0%,#08a7d9 100%); box-shadow:0 0 0 1px rgba(100,215,251,0.6) inset; border-top:1px solid #0292b9; border-bottom:1px solid #0292b9;">
<ul class="clear" style="display: block; list-style:none; margin:0 auto; width:608px; background: -webkit-linear-gradient(top, #1ab5e6 0%,#08a7d9 100%); box-shadow:0 0 0 1px rgba(100,215,251,0.6) inset; border-left:1px solid #008db9; border-right:1px solid #32caf9; font-size:14px; font-weight:bold;">
<li style="float:left; color:#fff; width:150px; text-align:center; line-height:48px; border-left:1px solid #32caf9; border-right:1px solid #008db9; text-shadow:0 -1px 0 #008db9;">애니메이션</li>
<li style="float:left; color:#fff; width:150px; text-align:center; line-height:48px; border-left:1px solid #32caf9; border-right:1px solid #008db9; text-shadow:0 -1px 0 #008db9;">라노베・코믹스</li>
<li style="float:left; color:#fff; width:150px; text-align:center; line-height:48px; border-left:1px solid #32caf9; border-right:1px solid #008db9; text-shadow:0 -1px 0 #008db9;">공략형 게임</li>
<li style="float:left; color:#fff; width:150px; text-align:center; line-height:48px; border-left:1px solid #32caf9; border-right:1px solid #008db9; text-shadow:0 -1px 0 #008db9;">성우</li>
</ul>
</div>

== 해야 할 일 ==
=== 관리 ===
; 중요
* '''회사 문서를 어떻게 처리할 것인지 결정''' (e: redirect to category or not?)
* Lazy Loading을 적용해서 latency 절약

; 보통
* 이미지 썸네일을 alpha 레이어로 처리 (absolute positioning) : /includes/ 에 위치
* AJAX RC 테스트

; 사소
* SVG renderer 설치 (thumbnail error)

=== 편집 ===
<div style="margin:auto; width:400px;"><createbox>
buttonlabel=캐릭터 등록하기
width=15
break=no
preload=틀:서식/캐릭터
</createbox><createbox>
buttonlabel=작품 등록하기
width=15
break=no
preload=틀:서식/작품
</createbox></div>
{| class="wikitable" style="width:100%"
! style="width:33%" | 성우 (애니 업데이트)
! style="width:33%" | 캐릭터
! style="width:34%" | 작품
|- style="vertical-align:top"
|
* [[아스미 카나]]
* [[하야미 사오리]]
* [[카네모토 히사코]]
* [[카미야 히로시]]
* [[미모리 스즈코]]
* [[카야노 아이]]
|
* [[카가리노 키리에]]
* [[미즈키 마나]]
* [[민트 클라크]]
* [[야마다 아오이]]
* [[쿠니타치 린카]]
|
* [[나와 이치노의 게임동호회 활동일지]]
* [[타마유라]]
* [[kiss×sis]]
* [[포토카노]]
* [[아마가미]]
* [[아라카와 언더 더 브릿지]]
* [[러키☆스타]]
* [[소드 아트 온라인/등장인물]]
* [[서번트 서비스/등장인물]]
|}

== 유틸리티 ==
{| class="mw-collapsible mw-collapsed" style="background-color:#333;color:#ddd;text-align:center;width:100%;"
|-
!colspan="16"|Decimal ASCII Chart
|-
!width="3%"|<small>DEC</small>!!width="6%"|<small>OUT</small>!!width="3%"|<small>DEC</small>!!width="6%"|<small>OUT</small>!!width="3%"|<small>DEC</small>!!width="4%"|<small>OUT</small>!!width="3%"|<small>DEC</small>!!width="4%"|<small>OUT</small>!!width="3%"|<small>DEC</small>!!width="4%"|<small>OUT</small>!!width="3%"|<small>DEC</small>!!width="4%"|<small>OUT</small>!!width="3%"|<small>DEC</small>!!width="4%"|<small>OUT</small>!!width="3%"|<small>DEC</small>!!width="4%"|<small>OUT</small>
|-
||0||NUL||16||DLE||32||SP||48||0||64||@||80||P||96||`||112||p
|-
||1||SOH||17||DC1||33||!||49||1||65||A||81||Q||97||a||113||q
|-
||2||STX||18||DC2||34||"||50||2||66||B||82||R||98||b||114||r
|-
||3||ETX||19||DC3||35||#||51||3||67||C||83||S||99||c||115||s
|-
||4||EOT||20||DC4||36||$||52||4||68||D||84||T||100||d||116||t
|-
||5||ENQ||21||NAK||37||%||53||5||69||E||85||U||101||e||117||u
|-
||6||ACK||22||SYN||38||&||54||6||70||F||86||V||102||f||118||v
|-
||7||BEL||23||ETB||39||'||55||7||71||G||87||W||103||g||119||w
|-
||8||BS||24||CAN||40||(||56||8||72||H||88||X||104||h||120||x
|-
||9||HT||25||EM||41||)||57||9||73||I||89||Y||105||i||121||y
|-
||10||LF||26||SUB||42||*||58||:||74||J||90||Z||106||j||122||z
|-
||11||VT||27||ESC||43||+||59||;||75||K||91||[||107||k||123||{
|-
||12||FF||28||FS||44||,||60||&lt;||76||L||92||\||108||l||124||&#124;
|-
||13||CR||29||GS||45||-||61||=||77||M||93||]||109||m||125||}
|-
||14||SO||30||RS||46||.||62||&gt;||78||N||94||^||110||n||126||~
|-
||15||SI||31||US||47||/||63||?||79||O||95||_||111||o||127||DEL
|}

== Apple-like scroolbar ==
{{접기| Source Code |
<pre style="font-family:monospace; word-wrap:break-word; border:none; background:#efefef;">
::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}
::-webkit-scrollbar-corner {
	background-image: url(http://i.stack.imgur.com/FguQn.png?corner.png);
	background-repeat: no-repeat;
}
::-webkit-resizer {
	background-image: url(http://i.stack.imgur.com/aKKDY.png?resizer.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}
::-webkit-scrollbar-button:start {
	display: none;
}
::-webkit-scrollbar-button:end {
	display: block;
}
::-webkit-scrollbar:horizontal {
	-webkit-border-image: url(http://i.stack.imgur.com/NQ2K6.png?horizontal-button.png) 0 2 0 2;
	border-color: transparent;
	border-width: 0 2px;
	background-image: url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png);
	background-repeat: repeat-x;
}
::-webkit-scrollbar:horizontal:corner-present {
	border-right-width: 0;
}
::-webkit-scrollbar-thumb:horizontal {
	-webkit-border-image: url(http://i.stack.imgur.com/YQRD7.png?horizontal-thumb.png) 0 15 0 15;
	border-color: transparent;
	border-width: 0 15px;
	min-width: 20px;
}
::-webkit-scrollbar-track-piece:horizontal:start {
	margin-left: 6px;
}
::-webkit-scrollbar-track-piece:horizontal:end {
	margin-right: -6px;
}
::-webkit-scrollbar-track-piece:horizontal:decrement {
	-webkit-border-image: url(http://i.stack.imgur.com/p9yMk.png?horizontal-track.png) 0 15 0 15;
	border-color: transparent;
	border-width: 0 0 0 15px;
}
::-webkit-scrollbar-track-piece:horizontal:increment {
	-webkit-border-image: url(http://i.stack.imgur.com/p9yMk.png?horizontal-track.png) 0 15 0 15;
	border-color: transparent;
	border-width: 0 15px 0 0;
}
::-webkit-scrollbar-button:horizontal {
	width: 21px;
	-webkit-border-image: url(http://i.stack.imgur.com/NQ2K6.png?horizontal-button.png) 0 2 0 2;
	border-color: transparent;
	border-width: 0 2px;
}
::-webkit-scrollbar-button:horizontal:decrement {
	background-image: url(http://i.stack.imgur.com/dGOKL.png?horizontal-decrement-arrow.png), url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png);
	background-repeat: no-repeat, repeat-x;
	background-position: 7px 4px, 0 0;
}
::-webkit-scrollbar-button:horizontal:decrement:active {
	-webkit-border-image: url(http://i.stack.imgur.com/gT5BM.png?horizontal-button-active.png) 0 2 0 2;
	background-image: url(http://i.stack.imgur.com/dGOKL.png?horizontal-decrement-arrow.png), url(http://i.stack.imgur.com/RDf8L.png?horizontal-button-background-active.png);
}
::-webkit-scrollbar-button:horizontal:increment {
	background-image: url(http://i.stack.imgur.com/5rJr5.png?horizontal-increment-arrow.png), url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png);
	background-repeat: no-repeat, repeat-x;
	width: 16px;
	border-left-width: 0;
	background-position: 3px 4px, 0 0;
}
::-webkit-scrollbar-button:horizontal:increment:active {
	-webkit-border-image: url(http://i.stack.imgur.com/gT5BM.png?horizontal-button-active.png) 0 2 0 2;
	background-image: url(http://i.stack.imgur.com/5rJr5.png?horizontal-increment-arrow.png), url(http://i.stack.imgur.com/RDf8L.png?horizontal-button-background-active.png);
}
::-webkit-scrollbar-button:horizontal:end:increment:corner-present {
	border-right-width: 0;
	width: 15px;
}
::-webkit-scrollbar:vertical {
	-webkit-border-image: url(http://i.stack.imgur.com/NdaTT.png?vertical-button.png) 2 0 2 0;
	border-color: transparent;
	border-width: 2px 0;
	background-image: url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png);
	background-repeat: repeat-y;
}
::-webkit-scrollbar:vertical:corner-present {
	border-bottom-width: 0;
}
::-webkit-scrollbar-thumb:vertical {
	-webkit-border-image: url(http://i.stack.imgur.com/rPEsZ.png?vertical-thumb.png) 15 0 15 0;
	border-color: transparent;
	border-width: 15px 0;
	min-height: 20px;
}
::-webkit-scrollbar-track-piece:vertical:start {
	margin-top: 6px;
}
::-webkit-scrollbar-track-piece:vertical:end {
	margin-bottom: -6px;
}
::-webkit-scrollbar-track-piece:vertical:decrement {
	-webkit-border-image: url(http://i.stack.imgur.com/Rb6ru.png?vertical-track.png) 15 0 15 0;
	border-color: transparent;
	border-width: 15px 0 0 0;
}
::-webkit-scrollbar-track-piece:vertical:increment {
	-webkit-border-image: url(http://i.stack.imgur.com/Rb6ru.png?vertical-track.png) 15 0 15 0;
	border-color: transparent;
	border-width: 0 0 15px 0;
}
::-webkit-scrollbar-button:vertical {
	height: 21px;
	-webkit-border-image: url(http://i.stack.imgur.com/NdaTT.png?vertical-button.png) 2 0 2 0;
	border-color: transparent;
	border-width: 2px 0;
}
::-webkit-scrollbar-button:vertical:decrement {
	background-image: url(http://i.stack.imgur.com/KQvwk.png?vertical-decrement-arrow.png), url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png);
	background-repeat: no-repeat, repeat-y;
	background-position: 4px 7px, 0 0;
}
::-webkit-scrollbar-button:vertical:decrement:active {
	-webkit-border-image: url(http://i.stack.imgur.com/uW3TL.png?vertical-button-active.png) 2 0 2 0;
	background-image: url(http://i.stack.imgur.com/KQvwk.png?vertical-decrement-arrow.png), url(http://i.stack.imgur.com/puDsH.png?vertical-button-background-active.png);
}
::-webkit-scrollbar-button:vertical:increment {
	background-image: url(http://i.stack.imgur.com/UjkVR.png?vertical-increment-arrow.png), url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png);
	background-repeat: no-repeat, repeat-y;
	height: 16px;
	border-top-width: 0;
	background-position: 4px 5px, 0 0;
}
::-webkit-scrollbar-button:vertical:increment:active {
	-webkit-border-image: url(http://i.stack.imgur.com/uW3TL.png?vertical-button-active.png) 2 0 2 0;
	background-image: url(http://i.stack.imgur.com/UjkVR.png?vertical-increment-arrow.png), url(http://i.stack.imgur.com/puDsH.png?vertical-button-background-active.png);
}
::-webkit-scrollbar-button:vertical:end:increment:corner-present {
	border-bottom-width: 0;
	height: 15px;
}
::-webkit-scrollbar:disabled {
	background: red;
	-webkit-border-image: none;
	display: none;
}
</pre>
}}

== auto expand textarea ==
<pre style="font-family:monospace; word-wrap:break-word; border:none; background:#efefef;">
$(document).ready(function($) {
	$("textarea").keyup(function(e) {
		while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
			$(this).css('overflow', 'hidden');
			$(this).height($(this).height()+1);
		};
	});
});
</pre>
<pre style="font-family:monospace; word-wrap:break-word; border:none; background:#efefef;">
var textarea = document.getElementById("wpTextbox1");
var heightLimit = 800;

textarea.onkeydown = function(){
  textarea.style.height = ""; /* Reset the height*/
  textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px";
}
</pre>

== 껍데기 벗기기 ==
<pre>{{#ifexpr:{{#rpos:{{{param}}}|]]}}>-1|{{#replace:{{#sub:{{{param}}}|2}}|]]}}|{{{param}}}}}</pre>
* <nowiki>[[카미야 히로시]]</nowiki> returns 카미야 히로시
* 카미야 히로시 returns 카미야 히로시

== Fate ==
{{정보상자/캐릭터/Fate
 |성별		= 여
 |이름		= 세이버
 |이름/일어	= セイバー
 |이름/영어	= Saber
 |이명		= 아르토리아
 |이명/일어	= アルトリア
 |이명/영어	= Artoria
<!-- 캐릭터의 속성을 나열해 주세요. 자주 사용되는 속성은 분류로서 자동 등록됩니다. -->
 |속성		= 
<!-- 등장작품은 [[ ]] 로 링크하지 않습니다. 여러 작품에 등장할 경우 등장작품2, 등장작품3…을 덧붙여 주세요. -->
 |등장작품	= Fate／stay night
 |CV		= [[카와스미 아야코]]
<!-- 서번트는 '클래스', 기타 캐릭터는 '종족'을 사용해 주세요. -->
 |클래스		= 세이버
 |능력		= 통성명하는 능력
 |보구		= 엑숟칼리버
 |국적		= 영국
 |연령		= 
 |신분		= 
 |생일/년		= 
 |생일/월		= 
 |생일/일		= 
 |혈액형		= 
 |신장		= 154cm
 |체중		= 42kg
 |가슴		= 73
 |허리		= 53
 |엉덩이		= 56
 |컵		= 
 |별명		= 
 |특기		= 
 |취미		= 
 |이미지 컬러	= 파랑
 |캐릭터 속성	= 질서, 선
 |거주지		= 
 |가족관계	= 
 |캐릭터송	= 
 |공식 인기투표	= 
<!-- 서번트의 스테이터스 -->
 |스테이터스 = {{스테이터스|Fate
  |근력		= B
  |내구		= B
  |민첩		= A
  |마력		= A
  |행운		= C
  |보구		= A++
}}
<!-- 국내판 프로필 -->
 |국내명		= 세이버
 |등장작품/국내	= Fate／stay night
 |CV/국내	= 
}}

== Unicode test ==
* &mdash;
* <span style=" font-family:'Times New Roman',Times,'Nimbus Roman No9 L','Liberation Serif',serif;">\</span>

== lorem ==
덕질도 학문처럼 원전으로 해야 한다고 생각합니다. (그것은 물론 가능한 범위 안에서.) 본래의 작품과 마주해 보고 나만의 리액션을 취해야 다양한 시각과 의견을 확보할 수 있고, 그로 인해 분야의 깊이를 확장할 수 있기 때문입니다. 타인에 의해 비틀어진 정보를 주입받으면 편향된 시각만이 존재하게 되므로 독자는 그 개성을 잃고 작가는 독자의 반응을 패턴화해 거기에 응답하는 로봇이 되어 버리겠지요.