CSS Background image:url, repeat, position
exam.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>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="아이유" />
<style type="text/css">
#txt1, #btn1 {
background-color:black;
color:white;
font-weight:bold;
}
#search {
/*background-image:url(images/sp_fms.gif);*/
/*background-repeat:no-repeat;*/
/*가로는 가운데 세로는 현재위치(0)*/
/*background-position:center -18px;*/
/*background-position:center -40px;*/
/*background-position:center -60px;*/
/*이미지를 하나씩 보관 하는것 보다 통체로 여러 이미지를 섞어 놓고 좌표를 조절하는것이 속도도 빠르고 관리도 좋다.
브라우저에서 통째 이미지를 받아오고 다시 서버에 거치는 작업이 없기 때문에 더빠르다
*/
/* 속성 그룹화 */
background:url(images/sp_fms.gif) no-repeat center -60px orange;
}
</style>
</head>
<body>
<!-- Ex14_background.htm -->
<form>
<input type="text" id="txt1" />
<input type="button" value="검색" id="btn1" />
<br /><br />
<input type="text" id="search" size="50" />
</form>
</body>
</html>
결과
CSS background repeat, attachment
exam.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>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="아이유" />
<style type="text/css">
body {
background-image:url(images/love.png);
background-repeat:no-repeat;
/*background-position:right bottom;*/
/* css는 단위가 항상 붙어서 표현해줘야 한다.*/
background-position:100px 300px;
/*background-position:-5% -6%;*/
background-attachment:fixed;
}
</style>
</head>
<body>
<!-- Ex13_background.htm -->
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
<div>텍스트</div>
</body>
</html>
결과
이미지가 고정되어 있는것을 확인할수 있다.
CSS background:color
exam.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>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="아이유" />
<style type="text/css">
/*
HTML과 CSS 속성이 만나면 CSS 서식이 최강이다.
현재 HTML에서는 여백 서식 모든것을 CSS로 작성하며
웹표준에 어긋난다.
*/
body {
background-color:orange;
background-image:url(images/han.jpg);
}
div {
background-color:yellow;
background-image:url(images/adore.png);
}
p {
background-color:red;
}
span {
background-color:green;
}
</style>
</head>
<body bgcolor="red">
<!-- Ex12_background.htm -->
<div>div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.div태그입니다.</div>
<p>태그<span>span입니다.</span>입니다.</p>
</body>
</html>
결과
