1. css 사용 목적
○ HTML의제약성에서탈피한다.
○ 홈페이지전체에통일감과일관성을유지한다.
○ 홈페이지제작시간을감소시키고문서의용량을줄여준다.
○ 기존홈페이지의개념을넘는DHTML, XML의기초가된다.
2.CSS –삽입법3가지
① 태그내부삽입형(In-line style)
<태그Style="속성:값; 속성:값; ">
② 문서내지정형(Embedding style)
<Styel type="text/css">
<!--
스타일내용
//-->
</Style>
③ 외부문서삽입형(link style)
<link rel=stylesheet href="스타일외부파일전체경로" type="text/css">
3. 자주 사용 하는 스타일
① 글꼴 관련 스타일
속성 |
설명 |
값 |
color |
글자색 |
red, #ffffff |
font-size |
글자크기 |
small, medium, large, smaller, 20px, 20pt, 20% |
font-family |
글자체 |
굴림, 돋움 |
font-weight |
글자굵기 |
100, normal, bold |
font-style |
글꼴모양 |
nromal, oblique, italic |
text-decoration |
글꼴장식 |
none, underline, overline, line-through |
② 문단 관련 스타일
속성 | 설명 | 값 |
text-align | 수평 정렬 | left, center, right, justify |
vertical-align | 수직 정렬 | top, middle, bottom |
③ 배경 관련 스타일
속성 | 설명 | 값 |
background-color | 배경색 | red, #ffffff |
background-image | 배경 이미지 지정 | ur;l(파일명) |
background-repeat | 배경 이미지 정렬 | repeat, repeat-x, repeat-y, no-repeat |
background-position | 배경 이미지 위치 | 80%, left, center, top, bottom |
④ 테두리 관련 스타일
속성 | 설명 | 값 |
border | 테두리 지정 | {border : ①테두리두께 ②테두리스타일 ③테두리색} |
border-width | 테두리 두께 | 2, thin, medium, thick |
border-style | 테두리 형태 | none, dotted, dashed, solid, double |
border-color | 테두리 색 | red, #ffffff |
border-collapse | 표현 방법 | separate, collapse |
width | 넓이 | 100, 80% |
height | 높이 | 200, 60% |
padding | 내부여백 | 2, 10 |
margin | 외부여백 | 2, 10 |
background-color | 배경색 | red, #ffffff |
background-image | 배경그림 | url(경로) |
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="300"><font color="blue" size="2">
특히 블루투스(Bluetooth)를 탑재한 헤드셋이 눈에 띈다.
블루투스란 가까운 거리에 있는 데스크톱 PC나 노트북, 휴대폰, 가전기기 등을 연결해 주는 일종의 무선 통신 규격으로
사용 분야가 점차 넓어지는 추세다.
</font></td>
<td width="300"><font color="blue" size="2">
특히 블루투스(Bluetooth)를 탑재한 헤드셋이 눈에 띈다.
블루투스란 가까운 거리에 있는 데스크톱 PC나 노트북, 휴대폰, 가전기기 등을 연결해 주는 일종의 무선 통신 규격으로
사용 분야가 점차 넓어지는 추세다.
</font></td>
</tr>
</table>
결과
<table border="1" cellpadding="0" cellspacing="0" style="font-size: 10pt; color: red;">
<tr>
<td width="300">
특히 블루투스(Bluetooth)를 탑재한 헤드셋이 눈에 띈다.
블루투스란 가까운 거리에 있는 데스크톱 PC나 노트북, 휴대폰, 가전기기 등을 연결해 주는 일종의 무선 통신 규격으로
사용 분야가 점차 넓어지는 추세다.
</td>
<td width="300">
특히 블루투스(Bluetooth)를 탑재한 헤드셋이 눈에 띈다.
블루투스란 가까운 거리에 있는 데스크톱 PC나 노트북, 휴대폰, 가전기기 등을 연결해 주는 일종의 무선 통신 규격으로
사용 분야가 점차 넓어지는 추세다.
</td>
</tr>
</table>
<table cellpadding="3" style="font-family: 돋움; font-size: 10pt;">
<tr>
<td><b>아이디</b></td>
<td><input type="text" style="width: 100px; height: 15px;"></td>
<td></td>
</tr>
<tr>
<td><b>비밀번호</b></td>
<td><input type="password" style="width: 100px; height: 15px;"></td>
<td><img alt="" src="./image/btn_login.gif"> </td>
</tr>
<tr height="1">
<td colspan="3" bgcolor="#dad6d7"></td>
</tr>
</table>
② 문서내지정형(Embedding style)
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
input.box {
border: 1px dotted #c8c8c8;
width: 97px;
height: 19px;
}
table {
font-size: 10pt;
font-family: 돋움;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="text" class="box"
style="background: url('./image/bg_log_id.gif') no-repeat 5px 3px #ffffff;"
onfocus="this.style.backgroundImage='';" > <!-- backgroundImage를 null로 만들어라 -->
</td>
<td></td>
</tr>
<tr>
<td><input type="password" class="box"
style="background: url('./image/bg_log_pw.gif') no-repeat 5px 3px #ffffff;"
onfocus="this.style.backgroundImage='';">
</td>
<td><img alt="" src="./image/btn_login.gif"></td>
</tr>
<tr>
<td><input type="checkbox">아이디 저장</td>
<td><input type="checkbox">보안접속</td>
</tr>
</table>
</body>
</html>
▶ 아이디 클릭시
③ 외부문서삽입형(link style)
○ test6.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
특히 <a href="test5.jsp"><span class="c01">블루투스</span></a>를 탑재한 <span class="c02">헤드셋</span>이 눈에 띈다.
블루투스란 가까운 거리에 있는 데스크톱 PC나 노트북, 휴대폰, 가전기기 등을 연결해 주는 일종의 무선 통신 규격으로
사용 분야가 점차 넓어지는 추세다.
이런 <span class="c01">블루투스</span>는 <span class="c02">헤드셋</span>에도 적합해서 지저분한 유선 케이블이 필요 없고 무엇보다 가지고 다니면서 사용하기에 편리하다.
블루투스라는 이름은 10세기경 스칸디나비아 지역을 통일한 덴마크와 노르웨이의 국왕
해럴드 블루투스 (Harold "Bluetooth" Gormsson, ?~985 혹은 986)의 별명에서 나왔다.
</br>
<table border="1" cellpadding="0" cellspacing="0" style="font-size: 10pt; color: red;" width="800">
<tr>
<td width="300" style="text-align: justify;">
특히 블루투스(Bluetooth)를 탑재한 헤드셋이 눈에 띈다.
블루투스란 가까운 거리에 있는 데스크톱 PC나 노트북, 휴대폰, 가전기기 등을 연결해 주는 일종의 무선 통신 규격으로
사용 분야가 점차 넓어지는 추세다.
</td>
<td width="300" style="text-align: right;">
특히 블루투스(Bluetooth)를 탑재한 헤드셋이 눈에 띈다.
블루투스란 가까운 거리에 있는 데스크톱 PC나 노트북, 휴대폰, 가전기기 등을 연결해 주는 일종의 무선 통신 규격으로
사용 분야가 점차 넓어지는 추세다.
</td>
</tr>
</table>
</body>
</html>
@CHARSET "UTF-8";
span.c01{
color: pink;
font-size: 28pt;
font-weight: bold;
}
span.c02{
color: orange;
}
body {
font-size: 10pt;
}
td{
font-family: 궁서;
}
a {
text-decoration: none;
}
'STUDY > JSP' 카테고리의 다른 글
| Jsp 4일차 - jsp영역 안에서 html사용 (0) | 2019.02.15 |
|---|---|
| Jsp 4일차 - request & response (0) | 2019.02.14 |
| Jsp 4일차 - 이벤트 (0) | 2019.02.14 |
| Jsp 2일차 - HTML기본 (0) | 2019.02.13 |
| Jsp 1일차 - 톰캣 설치 (0) | 2019.02.11 |
댓글