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
:

티스토리툴바