티스토리 뷰

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은 선택자의 안쪽 여백이다. 

 

'web웹프로그래밍' 카테고리의 다른 글

Postman 이용하여 Mock Server 생성, 가상서버에 데이터 확인  (0) 2022.02.04
FLEX 레이아웃  (1) 2022.02.03
Html 핵심  (0) 2022.02.02
1. WAS, Servlet 개념, 정리  (0) 2022.01.30
Spring MVC framework  (0) 2022.01.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함