@charset "utf-8"; /* 간단한 유동 미디어 참조: 유동 미디어를 만들려면 HTML에서 미디어의 높이 및 폭 속성을 제거해야 합니다. http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6은 max-width를 지원하지 않으므로 폭 100%를 기본값으로 사용합니다. */ .ie6 img { width:100%; } /* Dreamweaver 유동 격자 속성 ---------------------------------- dw-num-cols-mobile: 5; dw-num-cols-tablet: 8; dw-num-cols-desktop: 10; dw-gutter-percentage: 25; Ethan Marcotte의 "Responsive Web Design"과 http://www.alistapart.com/articles/responsive-web-design Joni Korpi의 Golden Grid System에서 받은 영감 http://goldengridsystem.com/ */ /* 모바일 레이아웃: 480px 이하 */ .gridContainer { margin-left: auto; margin-right: auto; width: 87.36%; padding-left: 1.82%; padding-right: 1.82%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } /* 타블렛 레이아웃: 481px~768px. 다음에서 스타일 상속: 모바일 레이아웃. */ @media only screen and (min-width: 481px) { .gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } /* 데스크톱 레이아웃: 769px~최대 1232px. 다음에서 스타일 상속: 모바일 레이아웃 및 타블렛 레이아웃. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.2%; max-width: 1232px; padding-left: 0.9%; padding-right: 0.9%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } }