입문) CSS (반응형 그리드)

그리드 란 ?

격자구조 

 

레이아웃 

디자인 요소를 하나하나 쌓아 가는 것

 

미디어 쿼리 ★★★

CSS에 있는 거의 유일한 조건문 ( and 가능 )

 

@media (max-width: 500px) {

   color:red;

     }=== 최대 화면 500px 까지 red컬러

 

@media (min-width:1000px)

===최소 너비가 1000px 이상일때 작동

 

범용 클래스 (미디어 쿼리를 이용한 브레이크 포인트)

CSS 작업을 줄여주는 것 ( 기성복 )

 

 

음수마진 

부분 유령화 / 부모 때문에 특정 공간이상이 생기지 않을 때 마이너스 마진 사용함

(margin , border , padding 으로 공간이 생기지 않을 때  마이너스)

 

 

CSS 속성

height : 높이

margin : border 밖 화면과의 외부여백 (많이 주면 안에 공간이 줄어든다)

padding : content 와  border 사이의 영역

border : 테두리 효과 (두께, 선의 종류, 색상 순서)

box-sizing:border-box; : 너비를 정하고나서 이것을 설정하면 padding,  border는 안쪽으로 파고들어서 너비는 변하지 않는다.

max-width:20; : 너비가 변하지 않는다.반응형에서 20이상 더이상 커지지 않도록.

margin-left:auto; : 왼쪽 여백 자동

margin-right:auto; : 오른쪽 여백 자동

margin:0 auto; : 가운데 정렬

row : 엑셀에서의 한 줄

col : 칸의 배열 

 

 

<예제 1 > 그리드 

HTML

<h1>예제  </h1>
<div class="a"></div>

 

 

CSS

div.a, div.b {
  height:250px; 
  background-color:blue;
  margin:10px; 
  width:500px; 
}
div.b {
  background-color:green;
  padding:10px; 
  border:10px solid gold; 

  box-sizing:border-box; 
}

 

<예제2>  박스의 중간정렬

div.a {
  height:500px;
  background-color:pink;
  max-width:20; 
  margin:0 auto; 
}

 

 

<예제3> 미디어 쿼리

body {
  background-color:red;
}
div.a {
  min-widht:100px;
  min-height:200px;
  background-color:inherit; /*body 배경화면 따라감 */
  border:10px solid black;
}
/* 조건 특정 구간 */ 
@media (max-width: 900px) and (min-width:500px) {
  body{
    background-color:blue;
     }
   }

 

<예제4> 음수마진

HTML

<h1>예제  </h1>
<section>
   <article>  
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </article>
</section>

 

CSS

section{
  max-width:1000px;
  margin:0 auto;
  border:10px solid black;
}
section::after {
  content:"";
  display:block;
  clear:both;
}

section div {
    float:left;
    width:25%;
    height:100px;
    background-color: red;
    box-sizing:border-box; /*박스의 테두리를 기준으로 크기를 정한다.*/
    border:0 solid gold; /*테두리 설정*/
    border-width:0 15px; /*테두리의  상하, 좌우 설정 */
  
}
 
section div:last-child {
    background-color:blue;
}

section div:first-child {
    background-color:pink;
}
section article {
  margin:0 -25px;
}

/* div 엘리먼트를 하나 더 article 로 감싸서 음수마진을 준다.*/

 

<예제5> 음수마진2

HTML

<h1>예제</h1>

<section class="a">
    <div></div>
</section>

 

CSS

section.a {
    width:700px;
    height:500px;
    border:10px solid red;
    margin:0 auto;
} 

section.a div {
    display:block;
    width:auto;
    height:80%; /*부모랑 너비, 높이 똑같이 맞추는것 100%*/
    background-color:gray;
    margin:20px -10px;
    /*음수마진으로 부모테두리 유령화 가능*/
}

 

 

<예제 6> 그리드 기초

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>

 

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%; /*50%하면 container  한줄에 8개 나옴*/
  height:100px;
  box-sizing:border-box;
  padding:10px;
}

div.row > div.col::after {
  content:"";
  display:block;
  height:100%;
  background-color:red;
}
/*조건을 넣어서 화면 분할*/
@media (max-width:800px ) {
  div.row > div.col {
    width:100%; /*퍼센티지로 조절*/
  }
}

 

 

<예제 7> 범용클래스  21강