CSS 우선순위

CSS 우선순위는


1. 인라인 방식
<div style="border:1px solid #333;"></div>
와 같이 소스에 바로 기입하는 inline방식


2. id 방식
<div id="test"></div>


3. class 방식
<div class="test2"></div>


4. dom
<p></p>


ex)
<p id="test1" class="test2">1</p>
#test1{font-size:20px; }
.test2{font-size:10px; }


인경우 우선 순위에 의해서 #test1소스가 적용됨.
즉 font-size:20px; 만 적용됨.


참고사항)
css 에서 id, class의 차이점은
id는 한 화면에 고유 값으로 id값 하나만 인정됨.
즉 제일 처음으로 선언된 id만 아이디 값으로 인정.
class는 한화면에 여러개 사용가능.
또한 class는 다중으로 사용이 가능


ex)
<div id="test" class="test2 test3"></div>
<div id="test" class="test2 test4"></div>
<div id="test2"></div>
위와 같은 경우 아이디는 test(처음에 선언된 아이디 값), test2 만 아이디가 됨.


그리고 class는 test2 (한칸띄고) test3 와 같이 dom 하나에 여러 클래스를 넣을 수 있음.
그래서 class는 상속의 계념으로 사용하면 좋음.




클래스 상속의 예.
ex)
.btn1{font-size:20px; display:inline-block; background:#333; }
.btn2{background:#000; }
<span class="btn1 btn2">테스트</span>


이렇게 하면 테스트란 글씨을 가진 dom은
font-size : 20px, display:inline-block가 되고,
배경색은 #000인 dom객체가 됨.


공통속성은 받고, 변경하고 싶은 부분만(여기서는 배경색)만 바꿈.
오버라이딩(overwriting)의 개념..맞나 모르겠네..