CSS 기초이론 - 배경 제어하기 (background-attachment)
HTML, CSS 2021. 1. 14. 22:12반응형
www.youtube.com/watch?v=IcUnO-4cJag&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap"
rel="stylesheet"
/>
<title>background-attachment</title>
<style>
body {
background-color: #07121a;
}
div {
width: 2000px;
height: 1244px;
background-image: url('./images/lol_bg.png');
background-size: 80%;
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
}
div h3,
p {
font-family: 'Noto Sans KR', sans-serif;
font-size: 40px;
font-weight: 800;
color: #ffffff;
}
div p {
font-size: 14px;
font-weight: normal;
}
.section1 {
width: 400px;
padding-top: 230px;
padding-left: 137px;
line-height: 1em;
}
.section2 {
width: 400px;
padding-top: 460px;
padding-left: 137px;
line-height: 1em;
}
</style>
</head>
<body>
<div>
<section class="section1">
<h3>기지파괴하기</h3>
<p>
넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이
게임에서 승리합니다.
</p>
</section>
<section class="section2">
<h3>공격로 장악하기</h3>
<p>
적팀 넥서스에 도달하려면 최소 1개의 공격로를 장악해야 합니다.
공격로에는 포탑과 억제기라는 방어용 구조물이 있습니다. 각 공격로에는
3개의 포탑과 1개의 억제기가 있으며, 넥서스는 2개의 포탑이 지키고
있습니다.
</p>
</section>
</div>
<div></div>
</body>
</html>
반응형
'HTML, CSS' 카테고리의 다른 글
| css 기초이론 - 박스모델 Box-Model(border, margin, padding) (0) | 2021.01.14 |
|---|---|
| css기초이론 - 레이아웃 스타일(block/inline element) (0) | 2021.01.14 |
| css 기초이론 - 배경 제어하기 (background-position) (0) | 2021.01.14 |
| css기초이론 - 배경제어하기 (background-size) (0) | 2021.01.14 |
| CSS 배경 색상 및 이미지 제어 (0) | 2021.01.14 |