웹표준 css 기본규칙

선택자 {속성 : 값 ;}

body (background-color : gray ;}


문법상 표기법은 하나의 속성마다 엔터를 입력하여 구부이 명확히 하여야 하지만
h1
   {
   text-algn : left;
   color : #FFF;
   }



실무에서는 전부 나열하는 방법을 이용
h1   {   text-algn : left;   color : #FFF;   }


1전체 선택자 *
-모든 요소에 대한 스타일을 지정
* {border :0; ; margin :0; }


*#main {border : 1px ; margin : 1px ;}
*.sub {border : 1px ; margin : 1px ;}
-->main 이라는 id를 가진 요소의 모든 하위 요소에 border , margin 값이 1px 씩 표현됨


2타입선택자
-요소명만 선택자로 지정. 가장 많이 이용됨
body {color : black ; background-color : gray ;}
h1 {font-weight : bold ;}


3하위선택자
-주로 타입선택자와 함께 사용. 특정 요소의 묶음 하위에 나오는 요소를 선택자로 지정
li a {text-decoration : underline ;}
a의 태그 요소에만 스타일을 지정



4class선택자, id선택자
-id나 class 이름으로 원하는 요소를 지정

#notice {font-weight : bold ;}
.line01 {color : gray ;}

<p id="notice">공지</p>    <!--굵게 표시됨-->
<p class="line01">사이트오픈</p> <!--회색으로 표시됨-->
 

매번 id와 클래스를 지정해 주고 css를 작성해야 하기에 시간이 많이 걸리고 비효율적이기에
아래와 같이 사용
<style type = "text/css">
#main_title h1 {color : #ccc ;}
#sub_title h1 {color : #aaa ;}
</style>

<div id="main_title">
    <h1>회색글</h1>
</div>

<div id="sub_title">
   <h1>더진한회색글</h1>
</div>



css를 작성할때 너무 많은 클래스를 사용하고 있다면
문서가 제대로 구조화되고 있지 않다는 것을 의미

온라인벼룩시장 중고나라
http://pple2.com