웹마스터 팁
[절대초보용] css 클래스 기초
2007.11.03 10:11
<!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;}
게 설정하면 됩니다.
댓글 8
-
괄리자
2007.11.12 10:38
-
onam
2007.11.15 00:28
알기쉽게 설명을 잘 하셨네요. 
-
php,cgi어렵네
2007.11.25 03:09
.gif)
좋은 설명 감사합니다 -
ZK™
2007.12.24 00:18
대충만 알고 있어서 쓸때마다 헷갈렸는데 예제까지 쉽게 설명해주셨네요 감사합니다. ^^
-
SKY
2008.01.05 00:46
마지막줄 쯤에
만약 2번째 박스에 사용된 div에 이름을 new라고 부여한다면. 그리고 new라는 부모가 사용하는 h1은 노란색이라면.
#test h1 {color:yellow;}
게 설정하면 됩니다.
이부분에서 이름을 new 라고 지정했다면 #new h1 {color:yellow;} <=이렇게 하는거 맞죠..? -
호남삼육
2008.01.14 14:25
네 맞아요, 그대로 갖다 붙이신듯 해요, -
제로보
2008.03.09 11:53
흑흑 제가생각한게아님 -
열혈해적
2008.08.01 22:09
css 하나도 모르는데 css가 뭔지 살짝 감이오네요.^^
바쁜시간 쪼개서 해주신 강의 감사합니다. ^ㅡ^
좋네요.
감사합니다.