css연습2

DevTool/CSS 2009. 6. 5. 10:13
<html>
<head>
<style>
 #top {background :black;color:white;width:760px;height:100px }
 #left{background:blue;color:white;width:150px;height:500px;float:left;}
 #content {background:yellow;color:blue;width:510px;height:400px;vertical-align:top;float:left;overflow:hidden}
 #right{background:green;color:yellow;width:100px;height:400px;vertical-align:top;float:left;overflow:hidden}
 #bottom{background:gray;color:white;width:610px;height:100px;float:left}
 #page {width:760px;overflow:visible;}
</style>
</head>
<body >
 <div id="top"> 상단 로고 </div>
<div id="page">
     <div id="left">좌측메뉴 </div>
     <div id="content">컨텐츠</div>
     <div id="right">오른쪽 </div>
     <div id="bottom">하단</div>
 </div>
</body>
</html>
Posted by 말없제이
,

css 연습1

DevTool/CSS 2009. 6. 5. 10:12

<HTML>
<HEAD>
<TITLE> 스타일시트 활용 </TITLE>
<STYLE>
<!--
 body,table,input {font-size:9pt;}  /* body,table,input 태그에 글자 크기, 색상 지정 */

 textarea {color:#009933;      /* textarea 글자 색상 지정 */
 height:200px}         /* textarea 높이 지정 */

 .tb {border-style:double;    /* 테두리선 모양 지정 */
 border-color:#DB7100;     /* 테두리선 색상 지정 */
 margin-top:40px;       /* 브라우저와의 위쪽 간격 지정 */
 margin-left:30px;}       /* 브라우저와의 왼쪽 간격 지정 */

 .re {color:#CC3300;}      /* 글자 색상 지정 */

 .box {border:1 solid orange;   /* 테두리 두께와 선모양, 색상 지정 */
 color:#3366CC;        /* 글자 색상 지정 */
 height:20px;}         /* 높이 지정 */

 .td1 {width:70px;       /* 넓이 지정 */
 background-color:#FFCC66;   /* 배경색상 지정 */
 padding:5px}         /* 문단 안쪽의 여백 지정 */

 .td2 {width:300px;       /* 넓이 지정 */
 background-color:#FFAA01;   /* 배경색상 지정 */
 padding:3px}         /* 문단 안쪽의 여백 지정 */

 A:link, A:visited {color:#6633CC; text-decoration:none} /* 하이퍼링크의 기본링크와 방문 링크의 색상과 모양 지정 */

 A:hover {color:#66FF66; text-decoration:underline} /* 하이퍼링크의 롤오버 링크의 색상과 모양 지정 */
-->
</STYLE>
</HEAD>

<BODY>
<TABLE WIDTH="500" class="tb">
<TR>
 <TD class="td1">아이디</TD>
 <TD class="td2">
  <INPUT class="box" type="text" name="id" size="20">
  <A HREF="#">[중복확인]</A>
 </TD>
</TR>
<TR>
 <TD class="td1">비밀번호</TD>
 <TD class="td2"><INPUT class="box" type="password" name="pw" size="20"></TD>
</TR>
<TR>
 <TD class="td1">이름</TD>
 <TD class="td2"><INPUT class="box" type="text" name="kor_na" size="20"></TD>
</TR>
<TR>
 <TD class="td1">이메일</TD>
 <TD class="td2"><INPUT class="box" type="text" name="email" size="20"></TD>
</TR>
<TR>
 <TD class="td1">연락처</TD>
 <TD class="td2"><INPUT class="box" type="text" name="tel" size="20"></TD>
</TR>
<TR>
 <TD class="td1">자기소개</TD>
 <TD class="td2"><TEXTAREA  cols=50></TEXTAREA></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Posted by 말없제이
,

css를 사용한 table/div 연습.

DevTool/CSS 2009. 6. 4. 12:47

<html>
<head>
<style type="text/css">
.ex1tdcenter
{
text-align:center;
}
.ex1td
{
background-color:green;text-align:right;width:100px;
}
.ex1inp200
{
width:200px;
border-color:red;
}
.ex1inp150
{
width:150px;
border-color:red;
}
.ex2tab
{
border-style:solid;
border-width:2;
border-color:green;
text-align:center;
width:360px;
}
.ex2tdblue
{
background-color:#6d6dff;
color:white;
}
.ex2tdsky
{
background-color:#93feff;
}
.nonetd
{
cellspacing;0;
}
.ex3tab
{
border-style:double;
border-width:5;
border-color:green;
background-color:white;
}
.ex3tab td
{
background-color:#6d6dff;
border-color:withe;
}
.div1
{
position:relative;top:0px;left:0px;
width:800px;
height:80px;
background-color:#6d6dff;
}
.div2
{
position:relative;top:0px;left:0px;
width:200px;
height:500px;
background-color:#ffb5f7;
float:left;
}
.div3
{
position:relative;top:0px;left:-3px;
width:603px;
}
.div4
{
position:relative;top:0px;left:0px;
width:500px;
height:400px;
background-color:beige;
float:left;
}
.div5
{
position:relative;top:0px;left:-3px;
width:100px;
height:400px;
background-color:#abd0bc;

}
.div6
{
position:relative;top:0px;left:0px;
width:600px;
height:100px;
background-color:#8984b9;
}
</style>
</head>
<body>
<h2>실습1)</h2>
<table>
<tr>
<td colspan="2" class="ex1tdcenter">관리자ID와 비밀번호를 입력해 주세요</td>
</tr>
<tr>
<td class="ex1td">id</td><td><input type="text" id="id" class="ex1inp200"></td>
</tr>
<tr>
<td class="ex1td">비밀번호</td><td><input type="password" id="pwd" class="ex1inp150"><input type="button" id="login" value="login"></td>
</tr>
</table>
<br>
<hr>
<h2>실습2)</h2>
<div style="float:left;width:400px;">
<table class="ex2tab" CELLSPACING="0">
<tr class="ex3td">
<td colspan="2">신문</td>
</tr>
<tr class="ex2tdblue">
<td>일간지</td><td>경제지</td>
</tr>
<tr>
<td>동아일보</td><td>매일경제</td>
</tr>
<tr>
<td>한겨레</td><td>서울경제</td>
</tr>
<tr>
<td>전자신문</td><td> </td>
</tr>
</table>
</div>
<div style="width:400px;">
<table class="ex2tab">
<tr>
<td colspan="2">방송</td>
</tr>
<tr class="ex2tdsky">
<td>방송국</td><td>CATV</td>
</tr>
<tr>
<td>kbs</td><td>ytn</td>
</tr>
<tr>
<td>mbc</td><td> </td>
</tr>
<tr>
<td>sbs</td><td> </td>
</tr>
</table>
</div>
<br>
<hr>
<h2>실습3)</h2>
<table class="ex3tab" border="1">
<tr>
<td width="150px">아이디</td>
<td width="400px"><input class="ex1inp200" type="text">중복확인</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input class="ex1inp200" type="password"></td>
</tr>
<tr>
<td>이름</td>
<td><input class="ex1inp200" type="text"></td>
</tr>
<tr>
<td>이메일</td>
<td><input class="ex1inp200" type="text"></td>
</tr>
<tr>
<td>연락처</td>
<td><input class="ex1inp200" type="text"></td>
</tr>
<tr>
<td>자기소개</td>
<td>
<textarea rows="8" cols="50">
</textarea>
</td>
</tr>
</table>
<br>
<hr>
<h2>실습4)</h2>
<div class="div1">상단로고</div>
<div class="div2">좌측메뉴</div>
<div class="div3">
<div class="div4">컨텐츠</div>
<div class="div5">오른쪽</div>
<div class="div6">하단</div>
</div>
</body>
</html>

