22. div태그로 레이아웃 설정하기

.NET프로그래밍/CSS 2.0 2009. 7. 29. 19:15 |

<!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>div 태그로 레이아웃 설정</title>
       <style type="text/css">
       body { text-align:center; width:100%; height:100% }
       #header {
            width:770px; height:50px; background-color:Yellow; border:groove 1px silver;
            padding: 5px 5px 5px 5px; margin:0px 0px 10px 0px;
       }  /* 770px ==> 좌우 스크롤바 안생기는 크기 */
       #left {
            width:180px; height:100px; background-color:Green; border:groove 1px silver;
            padding: 5px 5px 5px 5px; margin:0px 10px 0px 0px;
            float:left;
       }
       #content {
            width:340px; height:100px; background-color:Green; border:groove 1px silver;
            padding: 5px 5px 5px 5px; margin:0px 0px 0px 0px;
            float:left;
       }
       #right {
            width:180px; height:100px; background-color:Green; border:groove 1px silver;
            padding: 5px 5px 5px 5px; margin:0px 10px 0px 10px;
            float:left;       
       }
       #footer {
            clear:both;
            width:770px; height:50px; background-color:Yellow; border:groove 1px silver;
            padding: 5px 5px 5px 5px; margin:10px 0px 0px 0px;
       }
       </style>
   
</head>
<body>

      <div id="header">Navigator</div>
      <div style="width:770px;text-align:center">
            <div id="left">카테고리</div>
            <div id="content">메인</div>
            <div id="right">카테고리</div>
      </div>
      <div id="footer">Copyright</div>



<hr />

<!-- 여기는 table태그로 만들었음 -->

      <table border="1" width="100%">
            <tr>
                  <td colspan="3">Navigator</td>
            </tr>
            <tr>
                  <td style="width:185px;height:100px">Left</td>
                  <td>Content</td>
                  <td style="width:185px;height:100px">Right</td>
            </tr>
            <tr>
                  <td colspan="3" align="center">Copyright XHTML/CSS All right reserved.</td>
            </tr>
      </table>

</body>
</html>


<!--
- 위에서 <div>태그를 이용해서 테이블과 비슷한 레이아웃을 설정해 봄
- padding: 5px 5px 5px 5px; ==> '안쪽' 여백("상우하좌" 순서로 적용됨)
- margin:0px 0px 10px 0px; ==> '바깥쪽' 여백(아래쪽 여백만 10px 적용함)
-->


< 실행결과 >

22.div태그로레이아웃설정.htm




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

24. CSS 2.0관련 속성정리  (0) 2009.07.29
23. 레이어의 다양한 속성  (0) 2009.07.29
21. 이미지관련스타일  (0) 2009.07.29
20. 리스트(목록)관련스타일  (0) 2009.07.29
18. 스크롤바관련스타일  (0) 2009.07.28
Posted by holland14
:

21. 이미지관련스타일

.NET프로그래밍/CSS 2.0 2009. 7. 29. 10:02 |

<!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>
       <img src="./images/a.jpg" alt="" style="float:left;" />
       안녕하세요.<br /> 반갑습니다.
       <span style="clear:both;">또 만나요.</span> 언제요?

</body>
</html>

<!--
- 이미지 옆에 오는 텍스트는 스타일을 적용하지 않으면 한 줄만 보이는 게 기본 원리임. 웹브라우저를 줄여도 밀려 내려가면서 한 줄만 보임.
- <table>태그 대신 <div>/<span>태그로 웹사이트 레이아웃 잡을 때 float와 clear를 많이 쓴다.
- float : 이미지 "배치"할 '위치'(float으로 이미지가 배치되면 이미지 옆에 글씨 여러줄 올 수 있음.) - left(많이 쓴다.) / right / none : 변화없음(이미지 옆에 글씨 한줄만 옴)
- clear : float 해제(이미지 아래로 글씨 끌고(밀려) 내려간다.) - 방향 : both(많이 쓴다.) / left / right
-->

< 실행결과 >



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

23. 레이어의 다양한 속성  (0) 2009.07.29
22. div태그로 레이아웃 설정하기  (0) 2009.07.29
20. 리스트(목록)관련스타일  (0) 2009.07.29
18. 스크롤바관련스타일  (0) 2009.07.28
17. 링크관련스타일  (0) 2009.07.28
Posted by holland14
:

20. 리스트(목록)관련스타일

.NET프로그래밍/CSS 2.0 2009. 7. 29. 10:01 |

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

<b>관심분야</b><br />
1. HTML4.0<br />
2. CSS2.0<br />
3. JavaScript1.2<br />

<hr />

