import (2)

💻 Programming/CSS

[CSS] 25. @ Rules ( @ 규칙들 )

이번 포스팅에서는 @ 규칙에 대해서 알아보도록 하겠습니다.

문서에 다른 CSS파일을 import할 때 @import를 쓰게 됩니다.  

이런 규칙들이 몇가지 있는데 이번에는 다음 네가지에 대해서만 알아보도록 하겠습니다. 

 

  • @import 외부 CSS파일을 현재 CSS파일에 import합니다.

  • @charset CSS파일의 캐릭터셋을 지정합니다.

  • @font-face 문서에서의 문서체를 지정합니다.

  • !important 다른 스타일을 오버라이드 합니다.

NOTE: 위 네가지 이외에도 다른 규칙들도 있지만 여기서는 다루지 않습니다. 


The @import rule

이 규칙은 아래 두가지 방법중 한가지 방법으로 사용하시면 됩니다.

로컬파일을 import하는 방법과 url을 이용하여 원격파일을 import하는 방법이 있습니다. 

<style tyle="text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>

CSS를 모듈화 할 수 있게끔 해주는 규칙이므로 중요한 규칙이고 자주 사용하시게 될겁니다. 


The @charset Rule

캐릭터셋을 정의하는 규칙이죠. 별거 없습니다.

<style tyle="text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>


The @font-face Rule

문서내에서 사용될 문서체를 정의하는 규칙입니다. 또한 다운로드할 폰트의 위치를 지정해주기 위한 규칙이기도 합니다.

일반적으로 @font-face 규칙은 매우 복잡하고 폰트 전문가가 아닌 이상 사용을 권장하지도 않습니다.

 

다음 예제를 보시죠. 

<style tyle="text/css">
<!--
@font-face {
  font-family: "Scarborough Light";
 src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
 font-family: Santiago;
 src: local ("Santiago"),
 url("http://www.font.site/s/santiago.tt")
 format("truetype");
 unicode-range: U+??,U+100-220;
 font-size: all;
 font-family: sans-serif;
}
-->
</style>


The !important Rule

CSS가 브라우저에 적용될 때 순서대로 적용이 되도록 되어있습니다. 따라서 앞에서 정의했던 것이 적용이 된 뒤에 마지막에 정의한 것이 적용이 되는데 이때 동일한 요소에 대해서 다른 값을 정의해버리면 마지막에 정의한 값이 적용되고 앞에서 정의한 값은 적용이 되지 않습니다. 

만약 어떤 속성이 정말 중요해서 이건 실수로 오버라이드 되면 안된다 싶을때 사용하는것이 바로 이 !important 규칙입니다.  

이 규칙을 적용한 스타일은 문서의 어느곳에나 있어도 적용이 됩니다. 

 

다음 예제를 한번 보시죠.

<style tyle="text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>

동일한 요소에 서로다른 색상을 적용시키는 스타일이 선언되어있습니다. 앞에꺼는 빨간색, 뒤에꺼는 검은색이죠. 그러면 후자인 검정색만 적용이 됩니다. 이때 빨간색 속성이 중요한 속성이다라고 아래처럼 선언을 해주시면....