Posted by 말없제이
,

커서모양/개행여부/그림좌우

DevTool/CSS 2009. 6. 4. 12:46

<html>
<head>
<style type="text/css">
div
{
background-color:green;
}
#ab
{
background-color:blue;display:inline;
}
#ac
{
background-color:beige;display:block;
}
#ad
{
background-color:beige;display:none;
}
</style>
</head>
<body>
<h1>커서 모양</h1>
<div style="cursor:auto">style="cursor:auto"(자동)</div>
<div style="cursor:crosshair">style="cursor:crosshair"(십자형)</div>
<div style="cursor:pointer">style="cursor:pointer"(링크위모양)</div>
<div style="cursor:move">style="cursor:move"(이동가능모양)</div>
<div style="cursor:text">style="cursor:text"(텍스트 선택용모양)</div>
<div style="cursor:wait">style="cursor:wait"(처리중모양)</div>
<div style="cursor:help">style="cursor:help"(도움말모양)</div>
[n|s|w|e|ne|nw|se|sw]-resize(크기 재설정 가능 : 위|아래|왼쪽|오른쪽|오른쪽위|왼쪽위|오른쪽아래|왼쪽아래 방향)<br>
<br><br>
<h1>display - 출력형태</h1>
display:block(줄바꿈 일어남)|inline(줄바꿈 일어나지 않음)|none(보이지 않음)<br>
<xmp>
#ab
{
background-color:blue;display:inline;
}
#ac
{
background-color:beige;display:block;
}
#ad
{
background-color:beige;display:none;
}
.....
p 태그<br>
앞부분 <p id="ab">중간부분</p> 뒷부분<br><br>
div 태그<br>
앞부분 <div id="ab">중간부분</div> 뒷부분<br><br>
span 태그<br>
앞부분 <span id="ac">중간부분</span> 뒷부분<br><br>
span 태그<br>
앞부분 <span id="ad">중간부분</span> 뒷부분<br><br>
</xmp>
p 태그<br>
앞부분 <p id="ab">중간부분</p> 뒷부분<br><br>
div 태그<br>
앞부분 <div id="ab">중간부분</div> 뒷부분<br><br>
span 태그<br>
앞부분 <span id="ac">중간부분</span> 뒷부분<br><br>
span 태그<br>
앞부분 <span id="ad">중간부분</span> 뒷부분<br><br>
<br>
<h1>그림 좌우 배치</h1>
float:left(그림 왼쪽배치)|right(그림 오른쪽 배치)|none(좌우배치와 삽입이 실행안됨)<br>
clear:left(왼쪽요소 삽입해제)|right(오른쪽 요소삽입해제)|both(양쪽 요소 삽입해제)|none(삽입해제를 하지 않음)<br>
<xmp>
<img style="float:right;" src="../html/image/poster1.jpg" alt="거북이도난다">
거북이.. 토끼.. 첫줄<br> 말<br> 거북이<br> 난
<img src="../html/image/poster2.jpg" alt="말아톤">

