<CSS>CSS규칙과 효율적인 코드방법

1. 선택자의 우선순위

            ( 아래, 위, 순서 상관없이)

6) 브라우저 스타일 시트 (user agent style sheet) : 태그마다 기본적으로 제공되는 스타일

5) 태그선택자 

4) 클래스선택자 (.)

3) id선택자 (#)

2) inline CSS : 라인 안에 없는것, 태그 안에 직접 넣는것 (element : 태그) HTML파일에서 태그를 만들때 style 속성을 이용하여 넣는다. 

1) important (!important)

ex) 

기본 HTML 

 5) 태그선택자

4) 클래스선택자

3) id선택자

2) 인라인선택자

1) important 선택자 : 바로 앞에 나온 속성과 속성값에 세미콜론(;) 이 들어가면 안된다. 

2. CSS 체킹순서 

중요도(우선순위) -> 명시도 ( 우선순위가 같을때 어느것이 더 상세하게 표현했는가) -> 순서도 

ex) 명시도 위주 (중요도는 바로 위에, 순서도는 지금까지 많이 해왔다. ) 

기본 HTML

1) 부모태그까지 명시

2) body태그까지 명시

3) html 태그까지 명시

4) 지금까지 썼던 클래스 태그보다 중요도가 높은 id 태그  

5) important 

* important를 하나 더 사용했을 때 

** important 태그는 되도록이면 조금쓰는것이 좋다. 

* id선택자와 important 선택자를 없앤 후  

.aa의 자식태그에 대해서! 

1) body div.ch

2) div.aa div.ch 가 명시성이 더 높다

3. 여러가지 선택자 표기법

1) 태그 없이 나타내기 

1) 기본 HTML

2) 태그 없이 클래스나 id 등으로 선택자를 지정할 수 있다 

( 다만 태그가 있으면 명시도가 올라간다. )

3) 띄어쓰기 : 자식태그

4) 띄어쓰기 없이 바로 태그나 id : 여러개의 이름이 있을 경우 다른 클래스나 id 

5) , 로 여러개의 선택자를 같이 나타낼 수 있다 

2) 속성을 이용한 선택자

태그 or 클래스 or id [속성="속성값] {}

* 효율이 떨어지므로 추천하지 않는 방법이다. HTML 파일 내용을 바꾸지 못할 때 사용한다.  

( 이전의 HTML 그대로 사용)

1) 기본적인 CSS

2) href 속성 이용

3) class 속성 이용 (class도 속성이다)

4) input태그 속성 이용하여 스타일 넣기 

4. 특수문자를 이용한 선택자 

1) 띄어쓰기 : 모든 자식들

2) > : 한단계 아래의 자식들

3) + : 바로 다음 스텝의 태그

4) ~ : 다음의 모든 태그

( 기본 HTML ) 

1) 띄어쓰기 : 모든 자식들 (손주들도 적용됨)

2) < : 바로 다음 자식들 ( back-front)

3) + : 바로 다음 스텝

4) ~ : 다음의 모든 스텝

* ~보다 +를 사용하는게 더 좋다.