편집토론문서 역사

틀:반응형 style

Kimchan (토론 | 기여)님의 2024년 8월 26일 (월) 22:18 판
분류:
틀:반응형 style
사용문서
새로고침
넘겨주기
이동하기
 
{{반응형 style|요소|mobile=모바일 style|pc=PC style|common=공통 style(선택)}}

모바일과 PC에서[1][1] 정확히는 보고 있는 화면의 절대 너비가 768px 이상일 경우 PC처럼, 768px 미만일 경우 모바일처럼 나타납니다. 각각 다른 스타일이 적용되는 요소를 만들어 낼 수 있는 틀입니다.

예시
모바일에서 빨간 박스, 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. ]
[ ㄱ~ㅅ ]
ㄱ
틀:가로 목록 틀:가로세로비 틀:가로줄 틀:가입일 유저박스
틀:가짜 링크 틀:가짜 문단 틀:갤러리 (김찬) 틀:공백
틀:관련 문서 틀 제목 틀:광과민성 주의 틀:군대 유저박스
(상세) 		틀:굵게
틀:그라데이션 글씨 틀:글리치 틀:글배경 틀:글씨 테두리
ㄴ
틀:나무링크 틀:나무마크 틀 틀:나무위키 둘러보기 틀:나무위키 접기
틀:나무위키 접기2
(제목 / 내용) 		틀:나무위키 테이블 틀:나무위키 텍스트 크기 틀:나무위키 틀 접기
(애니메이션)
틀:나무위키 틀 접기 끝 틀:나무위키식 문서 상태 틀 틀:내비게이션 바 색상 틀:너비맞춤
틀:넘겨주기 틀:넘겨주기 안내 틀:네온 글씨
ㄷ
틀:다크모드 틀:대화담벼락 틀:댓글 금지 틀:둥근 이미지
틀:등급 유저박스
ㄹ
틀:루비 문자
ㅁ
틀:막대 그래프 틀:말풍선 틀:말풍선 각주
(버튼 / 내용 / 시작 / 끝) 		틀:메타 분류
틀:메타 틀 틀:명도 틀:모바일 테이블
(/tag) 		틀:모바일 테이블 끝
(/tag)
틀:목차제거 틀:문단 틀:문단접기 틀:문단접기2
틀:문단접기3 틀:문서 가져옴 틀:문서 보충 틀:미공개
틀:미디어위키 접기 V2 틀:밑줄 없는 링크
ㅂ
틀:반복 틀:반응형 style 틀:반전 틀:반전2
틀:배경색 명도 조절 틀:백분율 틀:버튼 틀:별점
틀:복사방지 틀:부계정 유저박스 틀:분류 바로가기 틀:분류앵커
틀:불법2 틀:블러2 틀:블러3 틀:블러4
틀:블링크 틀:비공식 설정 틀:빈 이미지
ㅅ
틀:사건사고 틀:산문적 문서 틀:상징색 틀:색상 수평줄
틀:성적 요소 틀:세계관 무관 틀:세계관 별점 틀:소설
(시작 / 끝 / 버튼 / 클립보드)
틀:소셜 프로필 틀:소속단체 유저박스 틀:수평줄 꾸미기 틀:순차형3
틀:스포일러 강조 틀:실루엣 틀:씹덕주의
[ ㅇ~ㅎ ]
※ 더 이상 사용하지 않거나 사용할 필요가 없는 경우 취소선 처리
※ 일부 극히 단순한 틀은 본 틀 목록에 미포함