font-size, text-align, id, class, saw, 우선순위

글씨 크기를 조절하고자 할 때의 검색어

: css text sixe property

 

 

font-size: px;

 

가운데 정렬하고자 할 때의 검색어

: css text center property

 

text-align: center;

 

파란색: 아직 방문하지 않았다

보라색: 한 번 방문했었다

​

 

 

Q. 모든 a 태그를 검은색으로 바꾸고 방문했었던 HTML과 CSS는 회색,

현재 방문하고 있는 CSS는 빨간색으로 바꾸고 싶을 경우에는?

 

! 회색으로 표기 가능하나 코드에 중복이 생기게 됨.

​

그래서 class라고 하는 HTML의 속성을 부여하고, 속성의 값으로 '보았다'라는 뜻에서 saw라고 지정한다.

 

 

다음과 같이 입력하였을 경우 적용되지 않는다.

​

보라색 "saw"의 의미란 이 웹페이지의 모든 saw라는 이름의 태그를 선택하는 선택자.

그러나 우리가 하고 싶은 것은 class 값이 saw인 태그이고, 그때 사용하도록 약속된 특수한 기호는 점(.)이다.

​

.saw : 이 웹페이지에 있는 모든 class가 saw인 태그를 가리키는 선택자

 

 

위와 같이 적용이 된다.

 

class : 그룹핑grouping하다, 하나로 묶는다.

​

 

Q. 만약 2. CSS를 빨간색으로 표시하고 싶다면

class = "active" 로 묶은 후 CSS로

.active { color:red; }를 입력하면 된다.

​

class라는 속성의 값은 여러 개의 값(ex. "saw active")이 들어올 수 있고 띄어쓰기로 구분한다.

하나의 태그에는 여러 개의 속성이 들어올 수 있고 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.

​

​

그러나 이는 좋은 방법이 아닌데, <a> 태그가 두 개의 클래스의 영향을 받고 있기 때문이다.

 

이 a 태그가 빨간색이 된 이유는 .active가 .saw보다 나중에 등장하였기 때문이고,

만약 둘의 순서를 바꾸게 되면 회색이 된다.

= 보다 가까이에 있는 명령이 더 큰 영향력을 갖는다.

 

id 선택자

#active

 

#active가 .saw보다 뒤에 등장했음에도 불구하고 붉은색이 적용된다.

​

즉, id 선택자가 class 선택자와 맞붙으면 id 선택자가 이기게 되며,

class 선택자와 a 태그 선택자가 붙으면 class 선택자가 이기게 된다.

 

 

우선순위

id > class > 태그 선택자 (a)

 

 

 

그러나 예를 들어 같은 class 선택자라면 가장 마지막에 등장하는 선택자의 우선순위가 높다.

​

id 선택자의 값이 active인 태그가 웹 페이지에 한 번만 등장하면,

그 다음에는 active 라고 하는 값은 쓰면 안 된다.

써도 웹 페이지가 동작하지 않지는 않으나 쓰지 않아야 한다.

즉, id의 값은 단 한 번만 등장해야 한다.

​

핵심은 id이고 id의 핵심은 중복되어서는 안 된다.

active를 썼기 때문에 문서의 다른 곳에서는 id 값이 active가 나오면 안 된다. = 유일무이한 값

​

​

태그 선택자는 포괄적이고 id 선택자는 구체적이다.

CSS에서는 구체적인 것을 포괄적인 것보다 우선순위를 높였다.

​

태그 선택자를 통해서 전체적인 태그의 디자인을 해내고,

예외적인 것들의 id를 찍어가면서 id 선택자를 통해 예외를 두는 것이 효율적이기 때문이다.