<img style="float:left;" src="../html/image/poster3.jpg"><br>
거북이.. 토끼.. 둘째줄<br>세쩨줄<br><p style="clear:left">이건 clear준상태 밑으로 내려감</p>
<img src="../html/image/poster4.jpg">
</xmp>
<img style="float:right;" src="../html/image/poster1.jpg" alt="거북이도난다">
거북이.. 토끼.. 첫줄<br> 말<br> 거북이<br> 난
<img src="../html/image/poster2.jpg" alt="말아톤">

<img style="float:left;" src="../html/image/poster3.jpg"><br>
거북이.. 토끼.. 둘째줄<br>세쩨줄<br><p style="clear:left">이건 clear준상태 밑으로 내려감</p>
<img src="../html/image/poster4.jpg">
</body>
</html>

Posted by 말없제이
,

문단위치/폭/높이 지정.

DevTool/CSS 2009. 6. 4. 12:45
<html>
<head>
<style type="text/css">
span
{
font-size:20;width:300;height:200;background-color:yellow;
}
div
{
font-size:20;width:200;height:150;background-color:green;
}
.rel1{position:relative;top:0px;left:0px;}
.abs1{position:absolute;top:150px;left:150;}
.abs2{position:absolute;top:300px;left:200;}
#clip1 {position:absolute;top:1700;left:150;clip:rect(0px,150px,200px,0px)}
</style>
</head>
<body>
<h1>문단의 위치지정, 폭, 높이 지정 속성</h1>
position:static(위치지정 사용못함) | relative(현재 컨텐츠의 상대적) | absolute(절대적 위치)<br>
.rel1{position:relative;top:50px;left:100;}<br>
.abs1{position:absolute;top:150px;left:150;}<br>
.abs2{position:absolute;top:300px;left:200;}<br>
<span>스펜 한글로하면 스판</span><span class="rel1" style="background-color:beige;">position:relative;top:50px;left:100; 상대적위치</span><span class="abs1">position:absolute;top:150px;left:150;절대적위치</span>
<div class="abs1">절대적 위치1</div>
<div class="abs2">절대적 위치2</div>
<br><br><br><br><br>
<h1>겹친 순서지정</h1>
z-index:수치. 수치는 클수록 위쪽<br>
<div style="position:absolute;top:550px;left:150px;">A - 겹치기 z-index적용하기전</div><div style="position:absolute;top:500px;left:200px;background-color:beige;">B - 겹치기2 z-index적용하기전</div>
<div style="position:absolute;top:550px;left:450px;z-index:255;">A - 겹치기 z-index적용후</div><div style="position:absolute;top:500px;left:500px;background-color:beige;">B - 겹치기2 z-index적용후</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>보여주는지 여부</h1>
visibility:visible(보임) | hidden(보이지 않음);<br>
<h1>범위 벗어나는 글씨처리</h1>
overflow:scroll(내용에 관계없이 스크롤바) | visible(범위를 벗어나는 내용 보여줌) | auto(자동조정) | hidden(범위를 벗어나는 내용 감춤)<br>
<div style="overflow:scroll">overflow:scroll 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:visible">overflow:visible 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:auto">overflow:auto 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:hidden">overflow:didden 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<h1>잘라서 출력</h1>
<img src="../html/image/africa.jpg" id="clip1" width="500" height="400">
</body>
</html>
Posted by 말없제이
,

