웹마스터 팁

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










이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[HTML 초보자]동영상을 출력하자-2 [3] ZipShin 2002.12.12
[HTML 초보자]동영상을 출력하자-1 [6] ZipShin 2002.12.11
[프레임셋] 1024*768.. 800*600 에서도 화면 제대로 보이기... [5] hooniv 2002.12.10
[HTML 초보자]iframe대신 사용할수있는 오브젝트-2 [12] ZipShin 2002.12.06
[HTML 초보자]iframe대신 사용할수있는 오브젝트-1 [8] ZipShin 2002.12.06
허접강의 -_-; 소스보기 금지 푸는방법들 [21] 허진규 2002.12.05
흐르는 폼 내용 출력 ㅡ,.ㅡγ [9] ☆밥동자γ 2002.11.30
[HTML 초보자] 글자움직이는 마퀴태그의 응용(Last) [3] ZipShin 2002.11.26
[HTML 초보자] 움직이는 글자반복횟수를 정하자... ZipShin 2002.11.22
[HTML 초보자] 글자가 움직이는 스크롤 지연값 -_- ZipShin 2002.11.22
〔Tale〕테일이랑 같이 글상자 이쁘게 만들어요 [1] TaleB˚ 2002.11.17
[HTML 초보자] 글자가 좌우 왕복하게 만들기. ZipShin 2002.11.14
[HTML 초보자] 마퀴태그가 한번 반복 후 화면 끝에서 정지 ZipShin 2002.11.08
[HTML 초보자] 일정한 방향으로 스크롤하기(마퀴태그) [5] ZipShin 2002.11.08
링크부분에 밑줄을 없애는 방법 [5] Kinds 2002.11.04
입력폼 스타일변경... [2] 디아릭스 2002.11.04
[HTML 초보자] 글자 움직이는 높이 설정 ZipShin 2002.11.02
희안한 css [투명한 프레임과 투명한 이미지] [10] ☜＊핑♡크＊☞ 2002.10.30
[HTML 초보자] 글자 움직이는 폭(넓이) 설정 ZipShin 2002.10.28
뽀유의 스타일시트 특별강좌 [28] 뽀유♡ 2002.10.25
태그 쓰기