웹마스터 팁

  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;}
게 설정하면 됩니다.










이 게시물을
수정 삭제
좋아요
목록
태그 쓰기