테두리선/여백 연습.

DevTool/CSS 2009. 6. 3. 12:46
<html>
<head>
<style type="text/css">
.test
{
border-top-style:dashed;
border-top-color:yellow;
border-right-style:double;
border-right-color:blue;
border-left-style:double;
border-left-color:blue;
border-bottom-style:dashed;
border-bottom-color:red;
border-bottom-width:12;
padding:20px;
}
.test1
{
border-style:dashed double dashed double;
border-color:yellow blue red;
border-width:4 4 10 4;
padding:20px;
}
</style>
</head>
<body>
<p class="test">
일반 직접방식.
내용의 위쪽선은 노랑 점선<br>
내용의 오른쪽선은 파랑 2줄선<br>
내용의 아래쪽선은 빨강 점선, 선두께 : 10<br>
내용의 좌측선은 파랑 2줄선<br>
내용의 안쪽여백 20px<br>
</p>
<p class="test1">
몽땅방식.
내용의 위쪽선은 노랑 점선<br>
내용의 오른쪽선은 파랑 2줄선<br>
내용의 아래쪽선은 빨강 점선, 선두께 : 10<br>
내용의 좌측선은 파랑 2줄선<br>
내용의 안쪽여백 20px<br>
</p>
<table class="test1">
<tr><td>테이블도 되나?</td></tr>
<tr><td class="test1">테이블 셀도 되나?</td></tr>
</table>
iframe도 되나?
<iframe class="test1" src="060304.htm"></iframe>
<br>
<span class="test1" >span도? 깨져보이지만 되는거</span><br>
그럼 이미지도 당연히~~
<img src="../html/image/back2.gif" class="test1"><br>
<textarea class="test1">텍스트 박스도</textarea>
</body>
</html>
Posted by 말없제이
,

테두리선/여백에 대한 설정.

DevTool/CSS 2009. 6. 3. 12:44
<html>
<head>
<style>
.border1
{
border-style:dashed;
backgrund-color:yellow;
}
.border2
{
border-top-style:double;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:none;
background-color:gray;
}
.border3
{
border-style:double;
border-color:blue red green yellow;
}
.border4
{
border-style:double;
border-width:1px;
}
.border5
{
border:10px dashed blue;
}
.margin1
{
border:10px dashed blue;
margin:40px 30px 20px 10px;
}
.padding1
{
border:10px dashed blue;
padding:40px 30px 20px 10px;
}
</style>
<body>
<h1>테두리를 꾸미는 스타일 </h1>
<xmp>
.border1
{
border-style:dashed;
backgrund-color:yellow;
}
</xmp>
<p class="border1">
border-style: 테두리 형태지정<br>
none(테두리 미지정)<br>
dotted(원)<br>
dashed(점선)<br>
solid(한줄)<br>
double(두줄)<br>
groove(입체감있게표현)<br>
ridge(테두리가 볼록하게)<br>
inset(테두리 전체가 들어간 모양)<br>
outset(테두리 전체가 튀어난 모양)
</p>
<br>
<xmp>
.border2
{
border-top-style:double;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:none;
background-color:gray;
}
</xmp>
<p class="border2">
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
</p>
<xmp>
.border3
{
border-style:double;
border-color:blue red green yellow;
}
</xmp>
<p class="border3">
색상을 지정할수 있다.<br>
1개지정 : 상하좌우 같은색<br>
2개지정 : 상하,좌우 색<br>
3개지정 : 상,좌우,하 색<br>
4개지정 : 상,우,하,좌 색<br>
border-방향-color으로 사용가능.
</p>
<xmp>
.border4
{
border-style:double;
border-width:1px;
}
</xmp>
<p class="border4">
두께를 지정할수 있다.<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
border-방향-width 으로 사용가능.
</p>
<xmp>
.border5
{
border:10px dashed blue;
}
</xmp>
<p class="border5">
단축해서 지정가능<br>
border-width border-style border-color
</p>
<br><br>
<h1>여백 설정 스타일</h1>
<xmp>
.margin1
{
border:10px dashed blue;
margin:40px 30px 20px 10px;
}
</xmp>
<table border="1"><tr><td>
<p class="margin1">
바깥여백 지정<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
margin-방향 으로 사용가능.
</p>
</td></tr></table>
<xmp>
.padding1
{
border:10px dashed blue;
padding:40px 30px 20px 10px;
}
</xmp>
<table border="1"><tr><td>
<p class="padding1">
안쪽여백 지정<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
padding-방향 으로 사용가능.
</p>
</body>
</html>
Posted by 말없제이
,

