편집 요약 없음 |
편집 요약 없음 |
||
| (같은 사용자의 중간 판 4개는 보이지 않습니다) | |||
| 3번째 줄: | 3번째 줄: | ||
<onlyinclude><includeonly>{{#css: @media screen and (max-width: 768px) { {{{1}}} { {{{mobile}}} } } @media screen and (min-width: 768px) { {{{1}}} { {{{pc}}} } } {{{1}}} { {{{common}}} } }}</includeonly></onlyinclude> | <onlyinclude><includeonly>{{#css: @media screen and (max-width: 768px) { {{{1}}} { {{{mobile}}} } } @media screen and (min-width: 768px) { {{{1}}} { {{{pc}}} } } {{{1}}} { {{{common}}} } }}</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|common=공통 style(선택)}}</pre> | ||
{|{{style|class=wiki|width=100% | 모바일과 PC에서{{툴팁|btn=numbering|numbering=bracket|정확히는 보고 있는 화면의 절대 너비가 768px 이상일 경우 PC처럼, 768px 미만일 경우 모바일처럼 나타납니다.}} 각각 다른 스타일이 적용되는 요소를 만들어 낼 수 있는 틀입니다. | ||
{|{{style|class=wiki|width=100%}} | |||
|- | |- | ||
!colspan=2|예시 | !colspan=2|예시 | ||
| 12번째 줄: | 13번째 줄: | ||
|pc=background: blue;}} | |pc=background: blue;}} | ||
<div class="example-class"></div></syntaxhighlight> | <div class="example-class"></div></syntaxhighlight> | ||
|{{반응형 style|.example-class|common=display: inline-block; width: 50px; height: 50px;|mobile=background: red;|pc=background: blue;}}<div class="example-class"></div> | |{{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=[ 사용 팁 ]}} | |colspan=2|{{펼접|id=tip|title=[ 사용 팁 ]}} | ||
|- | |- | ||
| | | | ||
* '''요소'''에 해당하는 문법. 위 예제에서도 <code><nowiki>class="example-class"</nowiki></code>가 쓰였기 때문에 '요소'에는 <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> | * '''요소'''에 해당하는 문법. 위 예제에서도 <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 개발자 도구의 모바일 화면 모드에서, 모바일에서는 기기를 가로 모드로 기울여서 각각의 차이를 볼 수 있습니다.) |
|||||||||||
[ 사용 팁 ]
| |||||||||||
