3. CSS 적용 우선 순위
여러분은 조금 전 웹 페이지에 어떻게 CSS 코드를 이용하여 스타일을 적용할 수 있는지에 대해서 3 가지 방법을 배웠습니다. 웹 사이트를 만들다 보면 다수의 스타일을 적용하게 되며 3 가지 방법을 혼합하여 상황에 따라 사용하게 됩니다. 그런데 만약 일부 스타일을 중복될 경우 어떻게 내부적으로 처리될까요? 조금 전 3가지 방법을 이용한 결과로 다음과 같이 동일한 결과를 얻었습니다.
이 3 가지 방법에 대한 스타일이 적용되는 우선 순위는 다음과 같습니다.
이제 확인을
위해 메모장을 열어서 다음과 같이 “inlineStyle.html”과 동일한 형태로 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title><head>CSS 적용 우선
순위 알아보기</title>
</head>
<body style="background-color:
yellow">
<strong
style="font-weight: bolder; font-size:20px">CSS</strong>를
이용하는 방법<br/>
<p
style="margin-left:20px">여러분들이 CSS를
웹 페이지에 적용하는 방법은 <head> 태그
블록 내에 직접 CSS 관련
코드를 입력하는 방법, 필요한 HTML 태그 내에 직접 CSS 코드를
입력하는
방법, 마지막으로 파일 확장자가 .css로 끝나는 외부 파일에 CSS 코드를 작성,
저장한 후 이를 웹 페이지에서 참조하여 CSS에 정의된 대로 스타일을 적용하는 방법으로
나눌 수 있습니다.</p>
</body>
</html>
위와 같이 작성한
후 “priorityStyle.html”로 저장합니다. IE9을
통해 보면 3가지 방법을 이용한 결과로 동일한 결과를 나타냅니다. 다음으로
아래와 같이 <head> 태그 블록 안에 직접 CSS 관련
코드를 입력하는 코드, 외부 파일을 이용한 코드를 다음과 같이 추가합니다.
<title><head>CSS 적용 우선 순위 알아보기</title>
<link rel="stylesheet" type="text/css"
href="bodystrongp.css"/>
<style>
body {background-color: yellow}
strong {font-weight: bolder;
font-size:20px }
p { margin-left:20px}
</style>
저장한 후 IE9을 통해 보면 역시 동일한 결과를 나타냅니다. 현재 body, strong 태그에 모두 동일한 스타일이 정의되어
적용되어 있는 상태입니다.
3.1 외부 파일을 이용한 CSS 코드 적용 수준 변경
현재 3가지
방법이 적용된 “priorityStyle.html”에 대해 body 태그에 외부 파일을 이용한 CSS 코드 단에서 배경색을
파란색(blue)로 변경하여 봅니다. 이를 위해서 “bodystrongp.css” 파일을 메모장으로 열어서 아래와 같이 해당 코드를 수정합니다.
body
{background-color:blue}
저장한 후 IE9를 통해 “priorityStyle.html” 열어보면 배경색의 변화가 없습니다. 다음으로
메모장을 열어서 <head> 태그 블록 내에 직접 CSS 관련
코드와 <body> 태그를 다음과 같이 수정합니다.
<style>
strong {font-weight: bolder;
font-size:20px }
p { margin-left:20px}
</style>
<body>
위와 같이 하면 <head> 태그 블록 내에 직접 CSS 관련 코드와 <body> 태그를 이용한 CSS 관련 코드는 모두 제거한 후 저장합니다.
IE9를 통해 “priorityStyle.html” 열어보면
조금 전과는 다르게 배경색이 외부 파일인 “bodystrongp.css
파일”에 설정한대로 배경색이 파란색(blue)로
변경되어 나타납니다. 이를 통해 알 수 있는 것은 외부 파일의 적용 우선 순위에 있어서 같은 스타일이
중복될 경우 필요한 HTML 태그 내에 직접 CSS 코드를 입력 적용하는 것보다 우선
순위가 낮음을 알 수 있습니다.
3.2 <head> 태그 블록 내에 직접 CSS 적용 수준 변경
strong 태그에 대해서 <head> 태그 블록 내에
직접 CSS 관련 코드 변경함을 통해서 우선 순위를 알아보기 위해서 <head>
태그 블록 내에 직접 CSS 관련 코드 단에서 폰트 색상을 흰색(white)으로 변경하여 봅니다. 즉 메모장으로 “priorityStyle.html”
열어서 다음과 같이
해당 코드를 변경합니다.
<style>
strong {font-weight: bolder; font-size:20px; color:white}
p { margin-left:20px}
</style>
위와 같이 strong 태그에 대해서 해당 글자색을
기존의 기본색인 검정색(black)에서 흰색으로 적용되도록 추가, 저장한
후 IE를 통해 “priorityStyle.html”을 열어보면 다음과 같이 설정한대로 흰색으로 나타납니다.
이제 strong 태그에
대해서 필요한 HTML 태그 내에 직접 CSS 코드를 입력 적용하는 방법으로 color 속성이 어떻게 적용되는지
알아보기 위해서 “priorityStyle.html”에서 다음과 같이
color 속성을 빨강색(red)로 수정합니다.
<strong
style="font-weight: bolder; font-size:20px; color:red">CSS</strong>를 이용하는
방법<br/>
저장하고 IE를 통해 “priorityStyle.html”을 열어보면 다음과 같이 기존에 <head> 태그
블록 내에 직접 CSS 관련 코드 단에서 폰트 색상을
흰색(white)으로 설정되어 있음에도 불구하고
<strong> 태그 단에서 직접 color 속성을 설정한대로 적용되어 나타나게
됩니다.
정리하면 해당 HTML 요소 태그에서 중복될 경우 필요한 HTML 태그 내에 직접 CSS 코드를 입력하는 방법이 우선적으로 적용되며 만일 스타일이 설정되어 있지 않을 경우는 <head> 태그 블록 내에 직접 CSS 관련 코드 입력 방법이나 외부 파일을 이용한 CSS 적용하는 방법이 차례대로 적용됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 5. 색(Color) (0) | 2013.08.04 |
|---|---|
| 4. CSS에서 사용되는 수치(Measurements) (0) | 2013.08.04 |
| 2.2 필요한 HTML 태그 내에 직접 CSS 코드 입력 방법 (0) | 2013.08.04 |
| 2. CSS를 이용하는 방법 3 가지 (0) | 2013.08.04 |
| 1.8 모든 요소(Element)를 포함하는 선택자(Selector) 구성과 규칙(Rule) 만들기 (0) | 2013.08.01 |
