logo와 video의 html 순서 문제

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

[Part 01] 비디오 백그라운드를 활용한 랜딩페이지 - 웹폰트, 동영상 제어하기, 로고

작성

160

안녕하세요, 강의 영상에서 페이지의 요소들을 모두 position 속성을 이용해 배치할거라 html 태그의 순서는 상관없다고 하셔서 시험삼아 logo 요소를 video 요소의 앞에 배치시켜봤습니다.

그랬더니 아래 화면처럼 logo 요소가 video의 위에 위치하고 z-index를 주거나 배경색을 transparent로 설정해도 바뀌지 않더라고요.

로고가 비디오 위에 오는건 html 태그의 순서의 영향이 있는거 같은데, 그러면 실제 웹사이트를 만들때도 html 태그들의 순서를 고려해서 배치해야 하나요?

사용한 html와 css 스크립트는 댓글에 첨부했습니다 스크린샷 2024-02-20 오후 7.47.49.png

HTML/CSS jquery

답변 2

hyoseok BANG

질문자

CSS

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
@import url('http://fonts.googleapis.com/css?family=Monoton');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

body {
    margin: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}
a {
    text-decoration: none;
}

/* BG Video */
.video-frame {}
.video-frame video {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    
}
.logo {
    border: 5px solid red;
    background-color: transparent;
    color: transparent;
    z-index: -1;
}

hyoseok BANG

질문자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <div class="video-frame">
            <video src="images/video-female.mp4" autoplay muted loop poster="images/placeholder-female.jpg"></video>
        </div>
        
        
    </div>
</body>
</html>

인프런 커뮤니티 질문&답변

logo와 video의 html 순서 문제