CSS 선언 및 사용, 공통 통합 Stylesheet(JSP, MVC, Struts2, Spring)

1. 파일에 직접 명시한 경우

>>>>> /html/css/css01.html

<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>

</body>
</html>

'프로그래밍 > etc' 카테고리의 다른 글

리눅스 파일 권한 명령 모음 (0)	2011.05.12
리눅스 명령어 chown (0)	2011.05.12
모바일페이지 이동 스크립트 소스 (0)	2010.07.14
무료 템플릿 사이트 (0)	2010.02.21
API list (0)	2010.02.08

by antilla 2010. 2. 8. 22:24

antilla blog

글