11. 정렬관련스타일

.NET프로그래밍/CSS 2.0 2009. 7. 28. 11:57 |

<!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>
</head>
<body>
       <table border="1" width="100%" style="width:100%; height:200px;">
           <tr>
               <td align="center">
                     1<br />
                     1<br />
               </td>
               <td style="text-align:center; line-height:200%;">
                     2<br />
                     2<br />
               </td>
           </tr>
           <tr>
               <td align="right" valign="top" style="letter-spacing:0.5em;">33</td>
               <td style="text-align:right; vertical-align:bottom; word-spacing:1em;">44 44</td>
           </tr>
       </table>
</body>
</html>

<!--
- line-height : 줄간격
- letter-spacing : '글자(1개)' 사이의 간격 / word-spacing : '단어' 사이의 간격
- em : 해당글자(단어)의 높이를 '1'로 하는 단위
- text-align : 좌우로 정렬(left, center, right)
- vertical-align : 상하로 정렬(top, middle, bottom)
--> 

< 실행결과 >



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

13. 여백관련스타일  (0) 2009.07.28
12. 텍스트관련스타일  (0) 2009.07.28
10. 폰트관련스타일  (0) 2009.07.28
9. 영역설정태그- <div>와 <span>태그  (0) 2009.07.28
8. 중첩태그  (0) 2009.07.28
Posted by holland14
:

10. 폰트관련스타일

.NET프로그래밍/CSS 2.0 2009. 7. 28. 11:57 |

<!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>폰트(font)관련스타일</title>
       <style type="text/css"">
       body { color:Navy; font-size:15pt; font-family: 맑은 고딕; }
       .boldText { font-weight:bold; }
       #italicText { font-style:italic; }
       .strikeText{ text-decoration:line-through overline; }
    </style>
</head>
<body>

글자 모양 관련 3가지 : 색상, 크기, 글꼴 <br />
<b>볼드체</b> <span class="boldText">볼드체</span> <br />
<i>이탤릭체</i> <span id="italicText">이탤릭체</span> <br />
<u>밑줄</u> <span style="text-decoration:underline;">밑줄</span> <br />
<s>취소선1</s> <strike>취소선2</strike> <span class="strikeText">취소선3</span>

</body>
</html>


< 실행결과 >



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

12. 텍스트관련스타일  (0) 2009.07.28
11. 정렬관련스타일  (0) 2009.07.28
9. 영역설정태그- <div>와 <span>태그  (0) 2009.07.28
8. 중첩태그  (0) 2009.07.28
7. 중첩클래스  (0) 2009.07.27
Posted by holland14
:

9. 영역설정태그- <div>와 <span>태그

.NET프로그래밍/CSS 2.0 2009. 7. 28. 00:47 |

<!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">
       #main { color:Black; }
       #notice { font-size:9pt; }
       .title{ font-weight:bold; }
       .content { margin-left:-25px; }
       </style>
</head>
<body>

안녕하세요. <div style="width:100px;background-color:Yellow;">반갑습니다.</div> 또 만나요.

<hr />

안녕하세요.<span style="color:Red;">반갑습니다.</span> 또 만나요.

<hr />

<div id="main">
    <div id="notice">
        <div class="title">공지사항</div>
        <div class="content">
            <ul>
                <li>Visual Web Developer 2008 설치</li>
                <li>SQL Server 2008 설치</li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>


<!--
- <div>태그 : 레이어, 박스, 영역 태그
     <span>태그와의 차이점 : <div>태그는 (자동)줄바꿈이 됨. 고정된 영역을 사용해서 텍스트가 밀려나지 않는다.
- <span>태그 : 텍스트용. 특정 부분만 스타일시트 사용하고 싶을 때. (자동)줄바꿈이 안됨. 웹브라우저 크기를 작게 하면 텍스트가 밀려남.
- 위에 있는 <style>태그 내의 .content { margin-left:-25px; }에서 'margin-left'는 왼쪽으로의 여백을 말함.
-->

< 실행결과 >





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

11. 정렬관련스타일  (0) 2009.07.28
10. 폰트관련스타일  (0) 2009.07.28
8. 중첩태그  (0) 2009.07.28
7. 중첩클래스  (0) 2009.07.27
6. 스타일시트에서의 우선순위  (0) 2009.07.27
Posted by holland14
:

8. 중첩태그

.NET프로그래밍/CSS 2.0 2009. 7. 28. 00:04 |

<!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">
    h3 em { color:Red; }
    </style>
</head>
<body>

    <h3>HTML</h3>
    <em>CSS</em>
    <h3>오늘은 <em>CSS2.0</em>배우는 시간</h3>
    <h1>오늘은 <em>CSS2.0</em>배우는 시간</h1>

</body>
</html>


<!--
위의 <style>태그 내에서 'h3'태그안에 'em'태그가 중첩된 경우에만 '빨강색(Red)'으로 스타일을 적용하고 있다.
-->


< 실행결과 >





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

10. 폰트관련스타일  (0) 2009.07.28
9. 영역설정태그- <div>와 <span>태그  (0) 2009.07.28
7. 중첩클래스  (0) 2009.07.27
6. 스타일시트에서의 우선순위  (0) 2009.07.27
5. id를 이용하는 방법  (0) 2009.07.27
Posted by holland14
:

7. 중첩클래스

.NET프로그래밍/CSS 2.0 2009. 7. 27. 23:45 |

<!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">
    .redText { color:blue; }
    h2.redText { color:red; }
    </style>
</head>
<body>

    <h1 class="redText">안녕</h1>
    <h2 class="redText">안녕</h2>
    <h3 class="redText">안녕</h3>
   
</body>
</html>


<!--
위의 예제에서 <body>태그 내의 class이름이 'redText'로 모두 같으므로 클래스가 중첩된다. 그 중 위쪽에 <style>태그사이에서 "h2.redText { color:red; }"를 보면 "h2"라는 특정한 태그와 그 class의 속성을 지정하고 있다. 실행해보면 <body>내의 문장중에서 <h2>태그가 있는 문장만 빨강색으로 된다.
-->

< 실행결과 >



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

9. 영역설정태그- <div>와 <span>태그  (0) 2009.07.28
8. 중첩태그  (0) 2009.07.28
6. 스타일시트에서의 우선순위  (0) 2009.07.27
5. id를 이용하는 방법  (0) 2009.07.27
4. class를 이용하는 방법  (0) 2009.07.27
Posted by holland14
:

6. 스타일시트에서의 우선순위

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

<!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">
       div { color:Green; }
       .yellowText { color:Yellow; }
       #redText { color:Red; }
       </style>
       <link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
      <div class="yellowText" id="redText" style="color:Teal;">
          안녕하세요

      </div>

</body>
</html>


<!--
- 스타일시트에서 여러 속성 및 태그들이 중첩될 경우 우선순위로 적용되는 것은 태그사이에 있는 본문과 가장 가까운 속성이 우선 적용된다.

우선순위 : 기본은 가까운 것...
style속성 > id속성 > class속성 > (style태그 > link태그)
-->

< 실행결과 >

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

8. 중첩태그  (0) 2009.07.28
7. 중첩클래스  (0) 2009.07.27
5. id를 이용하는 방법  (0) 2009.07.27
4. class를 이용하는 방법  (0) 2009.07.27
3. 태그에 직접 적용  (0) 2009.07.27
Posted by holland14
:

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
:

2. <link>태그와 외부에 스타일시트파일 선언

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


======================================= 외부스타일시트.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
:

티스토리툴바