목록(list... UL/OL) 셜정

DevTool/CSS 2009. 6. 3. 12:44

<html>
<head>
<style>
.disc{list-style-type:disc;}
.deci{list-style-type:deci;}
.incircle{list-style-type:circle;list-style-position:inside;}
</style>
<body>
<h1>목록 속성 설정 </h1>
list-style-type에 넣을수 있는것<br>
none(지정하지않음)<br>
disc(검은원)<br>
circle(원형)<br>
square(사각형)<br>
upper-alpha(대문자 알파벳)<br>
lower-alpha(소문자 알파벳)<br>
decimal(1부터 시작하는 수)<br>
upper-roman(대문자 로마자)<br>
lower-roman(소문자 로마자)<br>

.disc{list-style-type:disc;}<br>
<ul class="disc">
<li>수박
<li>사과
<li>딸기
</ul>

.deci{list-style-type:deci;}<br>
<ol class="deci">
<li>장미
<li>튤립
<li class="incircle">민들레
</ol>

list-style-type 옵션.<br>
list-style-image:url(...) : 그림목록<br>
list-style-position : 목록의 들여/내어쓰기 inside(들여쓰기),outside(내어쓰기<br>

.incircle{list-style-type:circle;list-style-position:inside;} <br>
<ul style="list-style-image:url(../html/image/bt_cancel.gif)">
<li>하나
<li>둘
<li>셋
</ul>
</body>
</html>

Posted by 말없제이
,

배경그림에 대한 설정.

DevTool/CSS 2009. 6. 3. 12:43

<html>
<head>
<style>
.bcolor { background-color:yellow;} /* background-color: 배경색상 */
.bimage { background-image:url(../html/image/back2.gif);} /* background-image:url(../html/image/back2.gif) : 배경그림 */
.bimage2 { background-image:url(../html/image/back2.gif);background-repeat:no-repeat;} /* background-repeat : repeat그림반복, no-repeat(반복x), repeat-x(x반복), repeat-y(y반복) */
.bimage3 { background-image:url(../html/image/back2.gif);background-repeat:no-repeat;background-postition:right center;} /* background-postition : 배경그림 위치, left,cetner,right/top,center,bottom/ % */
.bimage4 { background-image:url(../html/image/back2.gif);background-attachment:fixed;} /* background-attachment: 배경그림 스크롤 scroll,fixed */
</style>
</head>
<body class="bimage4">

<h1>배경색상/배경그림 지정</h1>
background-color: 배경색상지정<br>
background-image:url(../html/image/back2.gif); : 배경그림지정<br>
보통 <body>내에서 작성하나<br>
<br>
<xmp>
.bimage { background-image:url(../html/image/back2.gif);} /* background-image:url(../html/image/back2.gif) : 배경그림 */
.bimage2 { background-image:url(../html/image/back2.gif);background-repeat:no-repeat;} /* background-repeat : repeat그림반복, no-repeat(반복x), repeat-x(x반복), repeat-y(y반복) */
.bimage3 { background-image:url(../html/image/back2.gif);background-repeat:no-repeat;background-postition:right center;} /* background-postition : 배경그림 위치, left,cetner,right/top,center,bottom/ % */
.bimage4 { background-image:url(../html/image/back2.gif);background-attachment:fixed;} /* background-attachment: 배경그림 스크롤 scroll,fixed */
<body class="bimage4">
</xmp>
<table class="bcolor" border="1" width="900"><tr><td>테이블에도 적용됨.</td></tr></table>
<table class="bimage" border="1" width="900" height="500"><tr><td>테이블에도 적용됨.</td></tr></table>
<table class="bimage2" border="1" width="900" height="500"><tr><td>background-repeat:no-repeat;</td></tr></table>
</body>
</html>

Posted by 말없제이
,

글꼴에 대한 설정.

DevTool/CSS 2009. 6. 3. 12:42

<html>
<head>
<style>
.fontAttr
{
font-family:모아12,궁서,굴림; /* 글꼴 없으면 다음차레 글꼴.*/
font-style:italic; /* 글형태 (normal,italic(이태릭),oblique(기울임) */
font-weight:900; /* 글자굵기 100-900,normal(400),blod(700) */
font-size:50; /* 글자 크기 */
color:blue; /* 글자 색상 */
}
.space{ letter-spacing:5em }
.space1{ word-spacing:3em }
.line { line-height:35pt }
.nwrap { white-space:nowrap; }
.talign { text-align:justify;font-size:20; } /* text-align : 좌우정렬 : left,center,right,justify(좌우정렬) */
.taligna { text-align:left;font-size:20; }
.valign { vertical-align:bottom;font-size:20; } /* vertical-align : 세로방향정렬 : top,middle(기본값),bottom */
.f50 { font-size:50; }
.baseline { vertical-align:baseline;font-size:10; } /* vertical-align -- 계속 -- baseline(부모 베이스라인정렬) */
.vtextbottom { vertical-align:text-bottom;font-size:10; } /* vertical-align -- 계속 -- text-top/text-bottom(부모요소의 폰트 아래정렬) */
.vunit { vertical-align:5em;font-size:10; }/* vertical-align -- 계속 -- 5em(다섯배만큼 위쪽으로) */
.tdeco { text-decoration:underline overline; font-size:40 } /* text-decoration : underline(밑줄),overline(텍스트위),line-throuth(가운데선),none */
.bcolor { background-color:yellow;} /* background-color: 배경색상 */
</style>
</head>
<body>
<h1>글꼴에 대한 설정</h1>
<xmp>
<head>
<style>
.fontAttr
{
font-family:모아12,궁서,굴림; /* 글꼴 없으면 다음차레 글꼴.*/
font-style:italic; /* 글형태 (normal,italic(이태릭),oblique(기울임) */
font-weight:900; /* 글자굵기 100-900,normal(400),blod(700) */
font-size:50; /* 글자 크기 */
color:blue; /* 글자 색상 */
}
</style>
</head>
</xmp>
<p class="fontAttr">
글자임
</p>
<br>
<h1>문장과 문단을 제어</h1>
<xmp>
.space{ letter-spacing:5em }
.space1{ word-spacing:3em }
.line { line-height:35pt }
</xmp>
<p class="space">letter-spacing : 글자와 글자 사이의 간격을 조정</p>
<p class="space1">word-spacing : 단어사이의 간격을 조정</p>
<p class="line">line-height : 문단 줄간격..
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</p>

<table border="1" width="300" bordercolor="blue">
<tr>
<td>
이 문장은 white-space:normal을 테스트 하기 위한 문장입니다.
</td>
</tr>
</table>
<br>
.nwrap { white-space:nowrap; }
<br>
<table border="1" width="300" bordercolor="blue">
<tr>
<td class="nwrap">
이 문장은 white-space:nowrap을 테스트 하기 위한 문장입니다.
</td>
</tr>
</table>
<br><br>
기본모양.<br>
<table border="1" width="800" height="200">
<tr>
<td class="taligna">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
text-align:justify;지정.<br>
<table border="1" width="800" height="200">
<tr>
<td class="talign">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
vertical-align:bottom;지정.<br>
<table border="1" width="800" height="200">
<tr>
<td class="valign">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
<div class="f50">기본글자
<span class="baseline">vertical-align:baseline; 베이스라인</span>
<span class="vtextbottom">vertical-align:text-bottom; 텍스트</span>
<span class="vunit">vertical-align:5em; 5em설정(다섯배만큼 위쪽으로 올라가서)</span>
</div>
<br><br>
<span class="tdeco">text-decoration:underline overline;글자에 장식</span>
<br>
</table>
</body>
</html>

Posted by 말없제이
,

티스토리툴바