<style tyle="text/css">
<!--
p { color: #ff0000 !important; }
p { color: #000000; }
-->
</style>

뒤에 검은색 속성을 정의했다고 하더라도 빨간색이 적용되어지게 됩니다.

 

 

 

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_at_rules.htm 

 

 

 

 

저작자표시 비영리 변경금지

'💻 Programming > CSS' 카테고리의 다른 글

[CSS] 27. Layouts ( 레이아웃 )  (0) 2016.06.12
[CSS] 26. Filters - Texts and Image Effects ( 텍스트, 이미지 효과 )  (0) 2016.06.12
[CSS] 24. Pseudo Elements ( 슈도 엘리먼트 )  (0) 2016.06.12
[CSS] 23. Pseudo Classes ( 슈도 클래스 )  (0) 2016.06.12
[CSS] 22. Layers ( 레이어 )  (0) 2016.06.12

💻 Programming/CSS

[CSS] 3. HTML에 CSS링크 - Associating Styles with HTML

 

CSS를 HTML문서에서 사용하는 방법은 네가지가 있습니다. 그 중에서도 가장 많이 쓰이는 방법은 inline CSS와 External CSS.

1. Embedded CSS - The <style> Element:

 <style> 요소를 이용해서 <head>...</head> 태그 내에 삽입하는 방법입니다. 

<head>
<style type="text/css" media="...">
Style Rules
............
</style>
</head>

속성:

 <style> 태그 내의 속성과 값은 아래와 같습니다.

Attribute Value Description
type text/css Specifies the style sheet language as a content-type (MIME type). This is required attribute.
media screen
tty
tv
projection
handheld
print
braille
aural
all		 Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

예제:

<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>

2. Inline CSS - The style Attribute:

인라인 CSS는 그냥 html태그 안에다가 써넣는 것을 말합니다. 가장 일반적으로 이렇게 사용하죠. 그러다가 따로 분리해서 관리해야되는 스타일이 있다면 이 다음에 설명한 External CSS를 이용하시면 됩니다. 

<element style="...style rules....">

속성:

Attribute Value Description
style style rules The value of style attribute is a combination of style declarations separated by semicolon (;).

예제:

<h1 style ="color:#36C;"> This is inline CSS </h1>

 

적용된 결과는 아래와 같습니다. 

This is inline CSS

3. External CSS - The <link> Element:

 <link> 요소를 이용하여 HTML 문서에 외부에서 정의된 CSS파일을 링크시킬 수가 있습니다. 

간단한 문법을 한번 볼까요??

<head>
<link type="text/css" href="..." media="..." />
</head>

속성:

 <link> 태그의 속성과 속성값들 입니다. 

Attribute Value Description
type text/css Specifies the style sheet language as a content-type (MIME type). This attribute is required.
href URL Specifies the style sheet file having Style rules. This attribute is a required.
media screen
tty
tv
projection
handheld
print
braille
aural
all		 Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

예제:

간단하게 mystyle.css 를 만들어 봅시다.

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

 

이제 mystyle.css파일을 HTML문서에 링크를 시켜볼까요??

<head>
<link type="text/css" href="mystyle.css" media="all" />
</head>

4. Imported CSS - @import Rule:

@import 를 이용해서 <link> 요소처럼 스타일파일에 링크를 걸 수도 있습니다.  기본문법은 다음과 같습니다.

<head>
@import "URL";
</head>

 

아래처럼 url()메소드를 이용할 수도 있습니다.

<head>
@import url("URL");
</head>

예제:

<head>
@import "mystyle.css";
</head>

CSS Rules Overriding ( 규칙 오버라이딩 )

지금까지 CSS를 사용하는 네가지 방법에 대해서 알아보았습니다. 이 네가지 규칙이 동시에 적용이 된다면 어떤일이 벌어질까요??? 서로서로 오버라이딩을 하게 되는데 그 규칙을 한번 알아보도록 하겠습니다. 

  • inline 스타일이 다른 방법보다 항상 최우선시 적용됩니다.  

  • <style>...</style> 태그 내에 지정된 스타일들은 외부 CSS파일에 정의된 값들보다 우선권을 가집니다.

  • 외부 CSS파일은 항상 최저우선권을 가집니다. 

Handling old Browsers ( 구버전 브라우저 처리 )

구버전 브라우저 중에는 CSS를 지원하지 않는 브라우저가 있고 이런 브라우저를 사용하는 사용자들이 있을 수도 있겠죠. 만약 그럴경우에는 CSS를 적용하지 않도록 할 수 있습니다. 아래처럼 <!-- 와  --> 로 감싸서 말이죠. 

<style type="text/css">
<!--
body, td {
   color: blue;
}
-->
</style>

CSS Comments ( 주석 )

CSS에서 주석은 /* 주석처리 할 내용 */  이렇게 쓰시면 됩니다. 여러 줄에 걸쳐도 관계 없습니다. 

예제:

/* This is an external style sheet file */
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of 
style rules. */

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_inclusion.htm

 

 

 

 

 

 

저작자표시 비영리 변경금지

'💻 Programming > CSS' 카테고리의 다른 글

[CSS] 6. Background ( 배경 설정 )  (0) 2016.06.12
[CSS] 5. Colors ( 색깔 )  (0) 2016.06.12
[CSS] 4. Units ( 단위 )  (0) 2016.06.12
[CSS] 2. Syntax ( 문법, 사용법 )  (0) 2016.06.12
[CSS] 1. CSS란 ?  (0) 2016.06.11

Category

Recent Posts

Recent Comments

관리자 | 글쓰기

티스토리툴바