미디어쿼리 예제
미디어쿼리 예제
화면너비에 맞춰 다른 CSS 적용
@charset "utf-8";
/** 전체박스 */
#wrap {
width: 80%;
height: 600px;
margin: 0 auto;
border: 10px solid #ffff00;
}
/* min - 크기가 작은순서대로 작성, max - 크기가 큰순서대로 작성 */
/* all : 모든장치 (default) */
/* 너비가 320px 이상일때 */
@media all and (min-width:320px){
#wrap {
width: 40%;
background: #000;
}
}
/* 너비가 600px 이상일때 */
@media all and (min-width:600px){
#wrap {
width: 60%;
background: #40b0f9;
}
}
/* 너비가 1024px 이상일때 */
@media all and (min-width:1024px){
#wrap {
width: 90%;
background: #f45750;
}
}
게시글 목록
| 번호 | 제목 |
|---|---|
| 1921 | |
| 1918 | |
| 1911 | |
| 1905 | |
| 1904 | |
| 1896 |
HTML
반응형 레이아웃 와이어프레임
7
|
| 1881 | |
| 1877 |
HTML
가변형 레이아웃 관련
3
|
| 1868 | |
| 1860 |
HTML
반응형 이미지 기법들
8
|
| 1856 |
HTML
UI 관련 유용한 사이트 추천
3
|
| 1853 |
HTML
또 질문드립니다.
2
|
| 1850 | |
| 1844 | |
| 1837 | |
| 1829 | |
| 1827 |
HTML
드림위버 롤오버요~
1
|
| 1819 |
HTML
요걸우째설명해야될지;;;
7
|
| 1815 |
HTML
li 가로정렬
3
|
| 1799 | |
| 1797 | |
| 1791 | |
| 1777 | |
| 1775 | |
| 1765 |
HTML
css 로 레이아웃 컨트롤
9
|
| 1759 | |
| 1757 | |
| 1747 | |
| 1746 | |
| 1739 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기