배경 사진 넣기
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-image: url(hdm02.jpg);
background-position: top;
background-repeat: repeat;}
.back {font-size: 20px; font-weight: bold;
background-color: gray;}
</style>
</head>
<body>
<div class="back"> background </div>
</body>
</html>HTML 구현
----------
구획 지정
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box1 {height: 100px;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
border-width: 2px;
border-color: blue;
border-style: dashed}
.box2 {height: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
border-top-width: 5px;
border-bottom-width: 5px;
border-top-color: green;
border-bottom-color: red;
border-top-style: dotted;
border-bottom-style: double;}
</style>
</head>
<body>
<div class="box1"> box1 </div>
<div class="box2"> box2 </div>
</body>
</html>HTML
box1
box2
-------------
색상 넣기
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box1 {height: 100px;
border: 2px solid; padding: 20px;
border-radius: 40px 0;
box-shadow: 10px 10px 10px rgba(0, 0, 255, 1);}
.box2 {height: 100px;
border: 2px solid; padding: 20px;
border-radius: 10px 20px 30px 40px;
box-shadow: 10px 20px 30px red inset;}
</style>
</head>
<body>
<div class="box1"> box1 </div><br>
<div class="box2"> box2 </div>
</body>
</html>HTML
이걸 구현하면 위의 코드가 영향을 받아 따로 실현 상태를 올리진 않음.
'웹정보구축' 카테고리의 다른 글
| html로 만든 음악 재생 목록 (0) | 2022.06.04 |
|---|---|
| HTML 함수 구현 (0) | 2022.05.30 |
| CSS 선택자 실습 (220519-css) (0) | 2022.05.19 |
| 이클립스로 HTML에 영상 및 오디오 소스 삽입하기 (0) | 2022.05.12 |
| 시멘틱 웹 측면서 홈페이지 분석하기 (0) | 2022.05.10 |
