6. 배경 다루기
페이지 정보
작성자 관리자 댓글 0건 조회 1,210회 작성일 22-01-06 20:36본문
6. 배경 다루기
실습 : bg.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>배경 다루기</title>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<table>
<caption>테이블의 제목</caption>
<tr>
<th>1행</th>
<td>1칸(열, 셀)</td>
<td>2칸(열, 셀)</td>
</tr>
<tr>
<th>2행</th>
<td>3</td>
<td></td>
</tr>
</table><br/><br/>
</body>
</html>
스타일을 추가한다.
실습 : bg.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>배경 다루기</title>
<style>
body{
background-color:rgb(0,255,255);
}
</style>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<table>
<caption>테이블의 제목</caption>
<tr>
<th>1행</th>
<td>1칸(열, 셀)</td>
<td>2칸(열, 셀)</td>
</tr>
<tr>
<th>2행</th>
<td>3</td>
<td></td>
</tr>
</table><br/><br/>
</body>
</html>
rgb(0,255,255) : red, green, blue 색을 0에서 255 값으로 입력한다.
스타일을 수정한다.
<style>
th{
border:1px solid red;
}
</style>
스타일을 다음과 같이 수정한다.
<style>
th{
color: white;
border:1px solid red;
background-color:rgb(0,100,200);
width:100px;
height:30px;
}
</style>
스타일을 다음과 같이 수정한다.
<style>
th{
color: white;
border:1px solid red;
background-color:rgb(0,100,200);
width:100px;
height:30px;
}
table {
border:1px solid black;
}
</style>
스타일을 다음과 같이 수정한다.
<style>
th{
color: white;
border:1px solid red;
background-color:rgb(0,100,200);
width:100px;
height:30px;
}
table {
border:1px solid black;
}
td{
border:1px solid black;
}
</style>
스타일을 다음과 같이 수정한다.
<style>
th{
color: white;
border:1px solid red;
background-color:rgb(0,100,200);
width:100px;
height:30px;
}
table {
width:500px;
border:1px solid black;
background-color:rgb(0,100,200);
color: white;
}
td{
border:1px solid black;
color: white;
text-align:center;
}
</style>
스타일을 다음과 같이 수정한다.
<style>
th{
color: white;
border:1px solid red;
background-color:rgb(0,100,200);
width:100px;
height:30px;
}
table {
width:500px;
border:1px solid black;
background-color:rgb(0,100,200);
color: white;
border-spacing:20px 30px;
}
td{
border:1px solid black;
color: white;
text-align:center;
}
</style>
스타일을 수정한다.
<style>
body{
background-image:url(https://www.kunsan.ac.kr/images/001kunsan/new_main/common/logo.png);
;){kind=link}
}
table {
width:500px;
border:1px solid black;
}
td{
border:1px solid black;
text-align:center;
}
</style>
스타일을 수정한다.
<style>
body{
background-image:url(https://www.kunsan.ac.kr/images/001kunsan/new_main/common/logo.png);
background-repeat:no-repeat;
background-position:center center;
}
table {
width:500px;
border:1px solid black;
}
td{
border:1px solid black;
text-align:center;
}
</style>
스타일을 수정한다.
<style>
body{
background-image:url(https://www.kunsan.ac.kr/images/001kunsan/new_main/common/logo.png);
background-repeat:no-repeat;
background-position:center center;
}
table {
caption-side:top;
border-collapse:separate;
width:500px;
height:500px;
border:1px solid black;
border-spacing:20px 30px;
empty-cells:show;
/* empty-cells:hide; 감추기*/
}
td{
border:1px solid black;
color:black;
text-align:center;
vertical-align:baseline;
}
th{
border:1px solid black;
}
</style>
스타일을 수정한다.
<style>
table {
caption-side:bottom; /* 캡션의 위치를 정한다.*/
border-collapse:collapse; /* 테이블 칸의 여백없이 선으로 보이게 한다.*/
width:500px;
height:100px;
border:1px solid black;
}
td{
border:1px solid black;
color:black;
text-align:center;
}
th{
border:1px solid black;
}
</style>
댓글목록
등록된 댓글이 없습니다.