틀:반응형 style: 두 판 사이의 차이

편집 요약 없음
편집 요약 없음
17번째 줄: 17번째 줄:
|-
|-
|
|
* '''요소'''에 해당하는 문법<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>가 쓰였기 때문에 '요소'에는 <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년 7월 8일 (월) 22:10 판

:반응형 style
사용문서
새로고침
넘겨주기
이동하기

{{반응형 style|요소|mobile=모바일 style|pc=PC style|common=공통 style(선택)}}
예시
모바일에서 빨간 박스, PC에서 파란 박스
(PC에서는 F12 개발자 도구의 모바일 화면 모드에서, 모바일에서는 기기를 가로 모드로 기울여서 각각의 차이를 볼 수 있습니다.)
{{반응형 style|.example-class
|common=display: inline-block; width: 50px; height: 50px;
|mobile=background: red;
|pc=background: blue;}}
<div class="example-class"></div>
[ 사용 팁 ]
  • 요소에 해당하는 문법. 위 예제에서도 class="example-class"가 쓰였기 때문에 '요소'에는 .example-class라고 입력되었다.
    <태그>=태그
    class="클래스"=.클래스
    id="아이디"=#아이디
+
김찬 제작 틀
[ A~Z & etc. ]
[ ㄱ~ㅅ ]
[ ㅇ~ㅎ ]
※ 더 이상 사용하지 않거나 사용할 필요가 없는 경우 취소선 처리
※ 일부 극히 단순한 틀은 본 틀 목록에 미포함