5. id를 이용하는 방법

.NET프로그래밍/CSS 2.0 2009. 7. 27. 22:51 |

<!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">

<head>
     <title>다섯번째 방법 - id를 이용</title>
     <style type="text/css">
     #notice { color:blue; width:100px;height:100px;background-color:Pink; }
     #free { color:green; width:100px;height:100px; }
     </style>
</head>
<body>

     <div id="notice">공지사항</div>
     <div id="free">자유게시판</div>
 
     <!-- 데모예제: JavaScript 활용예제 -->
     <input type="button" value="숨기기" 
      onclick="document.getElementById('notice').style.visibility='hidden';" />

</body>
</html>

<!--
- 형식 : <head>
                 <style type="text/css">#id이름 { id속성 }</style>  ==> <style>태그 안에 id(이름)와 id속성 정의
           </head>
           <body>
                 <태그명 id="#으로 선언된 id이름"> ~ </태그명>  ==> 태그 안에 id 선언
           </body>
- id는 중복되지 않도록 한다. 고유값으로 지정해야 함. id가 중복될 경우 뒤의 것을 인식하지 못한다.
- <div>태그 : 눈에 보이지 않는 영역(레이어) 지정. 많이 쓰임.
-->

< 실행결과 >



< 데모예제 실행결과 - '숨기기' 버튼을 누른 후 결과화면 >


'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글

7. 중첩클래스  (0) 2009.07.27
6. 스타일시트에서의 우선순위  (0) 2009.07.27
4. class를 이용하는 방법  (0) 2009.07.27
3. 태그에 직접 적용  (0) 2009.07.27
2. <link>태그와 외부에 스타일시트파일 선언  (0) 2009.07.27
Posted by holland14
:

4. class를 이용하는 방법

.NET프로그래밍/CSS 2.0 2009. 7. 27. 22:03 |

<!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">

<head>
     <title>네 번째 방법 - 클래스를 이용하는 방법</title>
     <style type="text/css">
     .yellowButton { background-color:yellow; }
     </style>
</head>
<body>

     <input type="button" value="클릭1" />
     <input type="button" value="클릭2" class="yellowButton" />
     <input type="button" value="클릭3" />

     <textarea cols="40" rows="3" class="yellowButton"></textarea>

</body>
</html>

<!--
형식 : <head>
         <style type="text/css">.class이름 { class속성 }</style>  ==> <style>태그 안에 class(이름)와 class속성 정의
         </head>
         <body>
             <태그명 class=".(점)으로 선언된 class이름"> ~ </태그명>  ==> 태그 안에 class 선언
         </body>         
     
※ class를 이용해서 원하는 부분에만 세부적으로 스타일 적용이 가능하다.
-->

< 실행결과 >



'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글

6. 스타일시트에서의 우선순위  (0) 2009.07.27
5. id를 이용하는 방법  (0) 2009.07.27
3. 태그에 직접 적용  (0) 2009.07.27
2. <link>태그와 외부에 스타일시트파일 선언  (0) 2009.07.27
1. 스타일시트 시작  (0) 2009.07.27
Posted by holland14
:

3. 태그에 직접 적용

.NET프로그래밍/CSS 2.0 2009. 7. 27. 19:46 |

<html>
<head>
 <title>세번째 방법 - 태그에 직접 적용</title>
 <style type="text/css">
 </style>
 <link rel="stylesheet"
         type="text/css"
         href="" />
  
</head>
<body>

<input type="text" style="color:blue;background-color:yellow;" />
<input type="button" value="클릭" style="border:1px dotted red;" />

</body>
</html>


<!--
- 형식 : <태그명 style="~CSS코드~"> ~ </태그명> : 태그에 직접 삽입
- border : 테두리
- solid : 실선 / dotted : 점선
-->

< 실행결과 >



'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글

5. id를 이용하는 방법  (0) 2009.07.27
4. class를 이용하는 방법  (0) 2009.07.27
2. <link>태그와 외부에 스타일시트파일 선언  (0) 2009.07.27
1. 스타일시트 시작  (0) 2009.07.27
Client Level에서와 Server Level에서의 개발수준  (0) 2009.07.27
Posted by holland14
:

티스토리툴바