[HTML 기초 강좌] 11. CSS ( 스타일시트 ) 적용하기

2016. 1. 18. 16:04language/html


1. CSS 스타일시트

css란 Cascalding Style Sheets 의 약자로 웹문서의 스타일을 지정해 놓은 파일입니다.

다시말해 웹사이트를 꾸미는 style의 정의를 모아 둔 파일이라 생각하면 됩니다.

예를 들면 이 웹사이트는 글꼴을 굴림체를 사용하고 글자크기는 10px이며 색은 파란색이고 등등... 이런 정보들을 새로운 페이지를 만들때마다 설정하려면 그만큼 귀찮고 손도 많이가는데 이를 한곳에 모아 두고 가져다가 쓰는 파일입니다.

 

css를 설정하는 방법은 크게 3가지가 있습니다.

첫번째는 위에서 설명했듯이 css 파일에 정의해 놓고 파일을 불러와서 사용하는 방법이 있습니다.

두번째는 Html 문서에 style 태그 사이에 정의하고 사용할 수 있습니다.

세번째는 각 태그의 style 속성에 정의할 수 있습니다.

 

 

1.1 외부 css 파일 불러오기

html 파일의 head 태그 사이에 보통 정의합니다.

link 태그를 사용하여 링크를 걸고

rel 속성에 stylesheet 라고 스타일시트인것을 명시해주고

sype 속성에 text/css 라고 css 파일인 것을 명시하고

href 속성에 해당 파일의 경로 및 파일명을 명시합니다.

     <link rel="stylesheet" sype="text/css" href = "mystyle.css">

 

1.2 style 태그 사용하기

html 파일의 head 태그 사이에 보통 정의합니다.

<style type="text/css">

</style>

 

1.1 과 1.2에서의 스타일을 정의하는 방법입니다.

1. 태그명 {스티일 속성:값; 스타일 속성:값;...}

- 해당 태그에 지정한 스타일이 적용됩니다.

ex) p {font-size:20pt; color:red;}

div {font-family:굴림; margin:5px;}

 

2. 태그명1, 태그명2 {스타일 정의...}

- 지정한 모든 태그에 같은 스타일을 적용할 때 사용합니다.
ex) p,div {font-size:50pt; color:red; font-family:궁서;}

 

3. 태그명1 태그명2 {스타일 정의...}

- 태그명1에 포함된 태그명2에 스타일을 적용한다. 밑에 보시면 p안에 span태그 안에만 넣으라는 뜻

ex) p span { font-size: 30pt; color:#00ff00; font-family:궁서;}

<p>

<span>이런 구조에서만 스타일 적용됨</span>

</p>

 

4. 태그명.class속성값 { 스타일 정의...}

- 입력한 태그명 중에 class속성의 속성값이 'class속성값'과 같은 곳에만 스타일을 적용시킨다.

클레스 값이 맞아야 나타난다.

ex ) div.test { font-size: 30pt; color:#00ff00; font-family:궁서;}

 

5 .     .class속성값 { 스타일 정의...}

- 모든 태그명 중에 class속성의 속성값이 'class속성값'과 같은 곳에만 스타일을 적용시킨다.

ex)   .test { font-size: 30pt; color:#00ff00; font-family:궁서;}

모든 태그에서 클레스 값이 test인 태그만 스타일을 적용시킨다.

 

 6 .     태그명#id(속성값 아이디명을 쓴다) { 스타일 정의...}

입력한 태그명 중에 id속성의 속성값이 'id속성값'과 같은 곳에만 스타일을 적용시킨다. 

ex) div#myId{ font-size: 30pt; color:#00ff00; font-family:궁서;}

 

 7 .     #id(속성값 아이디명을 쓴다) { 스타일 정의...}

모든 태그명 중에 id속성의 속성값이 'id속성값'과 같은 곳에만 스타일을 적용시킨다. 

ex) #myId{ font-size: 30pt; color:#00ff00; font-family:궁서;}

 

 

1.3 각 태그의 style 속성에 정의하기 ( inline )

태그의 style 속성에 정의합니다.

<div style=""> </div>

 

 

 

3가지의 스타일 적용 방법 중 우선순위는

각 태그의 style속성에 정의하기 ( inline ) > style 태그 사용하기 > 외부 css 파일 불러오기

순입니다.