CSS속성

web_css 7. css 선택자의 기본

 

font-size:45px; #글자크기
--------------------------------      

text-align: center; #중앙정렬--

------------------------------------

    .saw { =>.saw(saw 모두 선택함)
      color:gray;
    }

class="saw"

-----------------------------

----------------------------

    .active {
      color:red;
    }

---------------------

class="saw active"

-------------------

 

------------------------------

-  class="saw" id="active" id선택자가 이긴다

--------------------------

    a {
      color:black;
      text-decoration: none;
    }

.saw {
      color:gray;

=> 태그 선택자와 class선택자가 붙으면 class 선택자가 이긴다.

class="saw"

----------------------------------------------------------

순서

tag(a{   } )(포괄적인것)<class<id(id="active")(구체적인것) 순으로 강함

 

원리는??

id="active"값은 단 한번만, 즉 id는 중복되서는 안된다.(active는 유일무이값)

 

----------------------------------------------------------------------------------

web_css 8. box_model

 

<style>
      h1{
        border-width:5px;
        border-color:red;
        border-style:
      }
      </style>

=> 선 두께, 색, 스타일

----------------------------------------------------------

      /*
      block level element
      */

=> 주석처리
      h1{
        border-width:5px;
        border-color:red;
        border-style: solid;
      }

 

----------------------------------------------------------
      /*
      inline element
      */

=> a 태그 주석처리
      a{
        border-width:5px; 
        border-color:red;
        border-style: solid;
      }

---------------------------------------------------------

축약형(중복제거)

      h1, a{
        border-width:5px;
        border-color:red;
        border-style: solid;
      }

--------------------------------------------------------

축약형2

      h1, a{
        border:5px solid red;
      }