CSS class와 id
class와 id는 특정 HTML 요소에 대한 영향을 줄 수 있도록 지정하는 선택자(Selector)다.
class는 둘 이상의 클래스를 선언이 가능하며 CSS 구문으로
.class(클래스 이름) {
css(css 속성) declarations(효과);
}
로 class 이름 앞에 . 을 붙여 스타일을 지정한다.
그리고 클래스 내에서는 여러개의 클래스 속성을 지정할 수 있으며 띄어쓰기로 구분한다.
다만 코딩 태그 내에서 속성은 여러개를 사용할 수 있는데, CSS 내에서 같은 class나 element에 대해서 중복된 CSS 스타일이 있다면 적용 우선순위가 있다.
style {
}
내에서 보다 아래에 있는 CSS 언어가 우선순위가 높다.
그 예로
다음과 같은 코딩 결과에서 그림(좌)에서는 CSS에 red 컬러가 적용된 모습을 볼 수 있고, 그림(우)에서는 해당 선언 CSS가 적용되지 않은 것을 확인할 수 있다.
id는 class와는 다르게 중복다만 id의 값은 중복 사용은 가능하기는 하나, 중복은 최대한 배제하여야 한다.
구문은
#id {
css(css 속성) declarations(효과);
}
와 같으며, id 이름 앞에 #을 넣어 지정하면 된다.
css 내에서의 적용 우선순위는 아래에서 위 차순으로 진행된다. 따라서 순서가 중요하게 되는 제약조건이 발생한다. 다음과 같은 사항을 더욱 효율적으로 설계하기 위해서 구분 짓는 것이 id와 class이다. 우선순위는 id > class > 태그 selector이며, 태그 selector중에서는 중복된다면, 아래에 위치한 것이 높다.
우측의 사진은 CSS의 적용 우선순위가 낮은 순으로 작성해두었다.
a(element) > h1(element) > saw(class) > active(id)