CSS 핵심

web웹프로그래밍

CSS 핵심

짱쭈니어 2022. 2. 2. 16:45

css는 html에 디자인을 더해주는 요소이다.

선택자{
	속성1: 값;
    속성2: 값;
}

선택자

선택자는 스타일을 적용하는 대상이다. id, class, tag를 선택할 수 있다.

/*tag 가 선택자일때 */

p{
	color:orange;
}

/*id 가 선택자일때 */
#title{
	color:blue;
}

/* class가 선택자일때 */

.item{
	color:red;
    }

<html>
  <head>
    <style type="text/css">
      p {
      /*태그일때*/
        color: orange;
      }
      #id-test{
 	  /*아이디일때*/         
 	color:blue;
      }
      .class-test{
      /*클래스일때*/
       color: red;
      }
    </style>
  </head>
  <body>
    <p>Hello Grab</p>
    <p>Hello Everyone</p>
    <div id="id-test">id가 적용된다.</div>
    <div class="class-test">class가 적용된다.</div>
    <div class="class-test">class가 적용된다.</div>
  </body>
</html>

복합선택자

 #item-list  #item3 {
        margin-bottom: 32px;
        background-color: yellow;
      }
      #item-list > #item4 {
        margin-left: 16px;
        margin-bottom: 32px;
        background-color: green;
        border: 5px solid blue;
      }

#item-list #item3인경우는

item-list안에 있는 모든 item3이 해당이고

#item-list>#item4인경우는

item-list안에 있는 첫번째 item4자식이다.

Margin , Padding

Margin은 선택자의 바깥 여백이다.

Padding은 선택자의 안쪽 여백이다.