코딩 화면
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 배경 background 속성 -->
<style>
body{
/* CSS3부터는 배경 이미지를 2장 이상 쓸 수 있다. */
background-image: url('BackgroundFront.png'),
url('BackgroundBack.png');
/* 100%는 화면 너비만큼의 크기 */
background-size: 100% 250px;
/* 중복이 안 되게 함. */
background-repeat: no-repeat;
background-color: orange;
/* 스크롤이 될 때, 이미지를 고정시킨다. */
background-attachment: fixed;
/* 가로 0, 세로 화면 중앙에 위치시킴. */
background-position: 0px 50%;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolor quasi fugiat sed laboriosam dolorem architecto ad
consectetur error dicta quam. Impedit quis, perspiciatis
praesentium quos est hic alias dolore id?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolor quasi fugiat sed laboriosam dolorem architecto ad
consectetur error dicta quam. Impedit quis, perspiciatis
praesentium quos est hic alias dolore id?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolor quasi fugiat sed laboriosam dolorem architecto ad
consectetur error dicta quam. Impedit quis, perspiciatis
praesentium quos est hic alias dolore id?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolor quasi fugiat sed laboriosam dolorem architecto ad
consectetur error dicta quam. Impedit quis, perspiciatis
praesentium quos est hic alias dolore id?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolor quasi fugiat sed laboriosam dolorem architecto ad
consectetur error dicta quam. Impedit quis, perspiciatis
praesentium quos est hic alias dolore id?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolor quasi fugiat sed laboriosam dolorem architecto ad
consectetur error dicta quam. Impedit quis, perspiciatis
praesentium quos est hic alias dolore id?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolor quasi fugiat sed laboriosam dolorem architecto ad
consectetur error dicta quam. Impedit quis, perspiciatis
praesentium quos est hic alias dolore id?
</div>
</body>
</html>구현 화면
'국비지원과정 - 자바(JAVA)를 활용한 안드로이드 앱 개발 > HTML5 + CSS + JavaScript' 카테고리의 다른 글
| 웹(Web) 과정 - 4일차(ex11) / CSS_Attribute (0) | 2019.10.18 |
|---|---|
| 웹(Web) 과정 - 4일차(ex10) / CSS_Attribute (0) | 2019.10.18 |
| 웹(Web) 과정 - 4일차(ex08) / CSS_Attribute (0) | 2019.10.18 |
| 웹(Web) 과정 - 4일차(ex07) / CSS_Attribute (0) | 2019.10.18 |
| 웹(Web) 과정 - 4일차(ex06) / CSS_Attribute (0) | 2019.10.18 |