<!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를 이용해서 원하는 부분에만 세부적으로 스타일 적용이 가능하다.
-->

< 실행결과 >



Posted by holland14
:

<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 : 점선
-->

< 실행결과 >



Posted by holland14
:


======================================= 외부스타일시트.htm ====================================

<!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>두번째 방법 - link태그와 외부에 스타일시트파일 선언</title>
    <link rel="Stylesheet" type="text/css" href="StyleSheet.css" />

</head>
<body>

안녕하세요.

</body>
</html>

<!--
- 형식 : <link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
- <link>태그와 외부에 스타일시트파일을 만들어서 따로 분리하는 방법이 가장 좋음.
- 한글파일명, 이미지명은 쓰지 않는게 좋음. 개발환경이 다르면 깨질 수 있음.

-->

====================================== StyleSheet.css =========================================

body
{
    color:Red;
    font-size:12px;
    font-family:Verdana;
}

< 실행결과 >



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

4. class를 이용하는 방법  (0) 2009.07.27
3. 태그에 직접 적용  (0) 2009.07.27
1. 스타일시트 시작  (0) 2009.07.27
Client Level에서와 Server Level에서의 개발수준  (0) 2009.07.27
CSS 2.0 PPT  (0) 2009.07.27
Posted by holland14
:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>스타일시트 시작 - 첫번째 방법 : <style type="text/css"> ~CSS코드~ </style></title>
    <style type="text/css">
    div { font-size:9pt; color:Blue; font-family:Verdana; }
   
    </style>
</head>
<body>
<div>
    안녕하세요. <br />
</div>
</body>
</html>

<!--
- <style>태그 안에 있는 div { font-size:9pt; color:Blue; font-family:Verdana; }는 <body>태그 안에 있는 <div>태그 안에 적용됨. / 크기는 9pt, 영문글꼴체는 Verdana를 많이 사용함. / font-family는 '글꼴'임.

- HTML 페이지에 스타일시트(CSS) 적용하는 5가지 방법
1. <style type="text/css"> ~CSS코드~ </style>
2. 링크 태그 <link> : 스타일 코드가 길어질 경우 유용함.
    <link 
         rel="stylesheet" 
         type="text/css"
         href="~CSS파일경로~"
     >
3. <태그명 style="~CSS코드~"> ~ </태그명> : 태그에 직접 적용하는 방법
4. <태그명 class=".으로선언된스타일명"> ~ </태그명>
5. <태그명 id="#으로선언된스타일명"> ~ </태그명>
-->


< 실행결과 >




Posted by holland14
:


- Client Level

     XHTML1.0 / HTML4.0 : 기본 모양
     css2.0 : 스타일 적용(꾸미기)
     JavaScript1.2 : 기능(을 넣어 주는 것.)



- Server Level
 
    C#/ASP.NET/Silverlight/WPF/PHP, Java/JSP/Flex

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

4. class를 이용하는 방법  (0) 2009.07.27
3. 태그에 직접 적용  (0) 2009.07.27
2. <link>태그와 외부에 스타일시트파일 선언  (0) 2009.07.27
1. 스타일시트 시작  (0) 2009.07.27
CSS 2.0 PPT  (0) 2009.07.27
Posted by holland14
:
Posted by holland14
: