[JSP #5 ] 간단한 CSS 입히기.

CSS

CSS는 HTML을 꾸미기 위해 태그를 이용해서 요소들을 꾸미는 것.

CSS는 class나 id 로 스타일을 줄 수 있다.

 

아래의 코드 처럼 하나의 .css 파일을 생성해주고 css를 입히고 싶은 코드에 link 를 걸어주면 css 를 입힐 수 있다.

 

 

/*style.css
/*표준 글꼴 서식 스타일*/
h1,h2,h3,h4,h5,h6{
    font-family:verdana;
    color:navy;
}
body, td, input, select, textarea, p, th{
    font-size:13px;
    font-family:verdana;
    color:navy;
    padding:4px;
}

/*표준 링크 스타일*/
a:link{
    color:#000000; text-decoration:none;
    font-size:13px; font-family:verdana;
}
a:visited{
    color:red; text-decoration:none;
    font-size:13px; font-family:verdana;
}
a:hover{
    color:orange; text-decoration:underline;
    font-size:13px; font-family:verdana;
}

/*입력 양식 스타일 .은 class로 #은 id로*/
.box{
    border:1px solid navy;
    padding-left:8px;
}
.outline{
    border-top:4px double navy;
    border-bottom:4px double navy;
}
.m1{
background-color:#EAF0E8;
border-bottom:1px dotted #9933CC;
}
.m2{
background-color:#FFCC00;
border-bottom:1px dotted #9933CC;
}
.m3{
border-bottom:1px dotted navy;
}
 
 

 

 

입히고 싶은 .jsp 에 link 를 걸어준다.

 

<link rel="stylesheet" type="text/css" href="style.css"> 

 

 

코드에 각각에 해당하는 태그들은 전부 css 가 먹힌걸 확인할 수 있다.

 

아래 코드는 CSS 전, 후 모습이고

 

인터넷에 찾아보면 무수히 많은 css 코드로 이쁘게 꾸밀 수 있으니 이 코드는 참고용

 

으로 사용 할 것.