스타일 시트 (2) - 예제를 통해 감을 잡자
앞에서도 살펴보았듯이 스타일 시트는 양식과 구조를 분리하는 특징을 가지고 있습니다.
여기에서는 한 문서내에 스타일 시트를 적용하는 예를 보여 드렸지만 스타일시트를 사용하면 사이트에 모든 페이지를 하나의 CSS 문서로 컨트롤 할 수도 있습니다.
지금부터 설명하려는것들은 <head> 태그 안에서 정의하는 것들입니다. 이런 방법들이 많이 쓰이지요
<html>
<head>
<style type="text/css">
<!--
여기에 스타일 시트를 정의한다
-->
</head>
스타일 시트의 형식에 대해서 알아보지요. 지루해도 중요하니까 한눈 팔지마세요 ^^
h3 { font-style:italic}
P{color:red}
아까전에 잘 따라하신 분이라면 이것이 뭘 의미하시는지 아실겁니다.
각각 <h3>, <p> 로 둘러싸인 태그에 이탤릭체와 글씨를 빨간색으로 각각 정의하라는 이야깁니다.
굳이 문장을 주어 서술어 식으로 특징을 구별하면 선택자{선언부} 로 정의되지여 ^^
Body{font-size: 14pt}
Body{font-family: Arial}
Body{font-style: italic}
이와 같은 것들도 동일한 body 태그에 적용하는 선택자로 되어있으므로 이렇게 하나로 묶어도 무방합니다.
Body{font-size: 14pt; font-family: Arial ;font-style: italic}
반대로 선언부가 같다면 선택자를 묶는 방법도 있습니다.
H3, P, DIV { font-color:black }
그리고 다음과 같이 class 라는 구별을 주어서 정의하는 방법도 있습니다.
h2.wei{color:red} --- (1)
h2.wei2{font-style:italic} --- (2)
.wei3{color:blue} ---(3)
뭔지 짐작이 잘 안가시지요? 선택자에 이름을 둬서 구별하니까....
그럼 이와 같은 것들을 <body> 태그 안에 적용시킬려면 어떻게 해야 할까요.. 다음과 같이 정의해야합니다.
(1)의 경우에는 <h2 class="wei"> class를 사용해서 태그를 적용시켰습니다</h2>
이렇게 하면 (1)의 결과는 빨간색으로 윗문장이 출력될 것입니다.
그럼 (2)에 있는것을 문서에서 적용하고 싶으면 <h2 class="wei2"> 라는 식으로 정의한다는 점이죠.
즉 같은 <h2> 태그를 정의하는 스타일 이지만 위와 같이 구별을 두어서 각각 다른효과를 줄수 있다는 뜻이지요. 이해 가셨나요?
그럼 (3)은 무엇일까요 선택자가 없지요? 바로 선택자에 관계없이 클래스만 태그에 써 놓으면 바로 적용이 가능하답니다.
즉 <div class="wei3"> 이나 <p class="wei3"> 등으로 정의된 부분들을 모두 글자색깔을 파란색으로 바꾸어 놓는다는 이야깁니다. 이해되셨는지...
또 다음 예를보죠
H2 STRONG{color:blue}
이건 <h2>안에 <strong> 태그로 둘러쌓인 부분만 파란색 글자로 정의한다는 뜻입니다.
째는 위처럼 <head> 부분에 <style>를 적용하는 방법이 있구여
'즉... <h2>여기까지는 스타일이 정의가 안되었으나 <strong> 위처럼 하면 이부분만 스타일이 적용됩니다</strong> 잘 아셨는지</h2>'
라는 태그가 존재하면 스타일은 '위처럼 하면 이부분만 스타일이 적용됩니다' 라는 부분만 글자가 굵게 표시된다는 이야깁니다.
스타일 시트의 형식에 대해 살펴보았는데 이제 스타일 시트의 정의 방법에 대해 알아보져. 지금까지 제가 설명한것은 앞에서도 밝혔듯이 html 문서의 <head> 부분에 <style> 을 정의한 것이지요. 살펴보면
<HTML>
<HEAD>
<TITLE>스타일 시트 적용한것</TITLE>
<STYLE type="text/css">
P.wei1 {color : red ; font-style : italic}
P.wei2 {line-height:150%; color:blue}
P.wei3 {font-size:10pt}
</STYLE>
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P class="wei1">당신은 지금 스타일 시트가 적용된 문서를 보고 계십니다.</P>
<br> 이건 적용 안된곳이구<br>
<P class="wei2">여기두 적용되었구여</P>
<P class="wei3">여기두 적용되었구여</P>
</BODY>
</HTML>
두번째는 외부 스타일 시트 를 만든뒤에 <link>태그를 이용해서 스타일 시트로 적용하는 방법이 있습니다.
저위의 예제에서 설명드렸던 스타일을 두번째 경우처럼 바꾸어보죠
먼저 다음과 같이 메모장을 열고 쳐서 test.css로 저장해 봅시다.
P.wei1 {color : red ; font-style : italic}
P.wei2 {line-height:150%; color:blue}
P.wei3 {font-size:10pt}
그 다음엔 html을 이런식으로 작성하셔서 test.css와 같은 디렉토리에 저장해 주십시오.
<HTML>
<HEAD>
<TITLE>외부 스타일 시트 적용</TITLE>
<LINK REL=stylesheet HREF="test.css" TYPE="text/css">
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P class="wei1">당신은 지금 스타일 시트가 적용된 문서를 보고 계십니다.</P>
<br> 이건 적용 안된곳이구<br>
<P class="wei2">여기두 적용되었구여</P>
<P class="wei3">여기두 적용되었구여</P>
</BODY>
</HTML>
흠.. 눈치 빠르신분들은 외부 스타일 시트의 장점을 파악하셨네여 ^^ 자기가 주로쓰는 스타일을 외부파일로 정의해놓으면 나중에 스타일을 수정할때
css파일만 수정하면 되니까 일일히 html을 열어서 수정할 필요가 없지여.
관리하기 엄청나게 편하겠지요. 자신의 홈페이지가 컨텐츠가 많다면 외부스타일을 지정하세여.
마지막으로 안에다가 일일히 문장마다 스타일을 적용하는 노가다 방법도 있습니다 -_- 위에서 언급한 예를 다음과 같이 표현할 수 있지요
<HTML>
<HEAD>
<TITLE>노가다식 스타일 시트 적용</TITLE>
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P style="color : red ; font-style : italic">당신은 지금 스타일 시트가 적용된 문서를 보고 계십니다.</P>
<br> 이건 적용 안된곳이구<br>
<P style="line-height:150%; color:blue">여기두 적용되었구여</P>
<P style="font-size:10pt">여기두 적용되었구여</P>
</BODY>
</HTML>
이 방법은 간단해서 좋지요.
정의할 스타일이 홈페이지에 특정부분밖에 없거나 정의된 스타일 말구 다른 스타일을 부분적으로 적용시켜 주실려면 이방법을 쓰세요.
그렇지만 홈페이지가 커지는데 계속 이렇게 스타일을 적용하면 문서도 복잡해지고 관리하기 힘들어지는게 단점이죠
정의하는 방법은 body안의 택 사이에다가 style="적용할 스타일 " 식으로 정의 해 주심 됩니다. 문단이나 글자 표나 폼 어느곳에서나 스타일 적용이 가능하답니다.
마지막으로 중요한거 하나만 이야기하고 다음장으로 넘어가지요. 만약에 이러한 스타일 시트 정의방법을 여러가지 중복해서 썼다면 어떻게 될까요
우선 순위가 정해지겠지여?
1. 클래스를 사용할때 가장 먼저 적용이 됩니다.
2. <body> 택 안에다가 직접 스타일을 적용했을때(영역이 중복될경우 좁은영역이 우선)
3. <head>에서 정의한 스타일시트(영역이 중복될경우 좁은 영역이 우선)
4. 외부 스타일 시트 순섭니다.
한 예로
body {font-size:10pt; font-color:blue}
p{font-size:9pt; font-color:red}
가 <head> 부분에 같이 지정되어 있으면 영역이 서로 중복되는데 (이유.. 뻔하지요 -_-; <P> 태그도 body 태그안에 포함되어 들어가니까요)
밑에것이 <p> 태그에 우선 적용되겠지요. 아 그리구
B { color: blue } 가 <head> 부분에 정의되어있을때
<B> 이 부분은 <I>스타일 시트</I>가 적용되었습니다.</B>
라는 태그가 나오면 어떻게 될까요.
스타일은 자기보다 하위태그에 스타일을 물려줍니다.
따라서 '스타일시트' 부분도 이탤릭체와 파란색으로 표시됩니다. ^^
자. 아주 대충 스타일 시트에 대한 것들을 파악해 봤습니다. 이젠 실전으로 들어가보죠 ^^
여기에서는 한 문서내에 스타일 시트를 적용하는 예를 보여 드렸지만 스타일시트를 사용하면 사이트에 모든 페이지를 하나의 CSS 문서로 컨트롤 할 수도 있습니다.
지금부터 설명하려는것들은 <head> 태그 안에서 정의하는 것들입니다. 이런 방법들이 많이 쓰이지요
<html>
<head>
<style type="text/css">
<!--
여기에 스타일 시트를 정의한다
-->
</head>
스타일 시트의 형식에 대해서 알아보지요. 지루해도 중요하니까 한눈 팔지마세요 ^^
h3 { font-style:italic}
P{color:red}
아까전에 잘 따라하신 분이라면 이것이 뭘 의미하시는지 아실겁니다.
각각 <h3>, <p> 로 둘러싸인 태그에 이탤릭체와 글씨를 빨간색으로 각각 정의하라는 이야깁니다.
굳이 문장을 주어 서술어 식으로 특징을 구별하면 선택자{선언부} 로 정의되지여 ^^
Body{font-size: 14pt}
Body{font-family: Arial}
Body{font-style: italic}
이와 같은 것들도 동일한 body 태그에 적용하는 선택자로 되어있으므로 이렇게 하나로 묶어도 무방합니다.
Body{font-size: 14pt; font-family: Arial ;font-style: italic}
반대로 선언부가 같다면 선택자를 묶는 방법도 있습니다.
H3, P, DIV { font-color:black }
그리고 다음과 같이 class 라는 구별을 주어서 정의하는 방법도 있습니다.
h2.wei{color:red} --- (1)
h2.wei2{font-style:italic} --- (2)
.wei3{color:blue} ---(3)
뭔지 짐작이 잘 안가시지요? 선택자에 이름을 둬서 구별하니까....
그럼 이와 같은 것들을 <body> 태그 안에 적용시킬려면 어떻게 해야 할까요.. 다음과 같이 정의해야합니다.
(1)의 경우에는 <h2 class="wei"> class를 사용해서 태그를 적용시켰습니다</h2>
이렇게 하면 (1)의 결과는 빨간색으로 윗문장이 출력될 것입니다.
그럼 (2)에 있는것을 문서에서 적용하고 싶으면 <h2 class="wei2"> 라는 식으로 정의한다는 점이죠.
즉 같은 <h2> 태그를 정의하는 스타일 이지만 위와 같이 구별을 두어서 각각 다른효과를 줄수 있다는 뜻이지요. 이해 가셨나요?
그럼 (3)은 무엇일까요 선택자가 없지요? 바로 선택자에 관계없이 클래스만 태그에 써 놓으면 바로 적용이 가능하답니다.
즉 <div class="wei3"> 이나 <p class="wei3"> 등으로 정의된 부분들을 모두 글자색깔을 파란색으로 바꾸어 놓는다는 이야깁니다. 이해되셨는지...
또 다음 예를보죠
H2 STRONG{color:blue}
이건 <h2>안에 <strong> 태그로 둘러쌓인 부분만 파란색 글자로 정의한다는 뜻입니다.
째는 위처럼 <head> 부분에 <style>를 적용하는 방법이 있구여
'즉... <h2>여기까지는 스타일이 정의가 안되었으나 <strong> 위처럼 하면 이부분만 스타일이 적용됩니다</strong> 잘 아셨는지</h2>'
라는 태그가 존재하면 스타일은 '위처럼 하면 이부분만 스타일이 적용됩니다' 라는 부분만 글자가 굵게 표시된다는 이야깁니다.
스타일 시트의 형식에 대해 살펴보았는데 이제 스타일 시트의 정의 방법에 대해 알아보져. 지금까지 제가 설명한것은 앞에서도 밝혔듯이 html 문서의 <head> 부분에 <style> 을 정의한 것이지요. 살펴보면
<HTML>
<HEAD>
<TITLE>스타일 시트 적용한것</TITLE>
<STYLE type="text/css">
P.wei1 {color : red ; font-style : italic}
P.wei2 {line-height:150%; color:blue}
P.wei3 {font-size:10pt}
</STYLE>
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P class="wei1">당신은 지금 스타일 시트가 적용된 문서를 보고 계십니다.</P>
<br> 이건 적용 안된곳이구<br>
<P class="wei2">여기두 적용되었구여</P>
<P class="wei3">여기두 적용되었구여</P>
</BODY>
</HTML>
두번째는 외부 스타일 시트 를 만든뒤에 <link>태그를 이용해서 스타일 시트로 적용하는 방법이 있습니다.
저위의 예제에서 설명드렸던 스타일을 두번째 경우처럼 바꾸어보죠
먼저 다음과 같이 메모장을 열고 쳐서 test.css로 저장해 봅시다.
P.wei1 {color : red ; font-style : italic}
P.wei2 {line-height:150%; color:blue}
P.wei3 {font-size:10pt}
그 다음엔 html을 이런식으로 작성하셔서 test.css와 같은 디렉토리에 저장해 주십시오.
<HTML>
<HEAD>
<TITLE>외부 스타일 시트 적용</TITLE>
<LINK REL=stylesheet HREF="test.css" TYPE="text/css">
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P class="wei1">당신은 지금 스타일 시트가 적용된 문서를 보고 계십니다.</P>
<br> 이건 적용 안된곳이구<br>
<P class="wei2">여기두 적용되었구여</P>
<P class="wei3">여기두 적용되었구여</P>
</BODY>
</HTML>
흠.. 눈치 빠르신분들은 외부 스타일 시트의 장점을 파악하셨네여 ^^ 자기가 주로쓰는 스타일을 외부파일로 정의해놓으면 나중에 스타일을 수정할때
css파일만 수정하면 되니까 일일히 html을 열어서 수정할 필요가 없지여.
관리하기 엄청나게 편하겠지요. 자신의 홈페이지가 컨텐츠가 많다면 외부스타일을 지정하세여.
마지막으로 안에다가 일일히 문장마다 스타일을 적용하는 노가다 방법도 있습니다 -_- 위에서 언급한 예를 다음과 같이 표현할 수 있지요
<HTML>
<HEAD>
<TITLE>노가다식 스타일 시트 적용</TITLE>
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P style="color : red ; font-style : italic">당신은 지금 스타일 시트가 적용된 문서를 보고 계십니다.</P>
<br> 이건 적용 안된곳이구<br>
<P style="line-height:150%; color:blue">여기두 적용되었구여</P>
<P style="font-size:10pt">여기두 적용되었구여</P>
</BODY>
</HTML>
이 방법은 간단해서 좋지요.
정의할 스타일이 홈페이지에 특정부분밖에 없거나 정의된 스타일 말구 다른 스타일을 부분적으로 적용시켜 주실려면 이방법을 쓰세요.
그렇지만 홈페이지가 커지는데 계속 이렇게 스타일을 적용하면 문서도 복잡해지고 관리하기 힘들어지는게 단점이죠
정의하는 방법은 body안의 택 사이에다가 style="적용할 스타일 " 식으로 정의 해 주심 됩니다. 문단이나 글자 표나 폼 어느곳에서나 스타일 적용이 가능하답니다.
마지막으로 중요한거 하나만 이야기하고 다음장으로 넘어가지요. 만약에 이러한 스타일 시트 정의방법을 여러가지 중복해서 썼다면 어떻게 될까요
우선 순위가 정해지겠지여?
1. 클래스를 사용할때 가장 먼저 적용이 됩니다.
2. <body> 택 안에다가 직접 스타일을 적용했을때(영역이 중복될경우 좁은영역이 우선)
3. <head>에서 정의한 스타일시트(영역이 중복될경우 좁은 영역이 우선)
4. 외부 스타일 시트 순섭니다.
한 예로
body {font-size:10pt; font-color:blue}
p{font-size:9pt; font-color:red}
가 <head> 부분에 같이 지정되어 있으면 영역이 서로 중복되는데 (이유.. 뻔하지요 -_-; <P> 태그도 body 태그안에 포함되어 들어가니까요)
밑에것이 <p> 태그에 우선 적용되겠지요. 아 그리구
B { color: blue } 가 <head> 부분에 정의되어있을때
<B> 이 부분은 <I>스타일 시트</I>가 적용되었습니다.</B>
라는 태그가 나오면 어떻게 될까요.
스타일은 자기보다 하위태그에 스타일을 물려줍니다.
따라서 '스타일시트' 부분도 이탤릭체와 파란색으로 표시됩니다. ^^
자. 아주 대충 스타일 시트에 대한 것들을 파악해 봤습니다. 이젠 실전으로 들어가보죠 ^^
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
