웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

min-width 최소 가로폭 설정 본문

css

min-width 최소 가로폭 설정

jokack01 2011. 11. 11. 09:43

<!DOCTYPE html>
<!--[if IE 6]><html lang="ko" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="ko" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="ko" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="ko" class="ie9"><![endif]-->
<!--[if !IE]><!--><html lang="ko"><!--<![endif]-->
<head>
 <meta charset="utf-8">
 <title>최소 가로폭 설정</title>
 <style type="text/css">
  body {
   /* 가로폭이 700px 이하일 경우만, 700px로 고정한다. */
   min-width: 700px;
   
   /* 가로폭이 1000px 이상일 경우만, 1000px로 고정하라. */
   max-width: 1000px;
   margin: 0 auto;
  }
  
  .ie6 body { width: expression(document.body.clientWidth < 502 ? '500px': auto); }
  
  body:after {
   content: '';
   background-color: red;
  }
  
/*
  .ie7 body {}
  .ie8 body {}
  .ie9 body {}
*/
  
 </style>
 <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
 <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>

 <h1>Lorem ipsum</h1>
 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<ul> 
 <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>
 <li> Aliquam tincidunt mauris eu risus. </li>
 <li> Vestibulum auctor dapibus neque. </li>
 <li> Nunc dignissim risus id metus. </li>
 <li> Cras ornare tristique elit. </li>
 <li> Vivamus vestibulum nulla nec ante. </li>
 <li> Praesent placerat risus quis eros. </li>
 <li> Fusce pellentesque suscipit nibh. </li>
 <li> Integer vitae libero ac risus egestas placerat. </li>
 <li> Vestibulum commodo felis quis tortor. </li>
 <li> Ut aliquam sollicitudin leo. </li>
 <li> Cras iaculis ultricies nulla. </li>
 <li> Donec quis dui at dolor tempor interdum. </li>
 <li> Vivamus molestie gravida turpis. </li>
 <li> Fusce lobortis lorem at ipsum semper sagittis. </li>
 <li> Nam convallis pellentesque nisl. </li>
 <li> Integer malesuada commodo nulla. </li>
</ul>
</body>
</html>

'css' 카테고리의 다른 글

border  (0) 2011.11.11
background  (0) 2011.11.11
margin 외부여백  (0) 2011.11.11
실제 콘텐츠가 없는 CSS 디자인 하기  (0) 2011.11.11
before, after  (0) 2011.11.11
'css' Related Articles more