05. 선택적 스타일 적용 (2)

해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

태그 어트리뷰트 기반 스타일 정의

스타일 어트리뷰트는 모두 CSS가 처리하는게 맞지만 많은 HTML 태그에서는 여전히 스타일을 정의하는 어트리뷰트들을 갖고있다. ex) img태그는 src어트리뷰트를 통해 로드할 이미지 파일의 소스를 지정한다. 

이러한 어트리뷰트나 어트리뷰트 값을 사용해 HTML 엘리먼트에 스타일을 적용할 수도 있다. 

이렇게 하면 어트리뷰트가 설정된 경우 어트리뷰트 값이 특정 값인지 아닌지에 따라 스타일을 설정 할 수 있다. 

 

- 엘리먼트 어트리뷰트 기반으로 한 스타일 설정 

 

a[title |= "resume"] { color: red; }

<a href = "" title="resume-link"> resume</a>

형식	이름	스타일 적용 엘리먼트
[attr]	어트리뷰트	지정한 어트리뷰트를 갖는 엘리먼트
[attr = "value"]	정확한 값	어트리뷰트 값이 지정 값과 정확히 일치하는 엘리먼트
[attr~="value"]	공백 목록	어트리뷰트 값이 공백으로 구분한 목록 내의 값과 정확히 일치하는 엘리먼트
[attr |= "value"]	하이픈 목록	어트리뷰트 값이 하이픈으로 구분한 목록내의 값과 정확히 일치하는 엘리먼트
[attr ^= "value"]	~로 시작	어트리뷰트의 시작 값이 지정 값과 정확히 일치하는 엘리먼트
[attr $= "value"]	~로 끝	어트리뷰트의 끝 값이 지정 값과 정확히 일치하는 엘리먼트
[attr *= "value"]	포함	어트리뷰트 값이 지정한 값 일부와 일치하는 엘리먼트

 

미디어 쿼리

미디어를 조회해 @media 규칙을 사용하면 일반 기기 유형이 아니라 사이트 방문자가 이용하는 특정 기기에 딱 맞는 맞춤형 페이지를 보여줄 수 있다. 

이때 맞춤형으로 보여줄 수 있는 사항에는 인쇄 크기, 모바일 관련 기기 관련 크기 , 최적화된 브라우저 창 크기등이 있다.

 

- 미디어 쿼리 

 

media="screen and (min-width : 600px) and (max-width : 980px)"

 

브라우저 창의 현재크기를 알고싶다면 자바스크립트로 알 수 있지만 조금 귀찮다. 미디어 쿼리를 사용하면 테스트 할 수 있는 공통 미디어 속성들을 쉽게 알 수 있고 환경에 최적화된 스타일 시트를 적용 할 수 있다 

> 화면비율은 16:9 같은 화면 비율로 기기의 상대적인 크기를 나타낸다

> 너비와 높이는 디스플레이 영역의 크기를 나타낸다. 이 값들은 최댓값 또는 최솟값으로 표현될 수 있다. 

 

- @media규칙의 사용법

 

@media screen and (width =480px) {

    h1 {color : red; }

}

 

미디어 쿼리를 사용하면 <link> 및 <style>태그의 media 속성에 스타일을 지정할 수 있다. 

@media 규칙을 사용하면 스타일 시트에 미디어 쿼리를 직접 임베드할 수 있다. 

 

부모로부터의 속성 상속

자식과 자손 HTML태그는 CSS를 사용해 스타일을 지정했든 브라우저 스타일을 그대로 상속했든 보통 부모의 스타일을 상속한다. 이를 스타일 상속이라고 한다. 

마진, 너비, 보더등은 상속되지 않는다.

 

특정 엘리먼트가 부모로부터 속성을 강제로 상속받게 하려면 많은 CSS속성이 갖고있는 inherit 값을 사용하면 된다. 

 

- 기존 속성값과 상속한 속성값 관리

선택자에 대한 스타일을 정의할 때는 특별히 재정의할 의도가 아니라면 상속한 속성이나 내재속성을 잃어버리지 않게 주의해야한다. 기존속성을 일부러 수정하지 않는 한 이들 속성은 모두 그대로 스타일에 적용되어 나타난다. 

 

inherit - 일반적으로 상속되지 않는 속성을 상속하게 하거나 적용된 스타일 값을 재정의하고 부모의 값을 상속하게 한다.

none - 보더, 이미지, 기타 시각적인 엘리먼트를 감춘다. 

normal - 아무런 스타일도 적용되지 않게 한다.

auto -  브라우저가 상황에 따라 엘리먼트를 어떻게 보여줄지 결정하게 한다.

 

!important 선언 지정

h1{ color : red !important; }

!important 선언을 추가하면 캐스케이딩 순서를 결정할 때 특정 속성-값 선언에 가장 높은 우선순위를 줄 수 있다.

 

캐스케이딩 순서의 판단

캐스케이딩 순서는 페이지 상단에서부터 시작해 아래로 내려오면서 스타일이 서로 합쳐지고 상속을 통해 대체되는 순서를 나타낸다. 보통은 가장 나중에 정의한 스타일이 사용된다. 

 

- 엘리먼트의 캐스케이딩 우선순위 판단

엘리먼트에 적용할 스타일을 모두 모은 후 캐스케이딩 순서에 따라 어떤 스타일이 적용될 지 판단한다. 

아래 기준에서는 상위에 있는 기준이 우선순위가 더 높다.

 

1) 사용자 스타일
사용자가 지정한 자신의 기본스타일 시트

 

2) 인라인 스타일

스타일이 인라인으로 지정되면 다른 모든 사항들보다 우선적으로 적용된다. 최종 HTML 코드에 인라인 스타일을 사용하면 안되는 이유도 이 때문이다.

 

3) 미디어 타입

스타일에 대해 미디어 타입을 설정하고 해당 미디어 타입의 엘리먼트가 보이지 않으면 스타일이 사용되지 않는다.

 

4) 중요도

!important를 선언에 포함시키면 페이지가 보일때 가장 높은 우선순위가 선언에 부여된다. 만일 페이지 작성자와 사용자 모두 선언에 !important를 사용했다면 사용자가 지정한 선언이 적용된다.

 

5) 구체성

HTML, 클래스, ID선택자의 규칙이 구체적일수록 중요도가 높아진다. 우선순위를 판단할때 ID선택자는 100, 클래스는 10, 선택자는 1 값으로 계산된다. 따라서,

#copy p b { color: red; }는 값리 102인 반면

b { color: lime; )은 1밖에 안된다. 따라서 붉은 색이 적용된다. 

 

6) 순서

마지막에 나열된 규칙에 우선순위를 부여한다. 이때 인라인 스타일은 항상 우선적으로 적용된다. 

 

7) 부모로부터 상속한 스타일

 

8) 브라우저 기본스타일