- <HTML5+CSS3>스타일의 우선순위 목차
스타일은 상속됩니다
-웹 문서에서 사용하는 여러 태그들은 서로 포함 관계를 가지고 있어 포함하는 태그는 부모요소라고 하고 포함된 태그는 자식 요소라고 합니다.
스타일시트에서는 부모 요소에서 있는 속성들이 자식 요소로 전달되는데, 이것을 '상속'이라고 합니다.
부모 요소로부터 자식 요소로 단계별로 스타일이 적용되기때문에 '계단식'이라는 의미를 가진 '캐스게이딩'이라는 단어가 '스타일시트'를 수식하는 말로 붙게 된 것입니다.
%주의할점 : 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다.
why ? : 예를 들어, <body>태그 스타일을 사용하면 문서 전체에 배경 이미지를 지정할 수 있다. 하지만 <body>태그는 자식 요소가 수 없이 많기 때문에, 배경 이미지를 상속하게 되면 수없이 반복해서 표시되므로 이러한 상황을 상속되지 않게 하였습니다.
스타일은 단계적으로 적용되므로, 우선순위 역시 가장 나중에 정의된 스타일을 적용합니다.
하지만, 스타일 규칙에 !important를 추가하면 해당 스타일 규칙이 가장 높은 우선순위를 갖게 됩니다.
ex) <style>
.accent {color : red !important;}
.accent {color : blue ; }
</style>
->이렇게 !important를 추가하면 더 높은 우선순위를 갖게 되기 때문에 red속성이 적용됩니다. (!important)가 없으면 blue로 적용.
선택자
-선택자는 앞에서도 보았지만 속성이 어디에 적용되는지 표시한다고 해서 '선택자'라고 합니다.
참고페이지: http://www.w3.org/TR/css3-selectors
전체 선택자-모든 요소에 스타일 적용하기
-페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용하거나, 다른 선택자와 함께 모든 하위 요소에 한꺼번에 스타일을 적용하려고 할 때 주로 사합니다. 전체 선택자는 *(별표)를 선택자로 사용합니다.
ex) *{
margin:0;
padding:0;
}
태그 선택자-특정 태그에 스타일 적용하기
-태그 선택자는 문서 안의 특정 태그에 스타일이 모두 적용됩니다. 예를 들어,<p>태그에 대한 선택자를 정의하면 웹 문서 안에서 <p>태그의 영향을 받는 모든 내용,즉 문단들에 스타일이 적용되는 것입니다. 기본 형식은
ex) 태그 { 속성:속성값 ; 속성:속성값; ... }
ex) p { font-size:12px; font-family:"돋움";}
-> <p>태그를 사용하는 부분, 즉 텍스트 단락의 스타일을 지정하는 것으로 글자 크기를 12픽셀로 하고 글꼴을 돋움으로 하는것입니다.
클래스 선택자-특정 부분에 스타일 적용하기
-태그 스타일을 정하면 그 태그가 사용된 모든 요소에 적용되지만, 같은 태그라도 어떤 곳에는 다른 스타일을 사용해야한다.
일부 단락에만 다른 스타일을 적용하기 위해서는 클래스 선택자를 사용해야한다. 클래스 이름은 쉬운 이름으로 지정하면 되고 태그 이름과 겹치면 안된다 또한 클래스 이름 앞에 반드시 마침표(.)를 붙여야 합니다.
ex) .클래스이름 { 속성 : 속성 값; 속성:속성 값; ...}
% 클래스 이름을 구현할 때는 클래스 이름 앞에 마침표 ( . )를 붙이지 않습니다.
ex) <p class="readccent"> ->구현할때는 "readccent" 마침표 없이 스타일을 적용할때는 ( . ) 표시로 스타일 정의
<span>태그
-클래스 선택자를 요소 전체에 적용하지 않고 일부에만 적용할 때는 <span>태그를 사용합니다.
ex) <p> 안녕하세요 <span class="accent">요안입구 </span> 에 특곤색의 대문을 달았다 </P>
-> <span>태그를 사용한 요안도레 올레 입구에 accent클래스 선택자 스타일 적용 즉, 태그 안에 span태그를 집어넣어 특정 부분만 적용되게 하고싶을때 사용함
id 선택자 - 특정 부분에 스타일 적용하기
-id 선택자 역시 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용합니다. ( . ) 마침표 대신 #기호를 사용한다는 점만 제외하면 클래스 선택자와와 사용법이 같습니다.
차이점 : 클래스 선택자는 문서 안에서 여러 번 반복해서 적용할 수 있다 but id 선택자는 요소의 크기나 위치 등 레이아웃을 지정할 때 주로 사용하기 때문에 클래스 선택자와 달리 문서 안에서 한번만 적용합니다.
ex) #id 이름 { 속성:속성 값 ; 속성:속성 값; ...}
ex) <ul id="mynav">
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
->이렇게 되면,
#mynav{ color:blue;}
->이렇게 id선택자를 사용해 스타일을 정의했했다면 태그 안에서 id 속성을 사용해 id 스타일을 적용할 수 있습니다.
'HTML&CSS > HTML5' 카테고리의 다른 글
| <HTML+CSS3>속성 선택자 (0) | 2018.10.12 |
|---|---|
| <HTML+CSS3>하위선택자와 형제,그룹,자식 선택자들 (0) | 2018.10.12 |
| <HTML5+CSS3>스타일시트 기초 (0) | 2018.10.12 |
| <HTML5+CSS3>기타 다양한 폼 요소들,버튼넣기,결과 및 진행 ,진행상태 (0) | 2018.10.12 |
| <HTML5+CSS3>태그의 다양한 속성 (0) | 2018.10.10 |
