|
 3. [태그 태그 클래스이름] |
앞에 장에 이어서 계속 Class속성에 대해 공부해보도록 하겠습니다. 이 Class 란 놈의 속성이 워낙 중요하다보니까 설명이 좀 길어지는 군요.
앞에서와는 다르게 태그 태그 클래스이름을 쓰게 되면 앞에오는 태그내에 있는 뒤에 있는 태그에 대한 스타일 정의를 해 주는 겁니다. 말이 좀 어렵나요? 그럼 다시 얘기 하자면 뒤에 태그는 반드시 앞에 태그안에 들어 있어야 스타일이 적용된다는 말입니다. 그래도 이해 안되시는 분들 예제를 보면 이해 되실겁니다.
[예]
<html>
<head>
<style type="text/css">
<!--
h5 {color:red; font-size:18px; font-family:궁서체}
strong {color:green; font-size:16px; font-family:궁서체 }
strong u {color: pink; font-size:12px; font-family:궁서체 }
strong i {color: steelblue; font-size:22px;font-family:궁서체 }
-->
</style>
</head>
<body>
<h5>여기는 송파나루터입니다 </h5>
<strong>여기는 녹색글자에,글자크기는 16px, 궁서체가 적용되는 부분입니다. </strong>
<strong> 여기는<u>밑줄이 짝~~악 그어지고 글자는 12px, 핑크색이 적용되는</u> 부분입니다 </strong>
<strong> 여기는<i> 이탤릭 글자가 적용되고 글자는 22px, 이탤릭체가 적용되는</i> 부분입니다.</strong>
</body>
</html> |
[결과]
여기는 빨간색 글자의 15픽셀입니다. 여기는 녹색글자에,글자크기는 16px, 궁서체가 적용되는 부분입니다. 여기는밑줄이 짝~~악 그어지고 글자는 12px, 핑크색이 적용되는부분입니다.
여기는이탤릭 글자가 적용되고 22px, 이탤릭체가 적용되는부분입니다. |
그럼 지금 부터 예제를 설명하겠습니다. 제일위에 있는 것은 head 부분에 정의한 h5 태그 스타일이 적용된것이고, 그 다음줄은 strong 태그 속성이 적용된것입니다. strong 태그라는 것은 글자를 강하게(?)표현한것으로 b 태그와 같은 역할을 합니다. html 부분을 열심히 공부하신 분이라면 금방 알수 있을 것인디 ^^;
그 아래 부분은, 앞 부분에는 strong 태그 스타일이 적용 되다가 u 태그 부분이 나오면서 p u 라고 스타일을 정의한 부분의 스타일이 적용되었습니다. 제일 아래 부분도 역시 앞 부분에는 strong 태그 스타일이 적용 되다가 i 태그 부분이 나오면서 strong i 라고 스타일을 정의한 부분의 스타일이 적용 되었습니다.
설명을 들어서 이해가 안되시는 분은 열심히 메모장 열어 놓고 연습하십시요. 연습만이 실력을 키우는데 가장 좋은 방법이니까요 ^^; |
|
댓글 없음:
댓글 쓰기