릴게임G컴퓨터활용good: css 속성 1

2011년 1월 11일 화요일

css 속성 1

클래스 속성

이번에는 class 속성을 지정하는 방법에 대해 알아보도록 하겠습니다. 특히 이 부분은 상당히 중요한 부분으로 잘 활용하면 문서의 용량도 줄일 수 있을 뿐만 아니라 홈페이지를 제작하는데 시간도 많이 절약되고 깔끔하고 멋진 홈페이지를 만들 수 있습니다.
스타일시트를 공부하는데 있어서 class 와 다음장에서 배울 Id 속성은 필히 알아야하는 부분이고 이것만 알고 있어도 홈페이지를 제작하는데 상당히 도움이 될 것입니다.

1. [태그 점(.) 클래스이름]

스타일 시트는 임의의 태그에 그 속성을 지정해주어서 해당 태그에 속하는 요소에 대해서 그 속성을 나타내어 주게 하는 작용을 합니다. 좀 말이 어렵나요? ^^;
우리가 실질적으로 태그를 쓰다보면 하나의 태그로 여러속성을 써야 할 경우가 많이 생깁니다. 이럴때 쓰는게 바로 Class 입니다. 말로는 좀 이해가 안가시는 분들을 위해 예제를 한번 보도록 하겠습니다.

[예]

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
   <h2>여기는 빨간색 글자의 15픽셀입니다 </h2>
   <p>여기는 녹색 글자의 13픽셀입니다 </p>
   <p class=gaga> 여기는 핑크색 글자이고 14픽셀입니다 </p>
   <p class=nana> 여기는 노란색 글자이고 16픽셀입니다 </p>
</body>
</html>

[결과]

여기는 빨간색 글자의 15픽셀입니다

여기는 녹색 글자의 13픽셀입니다

여기는 핑크색 글자이고 14픽셀입니다

여기는 노란색 글자이고 16픽셀입니다

위에서 보면 p 태그로 여러 속성을 만들어 보았습니다. 그냥 p 태그만 쓴 경우는 녹색이 적용되었지만, p 태그중에서도 class 속성을 이용하여 따로 스타일을 적용한 경우에는 그 스타일이 적용된 것을 볼 수 있습니다.
head 부분에 p 태그로 각각 gaga 와 nana 라는 이름을 지어주고 body 부분에서 p 태그안에 class 속성으로 받아주면 속성이 적용됩니다. 여기서 주의할 점은 head 부분에 p.gaga 처럼 꼭 점(.) 를 찍어 주어야 합니다. 그리고 이름은 아무 이름이나 적어도 되고요 ^^;

2. [점(.) 클래스이름]

이번에는 태그가 들어가지 않고 바로 클래스 이름이 나오게 한번 해보겠습니다. 태그.클래스 와 차이점을 예제를 통해 비교해 보세요. 눈치 빠른 분들은 아~~ 하고 이해가 가실겁니다. 앞에 태그가 없고 바로 .클래스 이름이 나오잖아요.
위에것은 반드시 클래스앞에 있는 태그안에서만 사용하지만 아래에 있는것은 아무 태그에서나 사용이 가능합니다. 그럼 예제를 설명하도록 하겠습니다.

[예]

<html>
<head>
<style type="text/css">>

</style> </head>
<body>
   <em class=gaga> 여기는 이탤릭체이고 핑크색 글자이며 14픽셀입니다 </em>
   <b class=nana> 여기는 굵은 파란색 글자이고 16픽셀입니다 </b>
</body>
</html>

[결과]
여기는 이탤릭체이고 핑크색 글자이고 14픽셀입니다
여기는 굵은 파란색 글자이고 16픽셀입니다

em 태그 아시나요?. 모르시는 분들은 앞에 html 설명 부분을 참조하세요. em 태그는 글자를 이탤릭체로 만들어 주는 태그이고 b 태그는 글자를 굵게 해주는 태그입니다. 예제에 있는 것은 em 태그안에 들어있는 gaga 클래스속성이 적용된것이고 b 태그안에는 nana 속성이 적용된것입니다. 아무 태그나 적용이 가능하니 다른 태그를 넣어서 해보세요.
설명이 어려운가요? ^^;

릴게임G컴퓨터활용good

2011년 1월 11일 화요일

css 속성 1

댓글 없음:

댓글 쓰기