블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

 «  » 2024.5
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
반응형

Category

Recent Post

Recent Comment

Archive

'.Net Project/CSS 2.0'에 해당되는 글 23건

  1. 2009.07.29 20장 목록관련스타일
  2. 2009.07.28 18장 ScrollBarStyle
  3. 2009.07.28 17장 LinkStyle
  4. 2009.07.28 16장 CusorStyle
2009. 7. 29. 17:49 .Net Project/CSS 2.0

20장 목록관련스타일

반응형



 

<b>관심분야</b><br />
1.XHTML 4.0 <br />
2.javascript1.2 <br />
<hr />
<h3 style="font-size:12pt;">관심분야</h3>
<ol style="margin-left:-10px;">
     <li>C#</li>
     <li>Java</li>
     <li>HTML</li>
</ol>



 <ol style="list-style-type:circle; margin-left:-20px;"> <!--기본적으로 none 설정-->
       <li>C#</li>
       <li>Java</li>
       <li>HTML</li>
</ol>



<!--경로를 지정하여 목록에 list-style-image 경로 사용해 이미지를 삽입  -->
<ol style="list-style-type:none; list-style-position:inside; list-style-image:url 
      ('http://cfs.tistory.com/static/images/icon_rss.gif');">
       <li>C#</li>
       <li>Java</li>
       <li>HTML</li>
</ol>

<전체소스화면>--------------------------------------------------------------

<!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>20.목록관련스타일</title>
</head>
<body>

<b>관심분야</b><br />
1.XHTML 4.0 <br />
2.javascript1.2 <br />
<hr />

<!--겉에서 보여주는 것에 대한 것 뿐만 아니라 그 이상을 보여주는 것이 2.0이다 -->
<h3 style="font-size:12pt;">관심분야</h3>
<ol style="margin-left:-10px;"><!--리스트 아이템은 기본적으로 들여쓰기-->
     <li>C#</li>
     <li>Java</li>
     <li>HTML</li>
</ol>

<ol style="list-style-type:circle; margin-left:-20px;"> <!--기본적으로 none 설정-->
     <li>C#</li>
     <li>Java</li>
     <li>HTML</li>
</ol>
<!--경로를 지정하여 목록에 list-style-image 경로 사용해 이미지를 삽입 할 수 있습니다 -->
<ol style="list-style-type:none; list-style-position:inside; list-style-image:url('http://cfs.tistory.com/static/images/icon_rss.gif');">
     <li>C#</li>
     <li>Java</li>
     <li>HTML</li>
</ol>

<참고사항>
 glist-style-type : 형식







반응형

'.Net Project > CSS 2.0' 카테고리의 다른 글

22장 태그로 레이아웃 설정  (1) 2009.07.29
21장 이미지 스타일  (0) 2009.07.29
18장 ScrollBarStyle  (0) 2009.07.28
17장 LinkStyle  (0) 2009.07.28
16장 CusorStyle  (0) 2009.07.28
posted by Magic_kit
2009. 7. 28. 15:46 .Net Project/CSS 2.0

18장 ScrollBarStyle

반응형

※ ScrollBarStyle은  파이어폭스에서 볼 수 없습니다. 인터넷 익스플로러(IE)에서만
    제대로 보입니다.

CSS로 웹브라우저 스크롤바(Scrollbar)의 색상을 변경할 수 있지만, 웹표준이 아니기에 파이어폭스에서는 보이지 않습니다.
파이어폭스는 이 스크롤바 속성을 그냥 무시해 버립니다.
충돌하거나 문제가 생기는 일은 없습니다.

웹브라우저(IE)에 나타나는 모든 스크롤바의 색깔을, 전체적으로 혹은 개별적으로
바꿀 수 있습니다.

이러한점 유의 하시고, 자기만의 스타일에 맞도록 스크롤바 속성을 변경을 할 수 있습니다..

(아래의 링크를 통해 스크롤바를 맘대루 바꿔보세요)


<!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>18.Scroll Bar Style</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-highlight-color:lightsalmon;
            scrollbar-shadow-color:magenta;
       }
</style>

</head>

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


 

반응형

'.Net Project > CSS 2.0' 카테고리의 다른 글

21장 이미지 스타일  (0) 2009.07.29
20장 목록관련스타일  (0) 2009.07.29
17장 LinkStyle  (0) 2009.07.28
16장 CusorStyle  (0) 2009.07.28
15장 배경 관련 스타일  (0) 2009.07.28
posted by Magic_kit
2009. 7. 28. 15:31 .Net Project/CSS 2.0

17장 LinkStyle

반응형
gA: link {스타일}
n: 처음 링크 색상
gA: visited {스타일}
n: 방문 링크 색상
gA: active {스타일}
n: 움직일 때 링크 색상
gA: hover {스타일}
n: 링크에 마우스 포인터 올라갈 때 링크색상

<!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>17.링크 관련 스타일</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{color:Green; font:15pt;border:1px solid red;}
 
</style>
</head>
<body>
 <a href="http://www.nate.com/">네이트</a>
</body>
</html>

반응형

'.Net Project > CSS 2.0' 카테고리의 다른 글

20장 목록관련스타일  (0) 2009.07.29
18장 ScrollBarStyle  (0) 2009.07.28
16장 CusorStyle  (0) 2009.07.28
15장 배경 관련 스타일  (0) 2009.07.28
14장 테두리 외곽선 스타일  (0) 2009.07.28
posted by Magic_kit
2009. 7. 28. 15:28 .Net Project/CSS 2.0

16장 CusorStyle

반응형

nw-resize : 커서의 화살표 방향이 북서쪽을 향한다.

ne-resize : 커서의 화살표 방향이 북동쪽을 향한다.

sw-resize : 커서의 화살표 방향이 남서쪽을 향한다.

se-resize : 커서의 화살표 방향이 남동쪽을 향한다.

help : 커서의 모양을 ?물음표로 바꾼다.

move : 커서의 모양을 이동 모양으로 바꾼다.

e-resize : 커서의 모양을 동쪽방향으로 향하게 한다.

n-resize : 커서의 모양을 북쪽방향으로 향하게 한다.

s-resize : 커서의 모양을 남쪽방향으로 향하게 한다.

w-resize : 커서의 모양을 서쪽방향으로 향하게 한다.

text : 커서의 모양을 텍스트 입력상태로 바꾼다.

crosshair : 커서의 모양을 십자가로 바꾼다.(그래픽툴의 마퀴툴 커서처럼)

hand : 커서의 모양을 손모양으로 바꾼다. (링크처럼)

wait : 커서의 모양을 대기(모래시계) 모양으로 바꾼다.

default : 커서의 모양에 아무런 변화가 없다




<!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>16.커서, 마우스 포인터, 캐럿</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 Project > CSS 2.0' 카테고리의 다른 글

18장 ScrollBarStyle  (0) 2009.07.28
17장 LinkStyle  (0) 2009.07.28
15장 배경 관련 스타일  (0) 2009.07.28
14장 테두리 외곽선 스타일  (0) 2009.07.28
13장 여백관련Style  (0) 2009.07.28
posted by Magic_kit
prev 1 2 3 4 5 6 next

티스토리툴바