<h3 style="font-size:12pt;">관심분야</h3> <!-- 검색엔진(로봇)은 header태그(h3)를 우선 검색한다. 위의 방법과 모양은 같으나 이 방법 사용을 권장함. -->
       <ol style=" /* <ol>로 하던지 <ul>로 하던지 상관없음. list-style-type에서 목록모양을 정함 */
            margin-left:25px; /* 왼쪽 여백 */
            list-style-type:circle; /* circle값 대신 'none'으로 설정하면 목록그림이 안보인다. */
            list-style-position:outside; /* 들여쓰기. 'inside'로 하면 더 안쪽으로 들여쓰기 된다 , margin-left를 더 많이 쓴다. */
            list-style-image:url('http://www.dotnetkorea.com/pyjlove/images/point.gif'); /* 상대경로. 블릿기호 대신 원하는 image(모양)으로 대체할 수 있음. */
       ">
            <li>C#</li> <!-- <li>태그 사이에 들어가는 아이템(텍스트)은 기본적으로 들여쓰기가 된다. -->
            <li>ASP.NET</li>
            <li>Silverlight</li>
       </ol>

</body>
</html>


< 실행결과 >




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

22. div태그로 레이아웃 설정하기  (0) 2009.07.29
21. 이미지관련스타일  (0) 2009.07.29
18. 스크롤바관련스타일  (0) 2009.07.28
17. 링크관련스타일  (0) 2009.07.28
16. 커서관련스타일  (0) 2009.07.28
Posted by holland14
:

18. 스크롤바관련스타일

.NET프로그래밍/CSS 2.0 2009. 7. 28. 21: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>스크롤바관련스타일</title>
       <style type="text/css">
       body
       {
            scrollbar-3dlight-color:aqua;
            scrollbar-arrow-color:aqua;
            scrollbar-base-color:darksalmon;
            scrollbar-darkshadow-color:blue;
            scrollbar-face-color:chartreuse;
            scrollbar-hightlight-color:lightsalmon;
            scrollbar-shadow-color:megenta;
       }
       </style>
</head>
<body>

       <textarea cols="40" rows="4"></textarea>


</body>
</html>

<!-- 스크롤바에 스타일적용은 윈도우 웹브라우저에서만 실행가능하다. -->

< 실행결과 >

18.스크롤바관련스타일.htm


 -  참고자료 : 스크롤바 색상용 CSS 파일 만드는 파일  -
기타[1]. 스크롤바 색상용 CSS 파일 만드는 파.htm



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

21. 이미지관련스타일  (0) 2009.07.29
20. 리스트(목록)관련스타일  (0) 2009.07.29
17. 링크관련스타일  (0) 2009.07.28
16. 커서관련스타일  (0) 2009.07.28
15. 배경관련스타일  (0) 2009.07.28
Posted by holland14
:

17. 링크관련스타일

.NET프로그래밍/CSS 2.0 2009. 7. 28. 20:33 |

<!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"">
       a:link { color:Red; text-decoration:none; } /* 처음 방문 링크 */
       a:visited { color:Black; text-decoration:overline; } /* 방문 후 */
       a:active { color:White; background-color:Black; } /* 클릭할 때 */
       a:hover { font-size:15pt; border:1px dotted red; } /* 마우스 오버시 */
       </style>
</head>
<body>

       <a href="http://www.nate.com/">네이트</a>

</body>
</html>


<  실행결과 >

17.링크관련스타일.htm

- 처음방문링크


- 방문 후


- 클릭할 때


- 마우스 오버시

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

20. 리스트(목록)관련스타일  (0) 2009.07.29
18. 스크롤바관련스타일  (0) 2009.07.28
16. 커서관련스타일  (0) 2009.07.28
15. 배경관련스타일  (0) 2009.07.28
14. 외곽선(테두리)  (0) 2009.07.28
Posted by holland14
:

16. 커서관련스타일

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

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

       <a href="#" style="cursor:default;">기본값</a><br />
       <a href="#" style="cursor:auto;">자동으로 커서 설정</a><br />
       <a href="#" style="cursor:help;">도움말</a><br />
       <a href="#" style="cursor:crosshair;">+표시</a><br />
       <a href="#" style="cursor:pointer;">손모양</a><br />
       <a href="#" style="cursor:wait;">모래시계</a><br />
       <a href="#" style="cursor:text;">텍스트</a><br />
       <a href="#" style="cursor:move;">움직임</a><br />

</body>
</html>


< 실행결과 >
--> 마우스 포인터를 해당 텍스트에 갖다대면 해당되는 모양으로 변함.




 

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

18. 스크롤바관련스타일  (0) 2009.07.28
17. 링크관련스타일  (0) 2009.07.28
15. 배경관련스타일  (0) 2009.07.28
14. 외곽선(테두리)  (0) 2009.07.28
13. 여백관련스타일  (0) 2009.07.28
Posted by holland14
:

15. 배경관련스타일

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

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

    <span style="background-color:Yellow;">배경</span><br />

    <textarea cols="40" rows="10"
          style="
               background-color:Silver;
               background-image:url('http://dotnetkorea.com/images/redplus_banner1.gif');
               background-repeat:no-repeat;
               background-position:right bottom;
               background-attachment:fixed;
    "></textarea>

</body>
</html>

