• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

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 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012