편집 요약 없음 |
편집 요약 없음 |
||
| (같은 사용자의 중간 판 11개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
{{namucat|김찬/제작한 틀}} | {{namucat|김찬/제작한 틀}} | ||
{{틀 도움}} | {{틀 도움}} | ||
<onlyinclude><includeonly>{{#css: @media screen and (max-width: 768px) { {{{1}}} { {{{mobile}}} } | <onlyinclude><includeonly>{{#css: @media screen and (max-width: 768px) { {{{1}}} { {{{mobile}}} } } @media screen and (min-width: 768px) { {{{1}}} { {{{pc}}} } } {{{1}}} { {{{common}}} } }}</includeonly></onlyinclude> | ||
@media screen and (min-width: 768px) { {{{1}}} { {{{pc}}} } } }}</includeonly></onlyinclude> | <pre style="white-space: pre-wrap;">{{반응형 style|요소|mobile=모바일 style|pc=PC style|common=공통 style(선택)}}</pre> | ||
<pre style="white-space: pre-wrap;">{{반응형 style|요소|mobile=모바일 style|pc=PC style}}</pre> | 모바일과 PC에서{{툴팁|btn=numbering|numbering=bracket|정확히는 보고 있는 화면의 절대 너비가 768px 이상일 경우 PC처럼, 768px 미만일 경우 모바일처럼 나타납니다.}} 각각 다른 스타일이 적용되는 요소를 만들어 낼 수 있는 틀입니다. | ||
{|{{style|class=wiki|width=100%}} | |||
|- | |||
!colspan=2|예시 | |||
|- | |||
|모바일에서 빨간 박스, PC에서 파란 박스<br>(PC에서는 F12 개발자 도구의 모바일 화면 모드에서, 모바일에서는 기기를 가로 모드로 기울여서 각각의 차이를 볼 수 있습니다.)<syntaxhighlight line="" lang="html+handlebars" style="white-space: pre-wrap;">{{반응형 style|.example-class | |||
|common=display: inline-block; width: 50px; height: 50px; | |||
|mobile=background: red; | |||
|pc=background: blue;}} | |||
<div class="example-class"></div></syntaxhighlight> | |||
|{{style|width=calc(50px + .6rem)}}|{{반응형 style|.example-class|common=display: inline-block; width: 50px; height: 50px;|mobile=background: red;|pc=background: blue;}}<div class="example-class"></div> | |||
|- | |||
|colspan=2|{{펼접|id=tip|title=[ 사용 팁 ]}} | |||
|- | |||
| | |||
* '''요소'''에 해당하는 문법. 위 예제에서도 <code><nowiki>class="example-class"</nowiki></code>로 {{u|클래스}}가 쓰였기 때문에 '요소'에는 앞에 점을 붙여 <code>.example-class</code>라고 입력되었다.<table {{style|class=wiki|align=center}}><tr><td>{{code|<태그>}}</td><td>=</td><td>{{code|태그}}</td></tr><tr><td>{{code|class{{=}}"클래스"}}</td><td>=</td><td>{{code|.클래스}}</td></tr><tr><td>{{code|id{{=}}"아이디"}}</td><td>=</td><td>{{code|#아이디}}</td></tr></table> | |||
{{펼접끝}} | |||
|} | |||
{{김찬 제작 틀}} | {{김찬 제작 틀}} | ||
2024년 12월 26일 (목) 23:38 기준 최신판
| 틀:반응형 style | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
{{반응형 style|요소|mobile=모바일 style|pc=PC style|common=공통 style(선택)}}
모바일과 PC에서정확히는 보고 있는 화면의 절대 너비가 768px 이상일 경우 PC처럼, 768px 미만일 경우 모바일처럼 나타납니다. 각각 다른 스타일이 적용되는 요소를 만들어 낼 수 있는 틀입니다.
| 예시 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 모바일에서 빨간 박스, PC에서 파란 박스 (PC에서는 F12 개발자 도구의 모바일 화면 모드에서, 모바일에서는 기기를 가로 모드로 기울여서 각각의 차이를 볼 수 있습니다.) |
|||||||||||
[ 사용 팁 ]
| |||||||||||
