웹마스터 팁

  2. Support
  3. 웹마스터 팁

[절대초보용] css 클래스 기초

2007.11.03 10:11

NHN국화

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>smilecnu div layout</title>
<style type="text/css">
h1 {color:red;}
div h1 {color:green;}
#test h1 {color:yellow;}
</style>
<body>

<h1>안녕하세요 h1 입니다</h1>
<div><h1>안녕하세요 div안에 있는 h1 입니다</h1></div>
<div id="test"><h1>저도 div안에 있지만 #기호를 이용해 저 만의 속성을 가졌어요</h1></div>
</body>
</html>

결과값
안녕하세요 h1 입니다
안녕하세요 div안에 있는 h1 입니다
저도 div안에 있지만 #기호를 이용해 저 만의 속성을 가졌어요


웹2.0에서 박스모델을 통해 웹 전체의 레이아웃을 짜게 되면서.
각각의 박스에 이용하려는 클래스에 대한 개념을 정확하게 이해해야할 필요성이 생긴 것 같습니다.
오늘은 해당 태크안에서 무엇을 물려받을지(?)에 대해 배운 것을 적어볼려고 합니다.

h1 {color:red;}
h1 이라는 속성에 간단히 글자색을 빨강으로 지정했습니다.

<div><h1>안녕하세요 div안에 있는 h1 입니다</h1></div>
위에 있는 h1의 경우 div라는 박스안에 들어가있습니다.
만약 외부에서 사용하고 싶은 h1의 색깔과 div안에서 사용하고 싶은 h1의 색깔이 다르다면
div만을 위한 h1을 만들어 주어야 하겠죠?
아무설정도 하지 않고 위처럼 사용하면 당연히 h1의 속성을 그대로 이용하여 red 색으로 표현됩니다.
하지만 div라는 박스안에서 h1을 새롭게 정의해봅니다.
div    h1 {color:green;}
부모, 부모안에 있는 자식이름
이렇게 하여 div라는 박스안 있는 h1을 새롭게 탄생시켰습니다.
위의 경우 div박스 안에서만 green 으로 작동합니다.
만약 <p><h1>이것도 green 일까요?</h1><p>  아닙니다.  평범한 h1의 속성대로 그냥 red 입니다.
만약 위의 경우도 green을 사용하려면
p h1 { color:green;} 이라고 새롭게 정의를 내려주셔야 합니다.


문제가 생겼습니다,
박스는 여러개 입니다. 그렇다면 div로 만들어진 박스는 많을테고. 그안에 h1을 자주 사용하게 됩니다.
만약 다른 박스에서는 h1을 썼을 때 다른 색을 이용하고 싶어집니다.
이럴 경우 , 각각의 부모에게 독립적으로 값을 부여할 수 있습니다.
만약 2번째 박스에 사용된 div에 이름을 new라고 부여한다면. 그리고 new라는 부모가 사용하는 h1은 노란색이라면.
#test h1 {color:yellow;}
게 설정하면 됩니다.










이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
qmail-1.03설치⑤ (courier-imap연동) 비츠로 2003.02.28
qmail-1.03설치⑥ (qmail-scanner 스팸필터링) 비츠로 2003.02.28
qmail-1.03설치⑦ (qmailadmin 큐메일 웹관리툴) 비츠로 2003.02.28
qmail-1.03설치⑧ (squirrel웹메일과 연동) 비츠로 2003.02.28
apache-1.3.x설치① (필수조건과 pre configure) 비츠로 2003.03.02
apache-1.3.x설치② (mm, mod_ssl, mod_perl모듈) 비츠로 2003.03.02
apache-1.3.x설치③ (resin, jdk, jdbc연동) 비츠로 2003.03.02
apache-1.3.x설치③ (tomcat4, jdk, jdbc연동) 비츠로 2003.03.02
apache-1.3.x설치④ (php4 + db + mail연동) 비츠로 2003.03.02
apache-1.3.x설치⑤ (apahce설치, php가속기 추가) 비츠로 2003.03.02
apache-1.3.x설치⑥ (apahce, tomcat, resin가상호스팅설정) 비츠로 2003.03.02
리눅스에서 한통 ADSL 설정해 주기.. [5] 이희덕 2003.03.02
Sendmail 취약점 발표 [3] 조수권 2003.03.04
안녕하세요, php 보안 취약점인데 한번 보시길.. [28] Dopesoul 2003.03.08
php 의 보안 관련.. [7] Dopesoul 2003.03.08
apache server의 log file 관리 [3] 겨울늑대 2003.03.09
트래픽관리 Throttle-status 사용자 인증시키기 [1] Cksoft 2003.03.18
Apache1.3.27 + PHP4.3.1 + MySQL4.0.12 + ZendOptimizer2.1.0 [6] FriZeX 2003.03.19
mysql에서 사용자 권한을 잘못 부여하여 root로 접속불가, 사용권한 제한등 문제 해결방법 [3] 정종화 2003.03.20
커널 2.4 local ptrace-related vulnerability 패치하세요~ [8] 김도한 2003.03.20
태그 쓰기