블로그 이미지
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.28 15장 배경 관련 스타일
  2. 2009.07.28 14장 테두리 외곽선 스타일
  3. 2009.07.28 13장 여백관련Style
  4. 2009.07.28 12장 TextStyle
2009. 7. 28. 15:25 .Net Project/CSS 2.0

15장 배경 관련 스타일

반응형

g
Element의 배경색이나 무늬를 지정할 수 있다.

nbackground-color : 색 이름 / RGB 값
nbackground-image : url(“URL”) / none
nbackground-repeat : repeat / repeat-x / repeat-y / no-repeat
nbackground-position : top / bottom / left / right / center
nbackground-attachment : fixed / scroll



<!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>15.배경관련스타일</title>
</head>

<body>
 <!--배경색 Yellow로 잡아준다 -->
 <span style="background-color:Yellow;"></span><br /> 
    <textarea id="TextArea1" cols="25" rows="28"
      style="
                background-color:Yellow;
                background-image:url('./images/태연.jpg');
각각의 repeat-x, position:top, attachment:scroll 의 속성을 각각 설정
                background-repeat:repeat-x;
                background-position:top bottom;
                background-attachment:scroll;
                "
    </textarea>
</body>
</html>

반응형

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

17장 LinkStyle  (0) 2009.07.28
16장 CusorStyle  (0) 2009.07.28
14장 테두리 외곽선 스타일  (0) 2009.07.28
13장 여백관련Style  (0) 2009.07.28
12장 TextStyle  (0) 2009.07.28
posted by Magic_kit
2009. 7. 28. 12:38 .Net Project/CSS 2.0

14장 테두리 외곽선 스타일

반응형


<!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>14.테두리 외곽선 스타일</title>
 <style type="text/css">
    .myButton
     {
        width:100px; height:50px;
        background-color:Gray;
  
        border-left-width:1px;border-top-style:solid;border-left-color:Red;
        border-top-width:2px;border-top-style:dotted;border-top-color:Blue;
        border-right-width:3px;border-top-style:groove;border-right-color:Green;
        border-bottom-width:4px;border-top-style:dashed;border-bottom-color:Maroon;
     }
   .myButton1
    {
        border-left-width:3px;border-top-style:solid;border-left-color:Red;
        border-top-width:3px;border-top-style:solid;border-top-color:Red;
        border-right-width:3px;border-top-style:solid;border-right-color:Red;
        border-bottom-width:3px;border-top-style:solid;border-bottom-color:Red;
    }
  .myButton2
   {
        border:groove 3px gray;
 
   }
  .myButton3
   {
        border-width:3px; border-style:dotted; border-color:Red;
    }
 </style>

</head>

<body>
  <input id="Button1" type="button" value="외곽선정의" class="myButton" /> <br />
  <input id="Button2" type="button" value="외곽선정의" class="myButton1"/>
  <input id="Button3" type="button" value="외곽선정의" class="myButton2" />
  <input id="Button4" type="button" value="외곽선정의" class="myButton3" />
</body>
</html>

반응형

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

16장 CusorStyle  (0) 2009.07.28
15장 배경 관련 스타일  (0) 2009.07.28
13장 여백관련Style  (0) 2009.07.28
12장 TextStyle  (0) 2009.07.28
11장 SortStyle  (0) 2009.07.28
posted by Magic_kit
2009. 7. 28. 11:47 .Net Project/CSS 2.0

13장 여백관련Style

반응형




<!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>13.여백관련스타일</title>
</head>

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

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

<!--각각 padding margin 속성을 따로 지정을 하여 사용할 수 있다-->
<div style="background-color:Yellow;
  margin:20px;
  padding-left:20px;
  padding-top:5px;
  padding-right:20px;
  padding-bottom:5px;
  ">

 <div style="background-color:Green;padding:5px; margin:5px;">
    안녕하세요....
 </div>
</div>

</body>
</html>

반응형

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

15장 배경 관련 스타일  (0) 2009.07.28
14장 테두리 외곽선 스타일  (0) 2009.07.28
12장 TextStyle  (0) 2009.07.28
11장 SortStyle  (0) 2009.07.28
10장 FontStyle  (0) 2009.07.28
posted by Magic_kit
2009. 7. 28. 10:46 .Net Project/CSS 2.0

12장 TextStyle

반응형



                                       ↕



<!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>12.텍스트관련 스타일</title>
</head>

<body>

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

<!--들여쓰기를 50px만큼 해준다 -->
<div style="background-color:Yellow;text-indent:50px;"> text-indent 들여쓰기
   들여쓰기
</div>

<!--<pre>태그와 같은 형태로 사용-->
<div style="white-space:pre;">
  <b>안녕</b>하세요 
</div>

<!--전화번호를 한줄로 보여주기 위해서는 <nobr>,
<white-space:nowrap></white-space:nowrap> 하여 된다 -->
<!--일반적으로 nobr 태그는 span태그로 묶어서 white-space:nowrap 태그로 사용>

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

</body>
</html>

반응형

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

14장 테두리 외곽선 스타일  (0) 2009.07.28
13장 여백관련Style  (0) 2009.07.28
11장 SortStyle  (0) 2009.07.28
10장 FontStyle  (0) 2009.07.28
09장 영역설정 태그  (0) 2009.07.27
posted by Magic_kit
prev 1 2 3 4 5 6 next

티스토리툴바