컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 지메일 주소를 아이콘(로고)으로 만드는 사이트 - GMail Icon[포토샵] 물결무늬 유리창 필터로 모자이크 효과 내기: Glass Filter[QnA] 헥사 에디터란? 좋은 헥사 에디터(Hex Editor)는? : WinHex[일본 우표] 미소라 히바리; 美空ひばり 80円 郵便 切手: Misora Hibari일본 전국 지도 보기, 일본 시내 상세 지도 - 야후 재팬: Map of Japan일본도, 아카시아(아까시)나무 황화 현상 발견 - Acacia アカシア유니코드, 완성형, 확장완성형, 조합형의 차이점, 한글 코드 차이[HTML-CSS] 윈도우에 내장된 기본 한글 폰트들의 영문명; 로마자 이름포토샵으로 투명GIF, 투명PNG 만들기: 투명GIF/PNG란? : Transparent ...[Perl/펄] CSV / 간단한 목록 파일에서, 몇 번째 필드(Field)만 추출하기 [...

[HTML-CSS] 클래스(class) 정의하기; class 사용법 기초

Wednesday, July 19, 2006

CSS 스타일을 HTML 태그 안에 이렇게 일일이 직접 적어주는 것보다,
<div style="color:yellow; background-color:red; padding:20px;">
차창 밖 멀리에서 교량의 조명들이 보이고 있었다. 그리고 어둠 속에 강변이 있었다. 단순한 강변이 아니라 그 강변에는 그곳을 지났던 무수한 타인들의 추억 같은 것이 매연과 함께 짙게 배어 있었다. 도로가 여러 갈래로 아득히 갈라지고 있었다. 나는 거기에 강이 흐르고 있다는 사실조차 몰랐었다. 그 강이 나를 초대한 것은 아닌가 하는 느낌까지도 들었었다. 그러나 나를 이끌고 있는 것은 더 멀리에 있는 듯했었다.
</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>


반드시 앞의 점(.)을 빼고, HTML 태그 안에 class="test" 이렇게 적어주어야 합니다. 클래서 속성 안에서 실제 적용할 때는 앞에 점(.)을 붙이면 안됩니다. 하나의 태그에 여러 개의 클래스를 동시에 적용할 수도 있습니다.

class="test test2 test3"

이렇게 빈 칸으로 구분하면 됩니다.



클래스는
<style type="text/css">
...여기에...
</style>
이런 style 태그 안에 정의해야 합니다. 그리고 style 태그는 <head></head> 태그 안에 들어 있어야 합니다.


더 읽기: ☞ HTML/CSS/JavaScript

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top