선택자 우선순위 & 기타 팁

CSS competing rule(경쟁 규칙)

한 요소에 같은 CSS 규칙을 여러 번 지정할 수 있습니다.

이 글에서는 이를 "경쟁 규칙"이라고 부르겠습니다.

브라우저는 우선순위에 의해 경쟁 규칙 중에서 어느 규칙을 적용할 지 결정하게 됩니다.

예를 들어 브라우저가 각 요소에 기본 규칙을 할당했다고 가정해 봅니다. 

만약 한 요소에 개발자가 다른 규칙을 지정하면 그 규칙은 기본 규칙과 경쟁하지만 개발자가 지정한 규칙이 우선순위가 높으므로 기본 규칙을 덮어 쓰게 됩니다.

여기서 이러한 선택자 우선순위에 대해 간단히 알아보겠습니다.

선택자 우선순위

우선순위에 따라 규칙을 분류하면 규칙에 사용된 선택자 종류에 따라 6개의 그룹으로 나뉩니다.

더 높은 우선순위 그룹의 규칙이 있으면 낮은 그룹의 경쟁 구칙은 무시됩니다.

그룹은 해당 선택자의 명시도에 따라 분류됩니다. 낮은 우선순위 그룹의 선택자는 높은 우선순위 그룹의 선택자에 비해 명시도가 낮습니다.

선택자 우선순위를 결정할 때는, 일반적인 선택자는 문서의 전반적인 스타일을 설정하는데 적용하고, 더 구체적인 선택자는 일반적인 선택자보다 우선시하여 특정 스타일을 적용하는데 적용하길 권장합니다.

여섯 개의 선택자 그룹을 우선순위에 따라 내림차순으로 정리하면 다음과 같습니다.

!important > 인라인 스타일 속성 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자

1 순위 : !important를 포함한 규칙 그룹

!important 가 들어간 규칙은 우선순위가 가장 높은 그룹에 속합니다.

즉, #demo {border: 6px solid red !important; } 규칙이 #demo {border: 2px solid red; } 규칙보다 우선순위가 높다

2 순위 : 인라인 스타일 속성에 지정한 규칙 그룹

• 다른 규칙 그룹보다 우선시되지만 인라인 스타일 속성을 쓰면 코드 유지가 어려우므로 권장하지 않는다.

3 순위 : 아이디 선택자를 사용한 규칙 그룹

4 순위 : 클래스/속성/가상 선택자를 사용한 그룹

5 순위 : 요소 선택자를 사용한 규칙 그룹

6 순위 : 전체 선택자만 사용한 규칙 그룹

경쟁 규칙이 같은 선택자 그룹에 속해 있다면 선택자의 종류와 수에 따라 우선순위가 결정됩니다.

즉, 높은 우선순위의 선택자를 더 많이 사용한 규칙이 이깁니다.

#demo .a .b p span { } 규칙이 #demo .a div p span { } 규칙보다 우선순위가 높습니다. 

그 이유는 두 규칙 모두 아이디 선택자를 사용하므로 우선순위가 3이지만, 전자는 클래스 선택자를 2개 사용했고 후자는 1개만 사용했으므로 비록 후자가 선택자 수는 더 많지만 전자의 우선순위가 더 높습니다.

경쟁 규칙이 같은 선택자 그룹에 속합과 동시에 같은 순위의 선택자를 같은 수만큼 사용한다면 코드 위치에 따라 우선 순위가 결정됩니다.

우선순위가 높은 위치에 있는 규칙이 낮은 위치에 있는 규칙을 덮어씁니다. 이것은 선택자 종류와 수가 똑같을 때만 적용됩니다.

즉 선택자 그룹이 위치 그룹에 우선순위에 미치는 영향력이 큽니다.

여섯 개의 위치 그룹을 우선순위에 따라 내림차순으로 정리하면 다음과 같습니다.

1 순위 : head 요소안의 style 요소

• style 요소 안에 직접 작성한 규칙이 style 요소 안에 @import 문으로 삽입한 CSS 파일의 규칙을 이긴다.

2 순위 : style 요소안의 @import 문

