\

해병 코딩

[html,css] 오버 워치 영웅 이미지 웹화면 만들기/반응형 웹 만들기

웹(web)/HTML
2021. 4. 26. 13:37
728x90
반응형

위에 화면을 만드는 코드를 첨부 해봄니다 

html 파일 ,  css 파일 

반응형이고 코드에 설명도 포함 

일단 복붙 해보고 하나 하나 지우면서 

학습 해보자

 

html 화면

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Overwatch</title>
<!-- 사이즈가 줄이거나 늘리거나 전체화면 조절하는 것 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css 브라우저 화면 맞추는 것 -->
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link href="../css/main.css" rel="stylesheet">
</head>
<body>


	<div class="container">
		<div class="heroes">
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>
			<div class="hero">
				<div class="image"></div>
			</div>

		</div><!-- heros end tag -->
	
			<div class="logo">
				<img alt="오버워치"
					src=" https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/logo_overwatch.png">
			</div>
	</div>

</body>
</html>

 

 

css 파일

@charset "UTF-8";

body {
	/* 
	부모의 비율에 맞쳐서 100만큼 늘어남 // 혼자일때는 다차지 하지만 부모가 있으면 영향 
	부모 크기에서 % 커지고 작아지고 한다 */
	height: 100vh;
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/bg.jpg");
	background-size: cover;
	/* 카페 사이트에서 많이 쓴다  배경하면이 겹치는거 없애는거*/
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.container {
	padding: 50px 0;
}

/* display = felx 설정
영영이 지정한만큼 조정을 안하겟다 
나느 ㅈㄱ메으로 하겠다
영역이 줄어 들면 자동으로 밑으로 내려 준다  */
.container  .heroes {
	display: flex;
	flex-wrap: wrap;
	/* 가운데 정렬 */
	justify-content: center;
	max-width: 700px;
	/* 	background-color: orange; */
	/*  최대 넓이 조절 */
	margin: 0 auto;
	padding: 40px 20px;
}
/* 사각 테두리 가지고 있는 설정 위치 */
.container  .heroes  .hero {
	width: 80px;
	height: 84px;
	margin: 4px;
	/* 영웅 이미지 테두리 설정 */
	border: 3px solid #FFF;
	bordr-radius: 10px;
	background-color: #555;
	/* 기울리기 */
	box-sizing: border-box;
	background-color: #555;
	/* 이미지 오버 될때 (테두리 밖으로 나올때)*/
	overflow: hidden;
	transform: skewX(-14deg);
	/* 전환 속도 (색깔 변환) 설정 */
	transition: transform .1s, background-color .6s;
	transform: skewX(-14deg);;
}

.container  .heroes  .hero:hover {
	/*화면 마우스 접근식 변호 hover*/
	background-color: #00ffff;
	transform: skewX(-14deg) scale(1.4);
	/* 가림 없이 나오는거 */
	z-index: 1;
	/*확장 옵션 */
}

/* 이미지 설정 하기  */
.container  .heroes  .hero  .image {
	width: 140%;
	height: 100%;
	background-size: 90px;
	background-position: center;
	background-repeat: no-repeat;
	transform: skewX(14deg) translateX(-16px);
}

.container .logo {
	max-width: 300px;
	margin: 0 auto;
	padding: 0 200px;
}

.container .logo  img {
	width: 100%;
}

.container  .heroes  .hero:nth-child(1)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png");
}

.container  .heroes  .hero:nth-child(1)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png");
}

.container  .heroes  .hero:nth-child(2)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero2.png");
}

.container  .heroes  .hero:nth-child(3)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero3.png");
}

.container  .heroes  .hero:nth-child(4)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero4.png");
}

.container  .heroes  .hero:nth-child(5)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero5.png");
}

.container  .heroes  .hero:nth-child(6)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero6.png");
}

.container  .heroes  .hero:nth-child(7)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero7.png");
}

.container  .heroes  .hero:nth-child(8)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero8.png");
}

.container  .heroes  .hero:nth-child(9)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero9.png");
}

.container  .heroes  .hero:nth-child(10)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero10.png");
}

.container  .heroes  .hero:nth-child(11)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero11.png");
}

.container  .heroes  .hero:nth-child(12)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero12.png");
}

.container  .heroes  .hero:nth-child(13)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero13.png");
}

.container  .heroes  .hero:nth-child(14)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero14.png");
}

.container  .heroes  .hero:nth-child(15)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero15.png");
}

.container  .heroes  .hero:nth-child(16)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero16.png");
}

.container  .heroes  .hero:nth-child(17)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero17.png");
}

.container  .heroes  .hero:nth-child(18)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero18.png");
}

.container  .heroes  .hero:nth-child(19)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero19.png");
}

.container  .heroes  .hero:nth-child(20)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero20.png");
}

.container  .heroes  .hero:nth-child(21)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero21.png");
}

.container  .heroes  .hero:nth-child(22)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero22.png");
}

.container  .heroes  .hero:nth-child(23)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero23.png");
}

.container  .heroes  .hero:nth-child(24)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero24.png");
}

.container  .heroes  .hero:nth-child(25)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero25.png");
}

.container  .heroes  .hero:nth-child(26)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero26.png");
}

.container  .heroes  .hero:nth-child(27)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero27.png");
}

.container  .heroes  .hero:nth-child(28)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero28.png");
}

.container  .heroes  .hero:nth-child(29)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero29.png");
}

.container  .heroes  .hero:nth-child(30)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero30.png");
}

.container  .heroes  .hero:nth-child(31)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero31.png");
}

.container  .heroes  .hero:nth-child(32)  .image {
	background-image:
		url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero32.png");
}

 

반응형 화면 

 

728x90
반응형
저작자표시

'웹(web) > HTML' 카테고리의 다른 글

[css] 웹 디자인 /magin/padding 이란  (0) 2021.04.26
[css] https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css/ 브라우저 별css 사이즈 맞추는 링크 /css reset  (1) 2021.04.26
[html,css]viewport 설정하기 meta 주소  (0) 2021.04.26

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band
'웹(web)/HTML' 의 관련글
댓글

티스토리툴바