메인스페이스 모바일 테스팅(GTA) 문서 원본 보기

==용도==
이 페이지는 사용자가 사용자 연습장 네임스페이스에서 FandomMobile 스킨이 렌더링되지 않기 때문에 모바일 서식을 테스트하기 위한 목적입니다.

==테스트==
테스트의 목적을 설명하는 L3 소제목을 포함해 주십시오.

===표 테스트===

{|class="wikitable" width="100%"
!테스트
!테스트
!테스트
|-
|일부 텍스트
|일부 텍스트
#일부 텍스트
|일부 텍스트
*일부 텍스트
|}

==목록 테스트==
*Lorem ipsum
*Lorem ipsum
일부 텍스트
*Lorem ipsum
*Lorem ipsum
일부 텍스트
==목록 테스트 2==
일부 텍스트
*Lorem ipsum
*Lorem ipsum
일부 텍스트
==목록 테스트 3==
일부 텍스트
*Lorem ipsum
**Lorem ipsum
*Lorem ipsum
일부 텍스트
==목록 테스트 4==
일부 텍스트
*Lorem ipsum
**Lorem ipsum
일부 텍스트
*Lorem ipsum
====비 표 요소====
<div style="overflow: scroll; height: 100px; width: 375px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et nisi ut est venenatis viverra. Aenean pede orci, blandit quis, faucibus quis, egestas ut, mi. Pellentesque enim purus, venenatis dignissim, tincidunt a, ullamcorper eget, nibh. Nullam ut sem adipiscing orci vehicula interdum. Proin a enim. Phasellus sollicitudin, magna vitae vestibulum facilisis, tellus nunc iaculis arcu, in molestie sem velit tempus est. In eleifend velit at sem adipiscing sodales. Nunc sapien felis, aliquam et, volutpat rhoncus, condimentum ut, tortor. Integer est. Quisque viverra. Praesent sed arcu. Maecenas id lorem a leo lobortis condimentum.
<br><br>
Cras commodo rutrum augue. Vivamus iaculis. Nullam est. Maecenas consequat. Sed id dui. Vivamus a nisl. Donec pretium sapien. Proin et ligula et ligula placerat pulvinar. Aliquam erat volutpat. Proin id est. Suspendisse cursus, magna at hendrerit consequat, mauris est imperdiet neque, a ultrices arcu urna non nunc. Quisque tellus. Nulla nulla justo, vehicula nec, pellentesque eu, iaculis et, ligula. Praesent mattis ante vel sem. Suspendisse porta rhoncus urna. Phasellus felis. Praesent viverra convallis libero. Maecenas non augue. Donec hendrerit lectus id enim.
<br><br>
Nulla ligula dui, euismod et, sodales quis, sollicitudin quis, elit. In adipiscing est sed enim. Fusce at massa vitae metus semper hendrerit. Integer vitae urna. Nulla eget ligula. Etiam libero. Maecenas nisi nibh, convallis a, feugiat vitae, pulvinar et, mi. Curabitur arcu pede, adipiscing sed, egestas nec, commodo in, elit. Nulla facilisi. Proin varius pede et dui lacinia dapibus. Morbi nec augue. Proin imperdiet lacus eu tellus.
</div>
----
<div class="customscrolls" style="overflow-x: scroll; overflow-y: auto; height: 100px; width: 375px;"><div style="width: 500px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et nisi ut est venenatis viverra. Aenean pede orci, blandit quis, faucibus quis, egestas ut, mi. Pellentesque enim purus, venenatis dignissim, tincidunt a, ullamcorper eget, nibh. Nullam ut sem adipiscing orci vehicula interdum. Proin a enim. Phasellus sollicitudin, magna vitae vestibulum facilisis, tellus nunc iaculis arcu, in molestie sem velit tempus est. In eleifend velit at sem adipiscing sodales. Nunc sapien felis, aliquam et, volutpat rhoncus, condimentum ut, tortor. Integer est. Quisque viverra. Praesent sed arcu. Maecenas id lorem a leo lobortis condimentum.</div>
<br><br>
Cras commodo rutrum augue. Vivamus iaculis. Nullam est. Maecenas consequat. Sed id dui. Vivamus a nisl. Donec pretium sapien. Proin et ligula et ligula placerat pulvinar. Aliquam erat volutpat. Proin id est. Suspendisse cursus, magna at hendrerit consequat, mauris est imperdiet neque, a ultrices arcu urna non nunc. Quisque tellus. Nulla nulla justo, vehicula nec, pellentesque eu, iaculis et, ligula. Praesent mattis ante vel sem. Suspendisse porta rhoncus urna. Phasellus felis. Praesent viverra convallis libero. Maecenas non augue. Donec hendrerit lectus id enim.
<br><br>
Nulla ligula dui, euismod et, sodales quis, sollicitudin quis, elit. In adipiscing est sed enim. Fusce at massa vitae metus semper hendrerit. Integer vitae urna. Nulla eget ligula. Etiam libero. Maecenas nisi nibh, convallis a, feugiat vitae, pulvinar et, mi. Curabitur arcu pede, adipiscing sed, egestas nec, commodo in, elit. Nulla facilisi. Proin varius pede et dui lacinia dapibus. Morbi nec augue. Proin imperdiet lacus eu tellus.
</div>

