• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

모바일 버전 관련 질문있습니다.

21.10.08 01:45 작성 조회수 117

1

선생님 강의 덕분에 모바일버전까지 무사히 완성하고 배워가는 계기가 되었습니다.

다름이 아니라 궁금한게 있어서 여쭤보고자 글을 남깁니다.

저는 intro영역을 이미지가 아닌 동영상으로 만들었습니다.(선생님 강의 참고해서 만들었습니다.) 모바일버전에서는 화면이 짤리는 현상이 발생하는데 이미지처럼 크기가 조절된 상태로 동영상이 들어오는 방법이 있는지 궁금합니다.

 

 <main class="intro">
            <div class="inner">
                <div class="heading">
                    <h1>The World’s Best Cities</h1>
                    <p>It’s not just about good weather or great food and nightlife. Unlike other best-of lists, Resonance’s annual ranking also considers a city’s diversity.</p>
                </div>
            </div>
            <video src="video/Aerial - 26571.mp4" autoplay muted loop></video>
        </main> <!-- intro -->
 
 
pc ver css
.intro{
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    
}
.heading{
    color: #fff;
    text-align: center;
}
.heading h1{
    font-size: 56px;
    margin-bottom: 40px;
}
.heading p{
    font-size: 22px;
    line-height: 1.8em;
    padding: 0 150px;
    font-weight: 200;
}
video{
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}
 
 
 
 
 
course-thumbnail

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

반응형 모바일 레이아웃 변환(4) - 헤더영역, 네비게이션(2)

강의실 바로가기

답변 1

답변을 작성해보세요.

1

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2021.10.08

캡쳐화면을 올려주셨으면 더 좋은데 글로만 보고 말씀 드릴게요.

동영상의 경우 뷰포트(viewport)의 높이를 100vh로 하면 모바일 화면 상하에 가득찹니다.

height: 100vh

그런데 좌우가 잘리는건 동영상의 특성상 어쩔 수 없습니다. 사실 이미지도 상하를 가득채우면 좌우가 잘리는건 어쩔 수 없어요. 이미지 또는 동영상을 모바일에 최적화해서 보여주고 싶으면 모바일용 이미지 또는 동영상을 미디어쿼리 내에 넣어서 모바일에서 다른 이미지와 동영상이 보이게 할 수 있습니다.

air_guri님의 프로필

air_guri

질문자

2021.10.08

앗 감사합니다.

선생님 하다보니 안되는 것과 조금 더 욕심이 나서 변화를 주고 싶어서 수정하려고 합니다.

먼저 안되는거 부터 말씀드리겠습니다.

1-1. 미디어쿼리시 gnb에 흰색을 주고 토글버튼 누를시 나오는걸로 변경하다보니 정작 bar에 흰색이 사라져서 btn이 스크롤시 잘 안보이는데 제가 뭘 잘못했는가요?

1-2. gnb li a에 display block을 줬음에도 inline요소처럼 background에 색상이 들어갑니다. 이것도 한번만 봐주세요. 

    
  <header>
            <div class="banner">
                <div class="inner">
                    <div class="lnb">
                        <a href="#"><span>for</span>member</a>
                        <a href="#"><span>for</span>clients</a>
                        <a href="#"><span>for</span>inquire</a>
                    </div> <!-- lnb -->
                </div> <!-- inner -->
            </div> <!-- banner -->
            <nav>
                <ul class="gnb">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#ranking">RANKING</a></li>
                    <li><a href="#testmonial">TESTIMONIAL</a></li>
                    <li><a href="#blog">BLOG</a></li>
                </ul>
            </nav>
pc css
 
header{
    position: fixed;
    width: 100%;
    z-index: 20;
    transition: 0.5s;
}
.banner{
    background: rgb(247, 245, 245);
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: right;
    transition: 0.2s;
}
.lnb{}
.lnb a{
    padding: 0 20px;
    color: black;
}
.lnb a span{
    font-style: italic;
    margin: 0 5px;
}
.lnb a:hover{
    color: dodgerblue;
}
nav{
    width: 1300px;
    margin: auto;
}
.gnb{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.gnb li{
}
.gnb li a{
    display: block;
    color: white;
    padding:  10px;
    font-size: 20px;
}
.gnb li a:hover{
    color: black;
}
/* header active */
header.active{
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
header.active .gnb li a{
    color: black;
}
header.active .banner{
    height: 0;
    overflow: hidden;
}
 
 
 
 
media querry css
header{
    }
    .lnb{
        width: 100%;
        text-align: center;
    }
    nav{
        width: 100%;
    }
    .gnb{
        flex-direction: column;
        background: white;
        position: fixed;
        right: -300px;
        top: 0;
        width: 300px;
        height: 100vh;
        justify-content: flex-start;
        align-items: flex-end;
        padding-top: 80px;
        padding-right: 20px;
        box-sizing: border-box;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        z-index: 30;
    }
    .gnb.active{
        right: 0;
    }
    .gnb li{}
    .gnb li a{
        color: black;
        display: block;
        font-size: 24px;
        margin-top: 30px;
    }
    .gnb li a:hover{
        background: #eee;
   }

 

 

2.이거는 변화를 주고 싶은 내용인데 festival 섹션에 버튼을 addclass와 removeclass를 이용해서 클릭시 색깔을 변경하려고 합니다.

그런데 수업때 first,last-child로 지정해서 따로 class를 지정안했는데 class를 더 하자니 코드가 길어지고 간결하지 않을 것 같습니다.

이럴땐 어떻게 .active라는 addclass를 css에 줘야하는가요? 

.btns a:first-child{
    background: orange;
    color: white;
}
.btns a:last-child{
    background: #ededed;
}

이 글과 비슷한 Q&A