[html&css] 오버워치 페이지 만들기

sireal·2024년 3월 8일

Frontend

목록 보기

5/15

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">

    <!-- main.css 파일 연결 */ -->

    <link rel="stylesheet" href="./main.css">
</head>
<body>
    
    <!-- head 의 link 태그로 인해 여백이 완전히 사라짐 -->
    
    <div class="container">

        <div class="heroes">
                    <!-- .hero*32>.image -->
                    <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>
        <!-- heroes End -->

        <!-- LOGO -->
        <div class="logo">
            <img src="./images/logo_overwatch.png" /> <!-- 로고 이미지불러오기 -->
        </div>
        
    </div>
        <!-- Container End -->

</body>
</html>

body {
    height: 120vh; /* vh 는 전체화면을 기준하기에 스크롤으로 내릴 수 있음 */
    background-image: url("./images/bg.jpg");
    background-repeat: no-repeat; /* no-repeat 를 해주지 않으면 스크롤을 내렸을때 배경 이미지가 반복되어 나타난다 */
    background-attachment: fixed; /* 스크롤바를 내려도 배경이미지가 고정 */
}

/* 화면 위에서 띄어주기 */
.container{
    padding: 50px 0;
}


.container .heroes {
    display: flex; /* 항목들을 여러줄에 걸쳐 나열 */
    flex-wrap: wrap; /* 항목들을 여러 줄에 걸쳐 나열 */
    justify-content: center; /* 컨테이너 내에서 내용물을 수평으로 가운데 정렬 */
    max-width: 700px; /* 컨테이너 최대 넓이 지정 */
    margin: 0 auto; /* 페이지 내에서 컨테이너를 수평으로 가운데 정렬 */
    padding: 40px 20px; /* 간격지정해주기 */
}


.container .heroes .hero{
    width: 80px;
    height: 84px;
    background-color: #555;
    margin: 4px; /* 각 hero 요소 주위에 4px 여백 추가 */
    border: 3px solid #fff; /* 각 hero 요소 주위에 3px 흰색테두리 추가 */
    transform: skewX(-14deg); /* 각hero 요소를 수평으로 -14도만큼 기울임 */
    border-radius: 10px; /* 각 hero 요소의 모서리를 10px 반지름으로 둥글게 설정 */
    box-sizing: border-box; /* 패딩과 테두리를 요소의 전체 너비와 높이에 포함 */
    transition: 
        transform 0.2s;
        background-color .8s;
    overflow: hidden;
}


.container .heroes .hero:hover {
    background-color: #ff9c00; /* 커서를 올려뒀을때 배경 색상 변경 */
    transform: scale(1.3) skewX(-14deg);/* 커서를 올려뒀을때 크기커지기 + 기울어진 모양 변형 */
    z-index: 1; /* 커서를 올려뒀을때 다른 이미지에 가려짐 방지 */
    
}



/* 32개의 이미지를 공통적으로 처리하기 */
.container .heroes .hero .image {
    width: 140%; /* 140%로 해주면 크기가 넘쳐서 박스를 넘어가게된다 */
    height: 100%;
    background-position: center;
    background-size: 90px;
    background-repeat: no-repeat;
    transform: skewX(-14deg) translate(-16px); /* 불러온 이미지도 기울어 + 왼쪽으로 이미지 당기기 적용 */
    
}

/* 이미지는 블럭요소가 아닌 문자요소이므로 상속기능 사용할 수 X */
/* 크기가 설정되지 않으면 이미지가 나오지 X */


.container .heroes .hero:nth-child(1) .image {
    background-image: url("./images/hero1.png"); 
}
.container .heroes .hero:nth-child(2) .image {
    background-image: url("./images/hero2.png"); 
}
.container .heroes .hero:nth-child(3) .image {
    background-image: url("./images/hero3.png"); 
}
.container .heroes .hero:nth-child(4) .image {
    background-image: url("./images/hero4.png"); 
}
.container .heroes .hero:nth-child(5) .image {
    background-image: url("./images/hero5.png"); 
}
.container .heroes .hero:nth-child(6) .image {
    background-image: url("./images/hero6.png"); 
}
.container .heroes .hero:nth-child(7) .image {
    background-image: url("./images/hero7.png"); 
}
.container .heroes .hero:nth-child(8) .image {
    background-image: url("./images/hero8.png"); 
}
.container .heroes .hero:nth-child(9) .image {
    background-image: url("./images/hero9.png"); 
}
.container .heroes .hero:nth-child(10) .image {
    background-image: url("./images/hero10.png"); 
}
.container .heroes .hero:nth-child(11) .image {
    background-image: url("./images/hero11.png"); 
}
.container .heroes .hero:nth-child(12) .image {
    background-image: url("./images/hero12.png"); 
}
.container .heroes .hero:nth-child(13) .image {
    background-image: url("./images/hero13.png"); 
}
.container .heroes .hero:nth-child(14) .image {
    background-image: url("./images/hero14.png"); 
}
.container .heroes .hero:nth-child(15) .image {
    background-image: url("./images/hero15.png"); 
}
.container .heroes .hero:nth-child(16) .image {
    background-image: url("./images/hero16.png"); 
}
.container .heroes .hero:nth-child(17) .image {
    background-image: url("./images/hero17.png"); 
}
.container .heroes .hero:nth-child(18) .image {
    background-image: url("./images/hero18.png"); 
}
.container .heroes .hero:nth-child(19) .image {
    background-image: url("./images/hero19.png"); 
}
.container .heroes .hero:nth-child(20) .image {
    background-image: url("./images/hero20.png"); 
}
.container .heroes .hero:nth-child(21) .image {
    background-image: url("./images/hero21.png"); 
}
.container .heroes .hero:nth-child(22) .image {
    background-image: url("./images/hero22.png"); 
}
.container .heroes .hero:nth-child(23) .image {
    background-image: url("./images/hero23.png"); 
}
.container .heroes .hero:nth-child(24) .image {
    background-image: url("./images/hero24.png"); 
}
.container .heroes .hero:nth-child(25) .image {
    background-image: url("./images/hero25.png"); 
}
.container .heroes .hero:nth-child(26) .image {
    background-image: url("./images/hero26.png"); 
}
.container .heroes .hero:nth-child(27) .image {
    background-image: url("./images/hero27.png"); 
}
.container .heroes .hero:nth-child(28) .image {
    background-image: url("./images/hero28.png"); 
}
.container .heroes .hero:nth-child(29) .image {
    background-image: url("./images/hero29.png"); 
}
.container .heroes .hero:nth-child(30) .image {
    background-image: url("./images/hero30.png"); 
}
.container .heroes .hero:nth-child(31) .image {
    background-image: url("./images/hero31.png"); 
}
.container .heroes .hero:nth-child(32) .image {
    background-image: url("./images/hero32.png"); 
}


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

}


/* logo 클래스 안의 img 에 접근 */
.container .logo img{
    width: 100%;
}

sireal

이전 포스트

[css]

다음 포스트

[html&css] 오버워치 페이지 만들기

Frontend

[css]

[JS] 사용방법 & 문법 & 타입

0개의 댓글