• style 요소 안에 @import 문으로 삽입한 CSS 파일이 link 요소로 연결한 CSS 파일 규칙을 이긴다.

3 순위 : link 요소로 연결된 CSS 파일

• link 요소로 연결한 CSS 파일 규칙이 CSS 파일 안에 @import 문으로 삽입한 규칙을 이긴다.

4 순위 : link 요소로 연결한 CSS 파일안의 @import 문

• link로 연결한 CSS 파일 안에 @import 문으로 삽입한 규칙 중에 최종 사용자가 연결한 CSS 파일의 규칙을 이긴다.

5 순위 : 최종 사용자가 연결한 CSS 파일

• 예외적으로, 최종 사용자가 연결한 CSS 파일 안의 !important 규칙은 우선순위 1위다. 최종 사용자는 !important 규칙을 작성해서 웹사이트 디자이너가 만든 CSS 파일 규칙을 무효화할 수 있다.

6 순위 : 브라우저의 기본 스타일시트

여러 CSS 파일이 같은 우선순위 위치에서 연결되고 삽입돼 있을 때는 연결/삽입 순서에 따라 우선순위가 결정됩니다.

가장 마지막에 연결/삽입된 스타일 시트가 앞의 스타일시트보다 우선순위가 높습니다.

font 속성값 팁

font-family: "Century Gothic", verdana, arial, sans-serif;

콤마로 구분해 나열한 여러 개의 폰트명을 font-family 속성에 할당합니다.

맨 앞에 지정한 폰트가 없으면 브라우저는 두 번째 폰트를 사용하고 그것도 없으면 세 번째 폰트를 사용하는 식입니다.

맨 뒤에는 모든 브라우저가 공통적으로 지원하는 "serif", "sans-serif", "cursive", "fantasy", "monospace" 와 같은 범용 폰트 중 하나를 지정해야 합니다.

폰트명에 빈 칸이 있으면 "Century Gothic" 처럼 반드시 큰 따옴표로 묶어야 합니다.

font-weight: 900;

상수 900을 font-weight 속성에 할당합니다.

이 수치값은 사실 상수입니다. font-weight 속성에 지정할 수 있는 상수값으로는 normal, bold, bolder, lighter, 100~900 등이 있습니다.

font-weight 속성의 수치 값에 대한 브라우저 지원이 섬세하지 않아서 주로 100~400을 normal로 인식하고 500~900을 bold로 인식합니다.

게다가 브라우저나 운영체제 폰트 중 대부분의 굵은 포트와 가는 폰트가 함께 제공되지 않습니다.

그래서 font-weight에 normal 이나 bold 외의 값은 잘 지정하지 않습니다.

예외적으로 웹 폰트를 사용할 시 웹 폰트 지원에 따라 폰트를 수치값으로 사용할 수 있습니다.

알아두면 유익한 정보

글자에 스타일을 적용하는 요소로는 i, b, big, small이 있습니다.

Pre 요소는 공백을 있는 그대로 보존하는 기능을 하며 이미지, 객체, 위 첨자, 아래 첨자를 포함할 수 없습니다.

q 요소는 인용을 브라우저마다 다른 방식으로 삽입합니다.

ins 요소는 삽입한 내용임을 나타내기 위해 글자 아래에 밑줄을 표시하고 del 요소는 삭제한 내용임을 나타내기 위해 글자의 세로 중앙에 취소선을 표시합니다.

iframe, frameset, frame, noframe 같은 프레임 요소를 사용하면 검색 엔진과 사용자 접근이 어려워집니다.

IE7은 hr, fieldset, legend에 적용된 내장 스타일을 제거하지 않지만 IE8이상 버전은 제거합니다.

검색 엔진 최적화(SEO)측면에서 기존에 널리 사용했던 프레임은 화면에 출력될 때 제대로 색인화되지 않는데, 이것은 내용이 대체로 독립된 프레임 안에 있는 컨트롤 외부에서 색인되기 때문입니다.

게다가 frameset 요소는 거의 쓸모가 없어졌으며 끝으로 base 요소는 모든 링크의 루트를 바꿉니다.

base 를 이해하지 않고 사용했다가는 링크가 전부 깨질 수 있습니다.

Jaehee's e-room