1. 파일에 직접 명시한 경우
>>>>> /html/css/css01.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> /html/css/css01.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>
<style type="text/css">
BODY{
font-size: 30px;
font-family: "Comic Sans MS";
color: #000000;
}
</style>
</head>
<body>
Client Script List <br/><br/>
HTML: 데이터 <br />
CSS : HTML 데이터의 출력<br/>
Javascript DOM: 이벤트 처리<br/>
Ajax: 서버와의 통신<br/>
</body>
</html>
2. 혼동하기 쉬운 CSS 속성
- margin: 외부 여백
- padding: 내부 여백
예 1: margin: 5px 4px 3px 2px
5px -> 위 에서 부터 5px 만큼의 여백
4px -> 좌 에서 부터 4px 만큼의 여백
3px -> 아래에서 부터 3px 만큼의 여백
2px -> 아래 에서 부터 2px 만큼의 여백
예 2: margin: 10px 15px
10px -> 상, 하 여백값
15px -> 좌, 우 여백값
예 3: margin: 30px
30px -> 상, 하, 좌, 우 여백값
2) border-collapse:collapse; /* cell 경계선을 합쳐서 출력 */
2. 공통 CSS File의 사용
1) 공통 Stylesheet
>>>>> /html/css/style.css
/* 모든 태그에 공통으로 적용되는 속성, 별다른 선언 필요 없슴 */
BODY {
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림;
TEXT-ALIGN: center;
}
TH {
BORDER:#D3D3D3 solid 1px;
FONT-SIZE: 9pt;
COLOR: BLACK;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #B9DCFF;
}
TD {
BORDER:#D3D3D3 solid 1px;
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN:left;
BACKGROUND-COLOR: #DDEEFF;
}
SELECT {
FONT-SIZE: 10pt;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림;
}
DIV {
FONT-SIZE: 10pt;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림;
TEXT-ALIGN: center;
}
FORM {
FONT-SIZE: 10pt;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림
}
TEXTAREA {
BORDER-RIGHT: 1px solid black;
BORDER-TOP: 1px solid #999999;
FONT-SIZE: 10pt;
BORDER-LEFT: 1px solid #999999;
COLOR: BLACK;
BORDER-BOTTOM: 1px solid black;
FONT-FAMILY: 굴림;
BACKGROUND-COLOR: white;
}
INPUT {
BORDER-RIGHT: 1px solid black;
BORDER-TOP: 1px solid #999999;
FONT-SIZE: 10pt;
BORDER-LEFT: 1px solid #999999;
COLOR: BLACK;
BORDER-BOTTOM: 1px solid black;
FONT-FAMILY: 굴림; HEIGHT: 22px;
BACKGROUND-COLOR: white;
}
A:link {text-decoration:none;color:black}
A:hover{text-decoration:none;color:black}
A:visited {text-decoration:none;color:black}
/*.: class속성으로 접근, class="Box_outset" */
.Box_outset{
border: 5px;
color: #000000;
border-color: #FF6600;
border-style: outset;
}
.Box_groove{
border: 5px;
color: #000000;
border-color: #FF6600;
border-style: groove;
}
.Box_ridge{
border: 5px;
color: #000000;
border-color: #FF6600;
border-style: ridge;
}
.Box_double{
border: 1px;
color: #000000;
border-color: #339900;
border-style: double;
}
.Box_inset{
border: 5px;
color: #000000;
border-color: #FF6600;
border-style: inset;
}
.Dotline{
border-right: 1px #C9D9EB dotted;
}
.Bodybox {
border: 3px #C9D9EB solid;
}
.table {
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #DDEEFF;
vertical-align: middle;
width: 80%;
MARGIN: 0 auto;
padding: 5px 5px 5px 5px;
tmp:expression(this.cellSpacing=1);
}
/* cell 경계선을 합쳐서 출력 <table class="table_2"> */
.table_2 {
border-collapse:collapse; /* cell 경계선을 합쳐서 출력 */
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #DDEEFF;
vertical-align: middle;
width: 80%;
MARGIN: 0 auto;
padding: 5px 5px 5px 5px;
tmp:expression(this.cellSpacing=1);
}
.td_left {
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #FFFFFF;
}
/* 테이블의 내용을 가운데 정렬 */
.td_center {
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #FFFFFF;
}
.td_index {
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #FFFFFF;
}
.td_content {
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #FFFFFF;
vertical-align: top;
height: 100%;
}
.td_center {
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #FFFFFF;
vertical-align: middle;
height: 100%;
}
.tr_focus {
FONT-SIZE: 12px;
COLOR: black;
LINE-HEIGHT: 160%;
FONT-FAMILY: 새굴림;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #B9DCFF;
}
/* 제목
<div class="title_1"></div> */
.title_1{
/* 가운데로 띄우기: float:center; */
PADDING:10px 10px 5px 10px; /*위, 왼쪽, 아래, 오른쪽*/
FONT-SIZE: 20px;
COLOR: black;
ALIGN: center;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #FFFFFF;
MARGIN: 0 auto; /* 가운데 정렬 */
font-family: 휴먼편지체;
text-decoration: underline;
text-shadow: blue;
}
/* 각페이지 하단 버튼 콘트롤
<div class="bottom_1"></div> */
.bottom_1{
/* 가운데로 띄우기: float:center; */
PADDING:5px 5px 5px 5px; /*위, 왼쪽, 아래, 오른쪽*/
FONT-SIZE: 12px;
BACKGROUND-COLOR: #FFFFFF;
COLOR: blank;
ALIGN: center;
TEXT-ALIGN: center;
MARGIN: 0 auto;
}
.div_left {
FONT-SIZE: 12px;
COLOR: #000000;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림;
text-align: left;
background-color: #D0D0FD;
ALIGN: center;
MARGIN: 0 auto;
width: 80%;
}
.div_center {
FONT-SIZE: 12px;
COLOR: #000000;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림;
text-align: center;
background-color: #D0D0FD;
ALIGN: center;
MARGIN: 0 auto;
PADDING:20px 10px 20px 10px; /*위, 왼쪽, 아래, 오른쪽*/
width: 80%;
}
/* 테이블 상단 문장 출력 관련 */
.div_table {
FONT-SIZE: 12px;
COLOR: #000000;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림;
background-color: #FFFFFF;
text-align: left;
margin-left: 10%;
width: 90%;
}
/* 각종 메시지 출력 */
.div_msg {
PADDING:20px 10px 20px 10px; /*위, 왼쪽, 아래, 오른쪽*/
FONT-SIZE: 12px;
COLOR: #000000;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림;
background-color: #DDEEFF;
text-align: center;
margin-top: 100px;
margin-left: 10%;
width: 80%;
height: 200px;
}
/*.: id속성으로 접근, 하나의 태그에 고유하게 적용, id="Box_outset"*/
#DIV_content {
FONT-SIZE: 10pt;
COLOR:#FFFFFF;
LINE-HEIGHT: 160%;
FONT-FAMILY: 굴림;
text-align:center;
background:#00CC00
}
#fildset{
border: 1px solid #ccc;
padding: 0 20px;
}
#legend{
font-family: area, sans-serif;
font-weight:bold;
font-size: 9pt;
color: #666;
background: #eee;
border:1px solid #ccc;
order-bottom-color: #999;
border-right-color:#999;
padding: 2px 2px;
}
#tableCss {width:620px; font-size:12px; line-height:20px;}
#tableCss table {width:100%; border-collapse:collapse; font-size:12px; line-height:20px;}
#tableCss th {padding:10px; border:#D3D3D3 solid 1px; text-align:center; background:#F4F4FF;}
#tableCss td {padding:10px; border:#D3D3D3 solid 1px; text-align:left;}
#tableCss tfoot td {padding:10px; border:#D3D3D3 solid 1px; text-align:center;}
/*
Struts2 Sitemesh CSS
<div class="panelTitle"></div>
<div id="pageTitle"></div>
*/
.panelTitle {
background-color: #006600;
color:#eeeeee;
font-weight: bold;
font-size: 12pt;
border-color: #3366ff #000033 #000033 #3366ff;
border-width: 1;
border-style: solid;
padding: 1;
}
.panelBody {
background-color: #eeeeee;
border-color: black;
border-width: 0 1 1 1;
border-style: solid;
padding: 2;
}
#pageTitle {
background-color: #006600;
color:#eeeeee;
font-weight: bold;
font-size: 12pt;
border-color: #3366ff #000033 #000033 #3366ff;
border-width: 1;
border-style: solid;
padding: 1;
text-align: center;
}
#header {
background-color:#FFFFFF;
font-size: xx-small;
text-align: left;
color: white;
border-color: #666666 #cccccc #cccccc #666666;
border-width: 1 1 1 1;
border-style: solid;
padding: 1;
}
#footer {
background-color:#ffffff;
font-size: 12pt;
font-color: #660000;
text-align: center;
color: black;
border-color: #666666 #cccccc #cccccc #666666;
border-width: 1 0 0 0;
border-style: solid;
padding: 1;
}
2) 테스트 파일
>>>>> /html/css/style.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Stylesheet Test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>프로젝트시 스타일 적용 참고 </p>
<table class="Box_double" width="800">
<tr>
<td width="199">TABLE</td>
<td width="585">
<table class="Box_outset" width="504">
<tr>
<th width="157">로그인 아이디 </th>
<td width="249"> </td>
<td width="76" rowspan="2"><input type="submit" name="Submit" value="Submit" /></td>
</tr>
<tr>
<th>비밀번호</th>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td>TEXTAREA</td>
<td><textarea class="Box_groove" name="textarea">내용 입력 테스트</textarea></td>
</tr>
<tr>
<td>INPUT</td>
<td><input type="text" name="textfield" value="문자 입력"/></td>
</tr>
<tr>
<td>A</td>
<td><a href="http://192.168.0.231:8081/movie">프로젝트 메인 페이지로 가기</a></td>
</tr>
<tr>
<td>SUBMIT</td>
<td><input type="submit" name="Submit2" value="Submit"/></td>
</tr>
<tr>
<td>box 스타일의 적용(대소문자 적용)</td>
<td><input class="box" type="submit" name="Submit4" value="Submit" /></td>
</tr>
<tr>
<td>Box 스타일의 적용</td>
<td><input class="Box" type="submit" name="Submit3" value="Submit" /></td>
</tr>
<tr>
<td>일반 라인 </td>
<td><hr/></td>
</tr>
<tr>
<td>Dotline 스타일의 적용</td>
<td><hr class="Dotline"/></td>
</tr>
<tr>
<td>SELECT</td>
<td>
<select name="searchColumn" size=1 > <!--검색 컬럼-->
<option value="name" selected> 이 름</option>
<option value="subject"> 제 목</option>
<option value="content"> 내 용</option>
<option value="subject_content"> 제목, 내 용</option>
</select>
</td>
</tr>
<tr>
<td>DIV</td>
<td><DIV> DIV 태그안에 있는 문자열 입니다.</DIV></td>
</tr>
<tr>
<td>DIV 변형 </td>
<td><DIV id="DIV_content">DIV_content 적용<br />
DIV_content 적용</DIV></td>
</tr>
<tr>
<td>fieldset</td>
<td><fieldset id="fildset">
<legend>태그 그룹화</legend>
간편한 Input 태그 그룹화 <br />
간편한 Input 태그 그룹화
</fieldset></td>
</tr>
<tr>
<td>fieldset legend </td>
<td><fieldset id="fildset">
<legend id="legend">태그 그룹화</legend>
간편한 Input 태그 그룹화 <br />
간편한 Input 태그 그룹화
</fieldset></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
<div id="tableCss">
<table>
<caption>표설명. 제목등.. 표현</caption>
<colgroup>
<col style="width:25%;" />
<col style="width:80%;" />
</colgroup>
<thead>
<tr>
<th>제목</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<th>제목1</th>
<td>내용1</td>
</tr>
<tr>
<th>제목2</th>
<td>내용2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">꼬리말... 부가설명</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
RECENT COMMENT