<!--
- 상대경로 지정시 : url('./images/moon.jpg');
- 절대경로 지정시 : url('http://www.dotnetkorea.com/images/redplus.gif');
- background-repeat : repeat(반복), no-repeat(하나만 보여주기), repeat-x(가로로 반복),
repeat-y(세로로 반복)
- background-position : 원하는 위치 설정
- background-attachment : scroll(스크롤링) / fixed(스크롤 움직여도 고정)
-->
 

< 실행결과 >



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

17. 링크관련스타일  (0) 2009.07.28
16. 커서관련스타일  (0) 2009.07.28
14. 외곽선(테두리)  (0) 2009.07.28
13. 여백관련스타일  (0) 2009.07.28
12. 텍스트관련스타일  (0) 2009.07.28
Posted by holland14
:

14. 외곽선(테두리)

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

<!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">
       .myButton
       {
            width:100px; height:50px;
            background-color:White;
       
            border-left-width:1px; border-left-style:solid; border-left-color:Red;
            border-top-width:2px; border-top-style:dotted; border-top-color:Green;
            border-right-width:3px; border-right-style:groove; border-right-color:Blue;
            border-bottom-width:4px; border-bottom-style:dashed; border-bottom-color:Yellow;
       }  /* 상우하좌에 굵기/선종류/색깔 따로 적용. */
       .myBtn2
       {
            border-width:1px; border-style:dotted; border-color:Red;
    
       }  /* 방향속성만 뺐음. 모든방향 테두리에 굵기/선종류/색깔 같음. */
       .myBtn3
       {
            border: groove 1px blue;
       }  /* 속성명 안쓰고 간단히 border(테두리)속성 기술. */
   
    </style>
</head>
<body>

       <input type="button" value="외곽선 정의" class="myButton" />
       <input type="button" value="외곽선 정의2" class="myBtn2" />
       <input type="button" value="외곽선 정의3" class="myBtn3" />

</body>
</html>

<!--
- border-방향-width    ==> border-width : 테두리굵기
- border-방향-style    ==> border-style : 테두리선의 종류
- solid(실선) / dotted(점선) / groove(음영효과 있는 선) / dashed(하이픈과 비슷한 선, [다(대)시])

- border-방향-color    ==> border-color : 테두리선 색깔
- 외곽선(테두리) 스타일은 버튼, 테이블, div 영역 등에 적용 가능하다.
--> 


< 실행결과 >



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

16. 커서관련스타일  (0) 2009.07.28
15. 배경관련스타일  (0) 2009.07.28
13. 여백관련스타일  (0) 2009.07.28
12. 텍스트관련스타일  (0) 2009.07.28
11. 정렬관련스타일  (0) 2009.07.28
Posted by holland14
:

13. 여백관련스타일

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

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

<h3>패내마외 : 패딩은 안쪽여백, 마진은 바깥쪽 여백, 적용순서 상우하좌</h3>

<div style="background-color:Yellow;margin:20px;">
    <div style="background-color:Red;padding:10px;margin:20px;">
        안녕하세요...
    </div>
</div>

<div style="background-color:Blue;
            padding-left:20px;
            padding-top:5px;
            padding-right:20px;
            padding-bottom:5px;
">
    <div style="background-color:Red;padding:10px;">
        안녕하세요...
    </div>  
</div>

</body>
</html>


<!--
- padding과 margin은 상우하좌 값을 모두 다르게 줄 수도 있다.
예) margin:5px 10px 15px 20px; ==> "상우하좌" 순으로 값이 적용됨.
 --> 


< 실행결과 >








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

15. 배경관련스타일  (0) 2009.07.28
14. 외곽선(테두리)  (0) 2009.07.28
12. 텍스트관련스타일  (0) 2009.07.28
11. 정렬관련스타일  (0) 2009.07.28
10. 폰트관련스타일  (0) 2009.07.28
Posted by holland14
:

12. 텍스트관련스타일

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

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

<span style="text-transform:uppercase;">abc(대문자로 표시)</span>
<span style="text-transform:lowercase;">ABC(소문자로 표시)</span>
<span style="text-transform:capitalize;">abc(첫자만 대문자로 표시)</span>

<div style="background-color:Yellow;text-indent:50px;">
들여쓰기
</div>

<div style="white-space:pre;">
    <b>안녕</b>하세요.
</div>

안녕하세요. 저의 전화번호는
<span style="white-space:nowrap;">010-1234-1234</span>입니다.

</body>
</html>

<!--
- "text-indent"속성을 이용해서 <blockquote>태그의 기능을 대체할 수 있다.
- "white-space"속성에 'pre'또는 'nowrap'을 적용하여 <pre>태그와 <nobr>태그의 기능을 대체할 수 있다.
--> 

< 실행결과 >



<브라우저 창을 줄였을 때 - "white-space"속성에 'nowrap'값을 적용한 전화번호텍스트는 깨지지 않는다.> 


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

14. 외곽선(테두리)  (0) 2009.07.28
13. 여백관련스타일  (0) 2009.07.28
11. 정렬관련스타일  (0) 2009.07.28
10. 폰트관련스타일  (0) 2009.07.28
9. 영역설정태그- <div>와 <span>태그  (0) 2009.07.28
Posted by holland14
:

티스토리툴바