[HTML-CSS] 클래스(class) 정의하기; class 사용법 기초
Wednesday, July 19, 2006
스폰서 링크CSS 스타일을 HTML 태그 안에 이렇게 일일이 직접 적어주는 것보다,
클래스를 정의하여 다음과 같이 적용시키는 것이 효율적입니다. 지금 '.test' 라는 클래스가 정의되어 있습니다. 이 '.test' 라는 클래스를 수정하면, 'test' 라는 클래스가 적용된 모든 태그의 스타일을 한꺼번에 변경할 수 있어 편리하고, HTML 파일의 용량도 줄일 수 있습니다.
반드시 앞의 점(.)을 빼고, HTML 태그 안에 class="test" 이렇게 적어주어야 합니다. 클래서 속성 안에서 실제 적용할 때는 앞에 점(.)을 붙이면 안됩니다. 하나의 태그에 여러 개의 클래스를 동시에 적용할 수도 있습니다.
class="test test2 test3"
이렇게 빈 칸으로 구분하면 됩니다.
클래스는
<style type="text/css">
...여기에...
</style>
이런 style 태그 안에 정의해야 합니다. 그리고 style 태그는 <head></head> 태그 안에 들어 있어야 합니다.
<div style="color:yellow; background-color:red; padding:20px;">
차창 밖 멀리에서 교량의 조명들이 보이고 있었다. 그리고 어둠 속에 강변이 있었다. 단순한 강변이 아니라 그 강변에는 그곳을 지났던 무수한 타인들의 추억 같은 것이 매연과 함께 짙게 배어 있었다. 도로가 여러 갈래로 아득히 갈라지고 있었다. 나는 거기에 강이 흐르고 있다는 사실조차 몰랐었다. 그 강이 나를 초대한 것은 아닌가 하는 느낌까지도 들었었다. 그러나 나를 이끌고 있는 것은 더 멀리에 있는 듯했었다.
</div>
차창 밖 멀리에서 교량의 조명들이 보이고 있었다. 그리고 어둠 속에 강변이 있었다. 단순한 강변이 아니라 그 강변에는 그곳을 지났던 무수한 타인들의 추억 같은 것이 매연과 함께 짙게 배어 있었다. 도로가 여러 갈래로 아득히 갈라지고 있었다. 나는 거기에 강이 흐르고 있다는 사실조차 몰랐었다. 그 강이 나를 초대한 것은 아닌가 하는 느낌까지도 들었었다. 그러나 나를 이끌고 있는 것은 더 멀리에 있는 듯했었다.
</div>
클래스를 정의하여 다음과 같이 적용시키는 것이 효율적입니다. 지금 '.test' 라는 클래스가 정의되어 있습니다. 이 '.test' 라는 클래스를 수정하면, 'test' 라는 클래스가 적용된 모든 태그의 스타일을 한꺼번에 변경할 수 있어 편리하고, HTML 파일의 용량도 줄일 수 있습니다.
<html>
<head>
<style type="text/css">
.test { color:yellow; background-color:red; padding:20px; }
</style>
</head>
<body>
<div class="test">
차창 밖 멀리에서 교량의 조명들이 보이고 있었다. 그리고 어둠 속에 강변이 있었다. 단순한 강변이 아니라 그 강변에는 그곳을 지났던 무수한 타인들의 추억 같은 것이 매연과 함께 짙게 배어 있었다. 도로가 여러 갈래로 아득히 갈라지고 있었다. 나는 거기에 강이 흐르고 있다는 사실조차 몰랐었다. 그 강이 나를 초대한 것은 아닌가 하는 느낌까지도 들었었다. 그러나 나를 이끌고 있는 것은 더 멀리에 있는 듯했었다.
</div>
</body>
</html>
<head>
<style type="text/css">
.test { color:yellow; background-color:red; padding:20px; }
</style>
</head>
<body>
<div class="test">
차창 밖 멀리에서 교량의 조명들이 보이고 있었다. 그리고 어둠 속에 강변이 있었다. 단순한 강변이 아니라 그 강변에는 그곳을 지났던 무수한 타인들의 추억 같은 것이 매연과 함께 짙게 배어 있었다. 도로가 여러 갈래로 아득히 갈라지고 있었다. 나는 거기에 강이 흐르고 있다는 사실조차 몰랐었다. 그 강이 나를 초대한 것은 아닌가 하는 느낌까지도 들었었다. 그러나 나를 이끌고 있는 것은 더 멀리에 있는 듯했었다.
</div>
</body>
</html>
반드시 앞의 점(.)을 빼고, HTML 태그 안에 class="test" 이렇게 적어주어야 합니다. 클래서 속성 안에서 실제 적용할 때는 앞에 점(.)을 붙이면 안됩니다. 하나의 태그에 여러 개의 클래스를 동시에 적용할 수도 있습니다.
class="test test2 test3"
이렇게 빈 칸으로 구분하면 됩니다.
클래스는
<style type="text/css">
...여기에...
</style>
이런 style 태그 안에 정의해야 합니다. 그리고 style 태그는 <head></head> 태그 안에 들어 있어야 합니다.
더 읽기:
☞ HTML | CSS | 자바스크립트 JavaScript
Post a Comment
<< Home