===더 간단한 퍼센트 바(PercentBar)===
====현재 복잡한 고정 너비 계산 방식====
<div class="HideFandomDesktop" style="border-collapse: separate; border: 2px solid white; background-color: #000000; width: 100px; height: 30px;"><div style="position: absolute; background-color:#3C3C3C; width: 50px; height: 26px;"></div><div style="position: absolute; font-weight: bold; width: 100px; height: 30px; text-align: center; z-index: 10; color: white;">50%</div><div style="position: relative; background-color: white; width: 0px; z-index: 5; left: 19px; height: 26px;"><div style="position: relative; background-color: white; width: 0px; z-index: 5; left: 19px; height: 26px;"><div style="position: relative; background-color: white; width: 0px; z-index: 5; left: 19px; height: 26px;"><div style="position: relative; background-color: white; width: 0px; z-index: 5; left: 19px; height: 26px;"></div></div></div></div></div><div class="HideFandomMobile percentbar">50%</div>
====CSS 반응형 너비%====
얇게, 레이블 없음
<div class="percentcontainer" style="display: block; position: relative; width: 100%; margin: auto; height: 12px; border: 2px solid white; background-color: black;">
<span class="percentmarker" style="display: block; position: absolute; left: 0; top: 0; width: 65%; height: 8px; background: grey; padding-left: 2%;"></span>
<div class="percentdivider1" style="display: block; position: absolute; left: 0; top: 0; width: 20%; height: 8px;  border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider2" style="display: block; position: absolute; left: 0; top: 0; width: 40%; height: 8px; border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider3" style="display: block; position: absolute; left: 0; top: 0; width: 60%; height: 8px; border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider4" style="display: block; position: absolute; left: 0; top: 0; width: 80%; height: 8px; border-right: 2px solid white; background: 0 0;"></div>
</div>

색상 변경됨
<div class="percentcontainer" style="display: block; position: relative; width: 100%; margin: auto; height: 12px; border: 2px solid var(--theme-border-color); background-color: var(--theme-body-background-color);">
<span class="percentmarker" style="display: block; position: absolute; left: 0; top: 0; width: 65%; height: 8px; background: var(--theme-accent-color); padding-left: 2%;"></span>
<div class="percentdivider1" style="display: block; position: absolute; left: 0; top: 0; width: 20%; height: 8px; border-right: 2px solid var(--theme-border-color); background: 0 0;"></div>
<div class="percentdivider2" style="display: block; position: absolute; left: 0; top: 0; width: 40%; height: 8px; border-right: 2px solid var(--theme-border-color); background: 0 0;"></div>
<div class="percentdivider3" style="display: block; position: absolute; left: 0; top: 0; width: 60%; height: 8px; border-right: 2px solid var(--theme-border-color); background: 0 0;"></div>
<div class="percentdivider4" style="display: block; position: absolute; left: 0; top: 0; width: 80%; height: 8px; border-right: 2px solid var(--theme-border-color); background: 0 0;"></div>
</div>

기본, 중앙 레이블
<div class="percentcontainer" style="display: block; position: relative; width: 100%; margin: auto; height: 30px; border: 2px solid white; background-color: black;">
<span class="percentmarker" style="display: block; position: absolute; left: 0; top: 0; width: 37%; height: 26px; background: grey; padding-left: 2%;"></span>
<div class="percentlabel" style="display: block; position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: auto; text-align: center; color: white;">37%</div>
<div class="percentdivider1" style="display: block; position: absolute; left: 0; top: 0; width: 20%; height: 26px; border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider2" style="display: block; position: absolute; left: 0; top: 0; width: 40%; height: 26px; border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider3" style="display: block; position: absolute; left: 0; top: 0; width: 60%; height: 26px; border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider4" style="display: block; position: absolute; left: 0; top: 0; width: 80%; height: 26px; border-right: 2px solid white; background: 0 0;"></div>
</div>

단축형 (40% 너비)
<div class="percentcontainer" style="display: block; position: relative; width: 40%; height: 30px; border: 2px solid white; background-color: black;">
<span class="percentmarker" style="display: block; position: absolute; left: 0; top: 0; width: 56%; height: 26px; background: purple; padding-left: 2%;"></span>
<div class="percentlabel" style="display: block; position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: auto; text-align: center; color: white;">56%</div>
<div class="percentdivider1" style="display: block; position: absolute; left: 0; top: 0; width: 20%; height: 26px; border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider2" style="display: block; position: absolute; left: 0; top: 0; width: 40%; height: 26px; border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider3" style="display: block; position: absolute; left: 0; top: 0; width: 60%; height: 26px; border-right: 2px solid white; background: 0 0;"></div>
<div class="percentdivider4" style="display: block; position: absolute; left: 0; top: 0; width: 80%; height: 26px; border-right: 2px solid white; background: 0 0;"></div>
</div>

====기본 현대적 HTML====
이 스타일 가능한 HTML 객체 중 하나라도 활성화되면 훨씬 간단할 것입니다:
*progress <html><label for="TractionBar">접지력: </label><progress id="TractionBar" value="32" max="100">32%</progress></html><br/>
*meter <label for="SpeedBar">속도: </label><meter id="SpeedBar" value="65" min="0" max="100">65%</meter>

===HUD 아이콘 띄우기/병합===
[[Last Dose 5 - BDKD(GTA)|Last Dose 5 - BDKD]]에서 사용된 것과 같이<br/>
HUDInstruction 템플릿 안의 테스트 1
{{Help Text|첫 번째 및 마지막 투약 임무는 이제 프릭숍이나 일시 정지 메뉴의 온라인 섹션에서 이용할 수 있습니다. 작업 메뉴의 임무 카테고리로 이동하여 이 임무들을 원하는 순서대로 다시 플레이하십시오.}}
----
{{HUDIcons|game=O|base|animated=y}}{{IconOverlay|{{HUDIcons|game=O|nhpoverlay|green}}}}
===div 이미지의 색조 변경===
<div class="red-to-purple">[[File:Blips-GTAO-405-Fanatic-Red.png|25px]]</div>

[[분류:gta]]