• Q&A
  • 회원가입
  • 로그인

[responsive] CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)

1,664  

Grid 예제

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {

  box-sizing: border-box;

}


img {

  width: 100%;

  height: auto;

}


.row:after {

  content: "";

  clear: both;

  display: table;

}


[class*="col-"] {

  float: left;

  padding: 15px;

  width: 100%;

}


@media only screen and (min-width: 600px) {

  .col-s-1 {width: 8.33%;}

  .col-s-2 {width: 16.66%;}

  .col-s-3 {width: 25%;}

  .col-s-4 {width: 33.33%;}

  .col-s-5 {width: 41.66%;}

  .col-s-6 {width: 50%;}

  .col-s-7 {width: 58.33%;}

  .col-s-8 {width: 66.66%;}

  .col-s-9 {width: 75%;}

  .col-s-10 {width: 83.33%;}

  .col-s-11 {width: 91.66%;}

  .col-s-12 {width: 100%;}

}


@media only screen and (min-width:750px ) {

  .col-1 {width: 8.33%;}

  .col-2 {width: 16.66%;}

  .col-3 {width: 25%;}

  .col-4 {width: 33.33%;}

  .col-5 {width: 41.66%;}

  .col-6 {width: 50%;}

  .col-7 {width: 58.33%;}

  .col-8 {width: 66.66%;}

  .col-9 {width: 75%;}

  .col-10 {width: 83.33%;}

  .col-11 {width: 91.66%;}

  .col-12 {width: 100%;}

}


html {

  font-family: "Lucida Sans", sans-serif;

}

body {

  margin:5;

  background:rgba(30,31,38,0.1);

}

.header {

  background-color: rgba(30,31,38,0.8);

  color: #ffffff;

  padding: 15px;

}


.menu ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}


.menu li {

  padding: 8px;

  margin-bottom: 7px;

  background-color :rgba(30,31,38,0.6);

  color: #ffffff;

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}


.menu li:hover {

  background-color: rgba(30,31,38,0.7);

}


.aside {

  background-color: rgba(30,31,38,0.6);

  padding: 15px;

  color: #ffffff;

  text-align: center;

  font-size: 14px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}


.footer {

  background-color: rgba(30,31,38,0.8);

  color: #ffffff;

  text-align: center;

  font-size: 1.2em;

  padding: 15px;

}

</style>

</head>

<body>


<div class="header">

  <h1>홈짱닷컴</h1>

</div>


<div class="row">

  <div class="col-3 col-s-3 menu">

    <ul>

      <li>코딩언어</li>

      <li>빌더서버</li>

      <li>질문답변</li>

      <li>회원포럼</li>

    </ul>

  </div>


  <div class="col-6 col-s-9">

    <h1>홈짱닷컴 소개</h1>

    <p>홈페이지 제작관리 + 서버관리 교육</p>

    <img src="https://source.unsplash.com/random" width="460" height="345">

  </div>


  <div class="col-3 col-s-12">

    <div class="aside">

      <h2>HTML</h2>

      <p>뼈대・골격・기본틀</p>

      <h2>CSS?</h2>

      <p>디자인 외관</p>

      <h2>JS</h2>

      <p>동작・기능</p>

    </div>

  </div>

</div>


<div class="footer">

  <p>Since 2012</p>

</div>


</body>

</html>


결과보기

※ 그리드 : 화면 너비를 12분할해서, 화면 크기에 따라 유기적으로 변동되는 시스템 (예) BootStrap 


찾아주셔서 감사합니다. Since 2012