입문) HTML 과 CSS (반응형 그리드 , 범용클래스 )

 

범용 클래스

: 엘리먼트의 맞춤 . 기존 클래스명에 추가 가능.

  ex)  </div class="col col-xs-4 col-sm-2 col-md-1">

 

레이아웃

: 한줄 한줄 공간 % 로 만든다

 

프레임워크

: 사이트를 여러개 만들 때 중복적으로 사용되는 CSS 틀

 

HTML

<h1>레이아웃</h1>

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
    <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

 

CSS

div.container {
  max-width:980px;
  margin:0 auto;
  background-color:blue; /*마무리에서 삭제하기*/
  border:10px solid gray;
}
div.row::after {
  content:"";
  display:block;
  clear:both;
}
div.row {
  margin-left:-10px;
  margin-right:-10px;
}
div.row > div.col {
  float:left;
  width:25%; /*화면에서  4등분되어 나옴. 50:2등분 33.3333:3등분 */
  height:100px;
  box-sizing:border-box;
  padding:10px;
}

div.row > div.col::after {
  content: "";
  display:block;
  height:100%;
  background-color:red;
  padding:0 10px;
}

/* 반응형 */

@media (max-width:800px) {
  div.row > div.col {
    width:50%;
  }
}

---

레이아웃 반응형 예시

 

HTMl

<h1>범용</h1>

<div class="container">
  <div class="row">
    <div class="col row1-col3"></div>
    <div class="col row1-col1"></div>
  </div>
    <div class="row">
    <div class="col row2-col4"></div>
  </div>
   <div class="row">
    <div class="col row3-col2"></div>
    <div class="col row3-col2"></div>
  </div>
   <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

 

CSS

div.container {
  max-width:980px;
  margin:0 auto;
  background-color:blue; /*마무리에서 삭제하기*/
  border:10px solid gray;
}
div.row::after {
  content:"";
  display:block;
  clear:both;
}
div.row {
  margin-left:-10px;
  margin-right:-10px;
}
div.row > div.col {
  float:left;
  width:25%;
  height:100px;
  box-sizing:border-box;
  padding:10px;
}

div.row > div.col::after {
  content: "";
  display:block;
  height:100%;
  background-color:red;
  padding:0 10px;
}
/*데스크탑 세계의 룰*/
div.row > div.col.row1-col3 {
  width:75%;
}
div.row> div.col.row2-col4 {
  width:100%;
}
div.row > div.col.row3-col2 {
  width:50%;
}
/*데스크탑 세계의 룰*/

@media (max-width:800px) {
  div.row > div.col {
    width:50%;
  }
    div.row > div.col.row1-col3 {
    width:100%;
  }
}


@media (max-width:500px) {
    div.row > div.col {
    width:100%;
  }
}

 

---

위의 반응형 구현을 범용클래스를 이용해서 조금 더 간단하게 CCS 가능 

4컬럼 반응형 그리드 만들기 !

 

HTML

<h1>4칼럼 반응형 그리드</h1>

<div class="container">
  <div class="row">
    <div class="col col-xs-4 col-sm-2 col-md-1"></div>
    <div class="col col-xs-4 col-sm-2 col-md-1"></div>
    <div class="col col-xs-4 col-sm-2 col-md-1"></div>
    <div class="col col-xs-4 col-sm-2 col-md-1"></div>
  </div>
  
    <div class="row">
    <div class="col col-xs-4 hidden-under-sm a1"></div>
  </div>
  
</div>

 

CSS

div.container {
  max-width:980px;
  margin:0 auto;
}
div.row {
  margin-left:-15px;
  margin-right:-15px;
}
div.row::after {
  content: "";
  display:block;
  clear:both;
}
div.row > div.col {
  width:25%;
  float:left;
  box-sizing:border-box;
  padding:15px;
  background-color:blue;
}
div.row > div.col::after {
  content: "";
  display:block;
  height:100px;
  background-color:gold;
}
/*xs:모바일용 4/1 칸 sm:스몰디바이스,탭 md:미디엄디바이스 */
div.row > div.col.col-xs-1 {
  width:25%;
}
div.row > div.col.col-xs-2 {
  width:50%;
}
div.row > div.col.col-xs-3 {
  width:75%;
}
div.row > div.col.col-xs-4 {
  width:100%;
}
@media (min-width:650px) {
div.row > div.col.col-sm-1 {
  width:25%;
}
div.row > div.col.col-sm-2 {
  width:50%;
}
div.row > div.col.col-sm-3 {
  width:75%;
}
div.row > div.col.col-sm-4 {
  width:100%;
}
}

@media (min-width:750px) {
div.row > div.col.col-md-1 {
  width:25%;
}
div.row > div.col.col-md-2 {
  width:50%;
}
div.row > div.col.col-md-3 {
  width:75%;
}
div.row > div.col.col-md-4 {
  width:100%;
}
}
div.row > div.col.a1::after {
  background-color:red;
}
/*sm밑으로는 none; 649 이하는 없어진다. */
@media (max-width:649px) {
.hidden-under-sm {
  display:none;
}
}