본문 영역
반응형 기타 상세보기
작성자: 관리자
추천: 0 조회: 3625
반응형 기타
기기별 보기
/* 기기별 보기 */
.only-web{display:block;}
.only-web-inline{display:inline-block;*zoom:1;*display:inline}
.only-tablet{display:none}
.only-tablet-inline{display:none}
.only-mobile{display:none}
.only-mobile-inline{display:none}
.not-web{display:none}
.not-web-inline{display:none}
.not-tablet{display:block;}
.not-tablet-inline{display:inline-block;*zoom:1;*display:inline}
.not-mobile{display:block;}
.not-mobile-inline{display:inline-block;*zoom:1;*display:inline}
/* 타블렛 취급 */
@media screen and (max-width:768px){
.only-web{display:none}
.only-web-inline{display:none}
.only-tablet{display:block;}
.only-tablet-inline{display:inline-block;*zoom:1;*display:inline}
.not-web{display:block;}
.not-web-inline{display:inline-block;*zoom:1;*display:inline}
.not-tablet{display:none}
.not-tablet-inline{display:none}
}
/* 모바일 옆으로 보기로 취급 */
@media screen and (max-width:683px){
.only-tablet{display:none}
.only-tablet-inline{display:none}
.only-mobile{display:block;}
.only-mobile-inline{display:inline-block;*zoom:1;*display:inline}
.not-tablet{display:block;}
.not-tablet-inline{display:inline-block;*zoom:1;*display:inline}
.not-mobile{display:none}
.not-mobile-inline{display:none}
}
위 코드의 단어를 보면 only, web, tablet, mobile, inline, not의 조합으로 이루어져 있습니다.
기기별 단어는 web, tablet, mobile입니다. web은 PC(컴퓨터)를 나타내며, tablet은 타블렛PC를, mobile은 모바일(스마트폰)을 나타냅니다.
only는 "오직"의 뜻을 나타내며, not은 사용안함을 나타냅니다.
inline은 block형태가 아닌 글자형태라는 뜻입니다. 화면에 표시되는 형태는 크게 블록(block)형과 인라인(inline)형으로 나뉩니다. div,table 등이 블록형이고, 글자와 이미지 등은 인라인형입니다. 글자와 이미지를 기기별 보였다가 감추었다하고 싶을 경우 inline형태로 사용하세요.
블록형태는 한줄 전체를 사용하고, 인라인형태는 한줄 안에 있는 것입니다.
| 코드 | 설명 | 기타 |
|---|---|---|
| only-web | PC | PC에서만 출력 |
| only-web-inline | PC | PC에서만 출력(글자형태) |
| only-tablet | 타블렛PC | 타블렛PC에서만 출력 |
| only-tablet-inline | 타블렛PC | 타블렛PC에서만 출력(글자형태) |
| only-mobile | 모바일 | 모바일에서만 출력 |
| only-mobile-inline | 모바일 | 모바일에서만 출력(글자형태) |
| not-web | 타블렛PC,모바일 | PC 출력안함 |
| not-web-inline | 타블렛PC,모바일 | PC 출력안함(글자형태) |
| not-tablet | PC,모바일 | 타블렛PC 출력안함 |
| not-tablet-inline | PC,모바일 | 타블렛PC 출력안함(글자형태) |
| not-mobile | PC,타블렛PC | 모바일 출력안함 |
| not-mobile-inline | PC,타블렛PC | 모바일 출력안함(글자형태) |
등록일:
마지막 수정일:
스타일시트(CSS)
총글수: 12
| 글순서NO | *(첨부파일) | 제목 | 추천 | 조회 | 작성일↑ |
|---|---|---|---|---|---|
| 12 | 없음 | 레이아웃 구조 | 추천:0 | 조회:5824 | |
| 11 | 없음 | 색상표 | 추천:0 | 조회:5588 | |
| 10 | 없음 | 버튼 | 추천:0 | 조회:9126 | |
| 9 | 없음 | 하이라이트 | 추천:0 | 조회:4893 | |
| 8 | 없음 | 인용구 | 추천:0 | 조회:3593 | |
| 7 | 없음 | 테이블(표) | 추천:0 | 조회:3765 | |
| 6 | 없음 | 박스 리스트 | 추천:0 | 조회:4179 | |
| 5 | 없음 | 텝박스 | 추천:0 | 조회:4394 | |
| 4 | 없음 | 아이콘 | 추천:0 | 조회:6762 | |
| 3 | 없음 | 현재글:반응형 기타 | 추천:0 | 조회:3625 |
