css cheat sheet 클래스 선택자, margin(마진), display , center 조정 간단한 구성 요소

 앞에서는 html의 간단한 sheet를 소개 하였습니다.   html은  주로 골격을 나타나는 것이라, 디자인을 하는데는 css로 하여야 합니다. 

아래 코드와 같이 css 관련 하여 매우 간단하게 코딩 하겠습니다. 

• body 부분의 css 코딩 

 body {

  background:yellow;

  color:blue;

  font-size : 20px;

  font-weight:liter;

  text-align:center;

  margin-top: 10px;  

}

• html 코딩     

  <html>

  <head>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    Please accept ou cokkies!

  </body>

</html>

 결과 

  

• 클래스 선택자(class selector) css 코딩

.main {

  margin-top: 100px;

}

.log-img {

  display: block;

  width: 380px;

}

.search-input {

  display: block;

  width: 480px;

}

• 클래스 선택자(class seledctor) html 코딩

  <html>

  <head>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="main" align = "center">

      <img

        class="log-img"        src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"

        width="100%"

      />

      <input class="search-input" type="text" />

      <div>

      </div>

    </div>

  </body>

</html>

 

• margin(마진)의 css 코딩 

body {

  margin: 0;

}

.red {

  background: #c71226;

  height: 100px;

/*  margin-top: 10px;

  margin-left: 10px;

  margin-right: 10px;*/

}

.blue {

  background: #0d1b88;

  height: 100px;

   margin-top: 20px;

  margin-bottom: 20px;

}

.green {

  background: #397327;

  height: 100px;

}

• margin(마진)의 html 코딩 

<html>

  <head>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="red"></div>

    <div class="blue"></div>

    <div class="green"></div>

  </body>

</html>

결과

•  구글 main page 마진과 넒이 조정 css 코딩

.main {

  margin-top: 50px;

}

.log-img {

  display: block;

  width: 200px;

  margin-bottom: 20px;

}

.search-input {

  display: block;

  width: 400px;

}

• 구글 main page 마진과 넒이 조정 html 코딩

<html>

  <head>

      <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="main">

      <img   class = "log-img"   src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"

        width="100%"

      />

      <input width="100%" type="text" />

    </div>

  </body>

</html>

결과

•  margin을 이용한 center 조정 css

img{

  display:block;

  width:200px;

  margin-left:auto;

  margin-right:auto;    

}

•  margin을 이용한 center 조정 html

 <html>

  <head>

     <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <img src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyygEBHnnwLxf2fLCYQZZjTKXCL2n87uhgG3k9vowLJsMCslhwKv_L010V6lgNCYdg8W7iqfUgnepSlO08F9dRx4gMvnQ6c6In5j6kd1wQK8yYy6ExrX6j-usLbZHTw-TXv587bq7gvZyqfzvY3vIgsPE2tAe-BIZIjvShxHPn53Yuqu-pv2lFBiRNV3c7/w263-h213/%EC%BA%A1%EC%B2%98.JPG">

  </body>

</html>

결과