Jsp 8일차 - 게시판(css작성)

1. css 작성

클래스(class) 선택자  

① .을 이용하여 정의

② 클래스는 여러개 사용할 수 있다

아이디(id) 선택자 

① #을 이용하여 정의

② 아이디는 고유성을 가지므로 한 문서에 한 번만 사용할 수 있다

① style.css

@CHARSET "UTF-8";

* {

margin:0px;

padding:0px;

}

body {

scrollbar-face-color: #FFFFFF;

scrollbar-highlight-color: #666666;

scrollbar-shadow-color: #666666;

scrollbar-3dlight-color: #FFFFFF;

scrollbar-arrow-color: #666666;

scrollbar-track-color: #ffffff;

scrollbar-darkshadow-color: #FFFFFF;

scrollbar-base-color: #FFFFFF;

font-size: 9pt;

font-family:굴림;

}

a {

cursor: hand;

color: #000000;

text-decoration: none;

font-size: 9pt;

line-height: 150%;

}

a:hover, a:active {

font-size: 9pt;

color: #F28011;

text-decoration: underline;

}

ul {

list-style: none;

}

td {font-size: 9pt;}

.btn1 {font-size: 9pt;

color:rgb(0,0,0);

background-color:rgb(245,245,245);

line-height:16px;

}

.btn2 {  

color:#000000;

font: normal 9pt '굴림','trebuchet ms',helvetica,sans-serif;

background-color:#E4E4E4;

border:1px solid;

border-color: #696 #363 #363 #696;

line-height:16px;

filter:progid:DXImageTransform.Microsoft.Gradient  

(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');

padding:1px 6px 1px 6px;

}

② created.css

@CHARSET "UTF-8";

#bbs {

width:600px;

margin:30px auto;

text-align:left;

}

#bbs_title {

width:574px;

padding-left:20px;

height:40px;

border:3px solid #D6D4A6;

text-align:left;

font-weight: bold;

line-height:40px;

font-size:10pt;

margin-bottom:30px;

}

#bbsCreated {

width:600px;

overflow: visible;

border-top:3px solid #DBDBDB;

border-bottom:3px solid #DBDBDB;

text-align:left;

}

.bbsCreated_bottomLine {

height:35px;

line-height:35px;

border-bottom:1px solid #DBDBDB;

clear:both;

text-align:left;

}

.bbsCreated_noLine {

height:35px;

line-height:35px;

clear:both;

text-align:left;

}

#bbsCreated_content {

height:170px;

line-height:170px;

border-bottom:1px solid #DBDBDB;

clear:both;

text-align:left;

}

#bbsCreated dt {

float:left;

height:35px;

width:80px;

line-height:35px;

text-align:left;

padding-left:20px;

background-color:#EEEEEE;

}

#bbsCreated dd {

float:left;

height:35px;

width:440px;

line-height:35px;

text-align:left;

padding-left:10px;

}

#bbsCreated_content dt {

float:left;

height:170px;

width:80px;

text-align:left;

padding-left:20px;

background-color:#EEEEEE;

}

#bbsCreated_content dd {

float:left;

height:170px;

width:440px;

line-height:170px;

text-align:left;

padding-left:10px;

}

#bbsCreated_footer {

width:600px;

overflow: visible;

clear:both;

height:50px;

line-height:50px;

margin-bottom:20px;

text-align:center;

}

.boxTF {

border:1px solid;

height:15px;

margin-top:7px;

padding:2px 2px 2px 2px;

border-color:#666666;

background-color:#ffffff;

font-family:"굴림";

font-size:9pt;

}

.boxTA {

border:1px solid;

height:150px;

margin-top:7px;

padding:2px 2px 2px 2px;

border-color:#666666;

background-color:#ffffff;

font-family:"굴림";

font-size:9pt;

}

③ list.css.

@CHARSET "UTF-8";

#bbsList {

width:690px;

margin:30px auto;

text-align:left;

}

#bbsList_title {

width:664px;   /* 690px - (padding-left+border:3px+border:3px) */

padding-left:20px;

height:40px;

border:3px solid #D6D4A6;

text-align:left;

font-weight: bold;

line-height:40px;

font-size:10pt;

margin-bottom:30px;

}

#bbsList_header {

height:27px;

}

#bbsList_header #leftHeader{

float:left;

width:345px;

text-align:left;

}

#bbsList_header #rightHeader{

float:right;

width:345px;

text-align:right;

}

#bbsList_header .selectField {border:1px solid; border-color:#666666; background-color:#ffffff; font-family:굴림; font-size:9pt;}

#bbsList_header .textField {border:1px solid; height:13px; padding:2px 2px 2px 2px; border-color:#666666; background-color:#ffffff; font-family:"굴림"; font-size:9pt;}

#bbsList_list {

clear:both;

}

#bbsList_list dd {

float:left;

height:27px;

line-height:27px;

text-align:center;

}

#bbsList_list #title {

height:30px;

border-top:1px solid #CCCCCC;

border-bottom:1px solid #CCCCCC;

background-color: #E6E4E6;

}

#bbsList_list #title dl {

height:27px;

border-left:0px solid #5db062;

border-right:0px solid #5db062;

}

#bbsList_list #title dt {

float:left;

line-height:34px;

text-align:center;

}

#bbsList_list .num {width:50px;}

#bbsList_list .subject {width:420px;}

#bbsList_list .name {width:90px;}

#bbsList_list .created {width:65px;}

#bbsList_list .hitCount {width:60px;}

#bbsList_list #lists {

clear:both;

}

#bbsList_list #lists dl {

float:left;

border-bottom:1px solid #E4E4E4;

}

#bbsList_list dd.subject {

width:410px;

margin-left:10px;

text-align:left;

}

#bbsList_list a {

line-height: 27px;

}

#bbsList_list #footer {

clear:both;

height:32px;

line-height:32px;

margin-top:5px;

text-align:center;

}

④ article.jsp

@CHARSET "UTF-8";

#bbs {

width:600px;

margin:30px auto;

text-align:left;

}

#bbs_title {

width:574px;

padding-left:20px;

height:40px;

border:3px solid #D6D4A6;

text-align:left;

font-weight: bold;

line-height:40px;

font-size:10pt;

margin-bottom:30px;

}

#bbsArticle {

width:600px;

overflow: visible;

border-top:3px solid #E6D4A6;

border-bottom:3px solid #E6D4A6;

text-align:left;

}

#bbsArticle_header {

height:35px;

line-height:35px;

border-bottom:2px solid #DBDBDB;

text-align:center;

}

#bbsArticle dt {

float:left;

height:35px;

width:60px;

line-height:35px;

text-align:center;

background-color:#EEEEEE;

}

#bbsArticle dd {

float:left;

height:35px;

width:230px;

line-height:35px;

text-align:left;

padding-left:10px;

}

.bbsArticle_bottomLine {

height:35px;

line-height:35px;

border-bottom:1px solid #DBDBDB;

clear:both;

text-align:left;

}

.bbsArticle_noLine {

height:35px;

line-height:35px;

clear:both;

text-align:left;

}

#bbsArticle_content {

overflow: visible;

border-bottom:1px solid #DBDBDB;

text-align:left;

}

#bbsArticle_footer {

clear:both;

height:32px;

line-height:32px;

margin-bottom:20px;

}

#bbsArticle_footer #leftFooter{

float:left;

width:300px;

text-align:left;

}

#bbsArticle_footer #rightFooter{

float:right;

width:300px;

text-align:right;

}