CSS 배경 색상 및 이미지 제어
HTML, CSS 2021. 1. 14. 20:53반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: crimson;
/* background-color: #004400; */
/* background-color: rgb(0, 0, 255); */
/* background-color: rgba(255, 0, 0, 0.3); */
color: #ffffff;
}
.image {
background-image: url('./images/heatstone.jpg');
background-size: 100%;
background-repeat: no-repeat;
height: 200px;
width: 400px;
float: left;
margin-right: 10px;
}
.container {
padding: 10px;
}
h1 {
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>하스스톤</h1>
<div class="image"></div>
<p>
블리자드 엔터테인먼트가 워크래프트 시리즈를 기반으로 2014년에 출시한
수집용 카드 게임(CCG)이다. 게임의 이름인 '하스스톤(Hearthstone)'은
MMORPG 월드 오브 워크래프트의 기본 아이템인 '귀환석'을 뜻한다.[3] 이
귀환석을 사용하면 시간과 장소를 불문하고 자신이 지정한 여관으로 돌아갈
수 있는데, 이렇게 언제든 돌아올 수 있고 마치 진짜 여관 안에 있는 것처럼
따뜻하고 안락한 느낌을 주는 게임을 만들어보자는 의미로 이름을 그렇게
지었다고 한다. 그 때문인지 게임의 배경도 '아제로스에 있지만 어떻게
들어왔는지 알 수 없는 여관' 으로 설정되어 있다. 한국에서는
하스'스톤'이라는 이유로 '돌겜'이라는 별명으로 불린다. 참고로 이 게임의
마스코트라 할 수 있는 여관주인의 이름이 하스 스톤브류인데 이것을 줄이면
하스스톤이 되기도 한다. 공식 홈페이지에 여관주인(Innkeeper)의 이름은
하스 스톤브류(Harth Stonebrew)라고 나온다. 원래 게임 이름이 '하스스톤:
워크래프트의 영웅들'인만큼 워크래프트 시리즈 세계관에 충실한 카드 및
모험 모드가 나왔지만, 점점 워크래프트 세계관에서 벗어나 하스스톤만의
세계관을 구축하고 있다. 그리고 2016년 11월 30일에 진행된 7.0.0 패치 때
게임 이름이 '하스스톤: 워크래프트의 영웅들'에서 부제인 워크래프트의
영웅들을 제외한 '하스스톤'으로 변경되었다. 하스스톤의 독자적인 오리지널
스토리를 더 많이 만들어 가기 위해서라고 한다. 워크래프트 시리즈의
인지도가 낮은 일본에서는 출시 초기부터 부제 없이 '하스스톤'이라는
제목으로 출시되었다. 현재 북미, 유럽, 아시아, 중국 서버가 있다. 이 중
아시아 서버는 사실상 한국+대만+홍콩+마카오+일본(2015년 10월 출시)
서버라고 보면 된다. Battle.net 내에서 다른 서버를 선택해 접속하는 것도
가능하다. 다만 중국 서버는 중국 검열 정책상 타 서버와 완전히 분리된
서버로 운영되기 때문에 중국 계정으로만 접속 가능하다. 만약 다른 서버에
처음 접속한다면 다시 튜토리얼부터 진행하게 된다.
</p>
</div>
</body>
</html>
참고
www.youtube.com/watch?v=0dx9ZH_xkik&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: dodgerblue;
}
.container {
background-color: #ffffff;
margin: 20px;
padding: 10px;
width: 800px;
border: 10px dashed green;
/* 기본 */
/* background-clip: border-box; */
background-clip: padding-box;
/* background-clip: content-box; */
}
</style>
</head>
<body>
<div class="container">
<h1>하스스톤</h1>
<div class="image"></div>
<p>
블리자드 엔터테인먼트가 워크래프트 시리즈를 기반으로 2014년에 출시한
수집용 카드 게임(CCG)이다. 게임의 이름인 '하스스톤(Hearthstone)'은
MMORPG 월드 오브 워크래프트의 기본 아이템인 '귀환석'을 뜻한다.[3] 이
귀환석을 사용하면 시간과 장소를 불문하고 자신이 지정한 여관으로 돌아갈
수 있는데, 이렇게 언제든 돌아올 수 있고 마치 진짜 여관 안에 있는 것처럼
따뜻하고 안락한 느낌을 주는 게임을 만들어보자는 의미로 이름을 그렇게
지었다고 한다. 그 때문인지 게임의 배경도 '아제로스에 있지만 어떻게
들어왔는지 알 수 없는 여관' 으로 설정되어 있다. 한국에서는
하스'스톤'이라는 이유로 '돌겜'이라는 별명으로 불린다. 참고로 이 게임의
마스코트라 할 수 있는 여관주인의 이름이 하스 스톤브류인데 이것을 줄이면
하스스톤이 되기도 한다. 공식 홈페이지에 여관주인(Innkeeper)의 이름은
하스 스톤브류(Harth Stonebrew)라고 나온다. 원래 게임 이름이 '하스스톤:
워크래프트의 영웅들'인만큼 워크래프트 시리즈 세계관에 충실한 카드 및
모험 모드가 나왔지만, 점점 워크래프트 세계관에서 벗어나 하스스톤만의
세계관을 구축하고 있다. 그리고 2016년 11월 30일에 진행된 7.0.0 패치 때
게임 이름이 '하스스톤: 워크래프트의 영웅들'에서 부제인 워크래프트의
영웅들을 제외한 '하스스톤'으로 변경되었다. 하스스톤의 독자적인 오리지널
스토리를 더 많이 만들어 가기 위해서라고 한다. 워크래프트 시리즈의
인지도가 낮은 일본에서는 출시 초기부터 부제 없이 '하스스톤'이라는
제목으로 출시되었다. 현재 북미, 유럽, 아시아, 중국 서버가 있다. 이 중
아시아 서버는 사실상 한국+대만+홍콩+마카오+일본(2015년 10월 출시)
서버라고 보면 된다. Battle.net 내에서 다른 서버를 선택해 접속하는 것도
가능하다. 다만 중국 서버는 중국 검열 정책상 타 서버와 완전히 분리된
서버로 운영되기 때문에 중국 계정으로만 접속 가능하다. 만약 다른 서버에
처음 접속한다면 다시 튜토리얼부터 진행하게 된다.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-image: url('./images/background-image.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
반응형
'HTML, CSS' 카테고리의 다른 글
| css 기초이론 - 배경 제어하기 (background-position) (0) | 2021.01.14 |
|---|---|
| css기초이론 - 배경제어하기 (background-size) (0) | 2021.01.14 |
| 방콕코딩 CSS필수 (0) | 2021.01.13 |
| 링크 태그로 외부 css파일 링크하기 (파비콘, 폰트어썸) (0) | 2021.01.13 |
| figure 태그로 만드는 css목록 스타일 (0) | 2021.01.13 |