maker0927
170
2020-03-25 12:50:00 작성 2020-03-25 12:55:44 수정됨
10
896

반응형 웹을 간단히 구현중인데 페이지 화면을 줄이면 스크롤바가 뜹니다ㅜㅜ


간단히 반응형웹을 이용해 투두리스트를 만들고 있는데 화면 너비가 1200px 미만이 되면 container의 width값을 600px로 수정하게끔 코드를 짰습니다. 그런데 화면 너비를 줄이니 아래 처럼 스크롤바가 뜨네요 ㅜㅜ 스크롤바가 안 나타났으면 좋겠습니다.(웹 개발을 막 시작해서 코드가 더러운점 죄송합니다)

<문제의 화면>

<html 코드>

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>To Do!</title>
        <!-- 웹 폰트 -->
        <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div id="wrap">
            <div>
            <header id="main_header">
                <div class="container">
                    <p class="main_title">
                        <a href="#">To Do!</a>
                    </p>
                    <!-- //main_title -->
                </div>
                <!-- //container -->
            </header>
            <!-- //header -->
            <div id="main_content">
                <div class="container">
                    <p class="main_description">간단한 ToDo 리스트입니다. 자기가 해야하는 것을 목록에 적으세요.</p>
                </div> <!-- //container -->
            </div>
            <!-- //contents -->
            <footer id="main_footer">
                <div class="container"></div> <!-- //container -->
            </footer>
            <!-- //footer -->
        </div>
        <!-- //wrap -->
    </body>
</html>

<css 코드>

@charset "UTF-8";

/* 레이아웃 */
#wrap {
    text-align: center;
    width: 100%;
}

#main_header {
    position: relative;
    width: inherit;
    height: 200px;
    overflow: auto;
    background: #777;
}

#main_content {
    width: inherit;
    height: 1000px;
    background: #888;
}

#main_footer {
    width: inherit;
    height: 100px;
    background: #999;
}

.container {
    width: 1200px;
    height: inherit;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.3);
}

/* 헤더 */
p.main_title {
}

p.main_title a {
    font-size: 30px;
    color: #fff;
}

/* 컨텐츠 */

@media (max-width: 1200px) {
    .container {
        width: 600px;
    }
}


0
  • 답변 10

  • 부적합한열유형.
    608
    2020-03-25 13:01:51

    #main_header 에    overflow-x: hidden; overflow-y: auto; 하면 안되나요?

  • maker0927
    170
    2020-03-25 13:04:31
    답변 감사합니다ㅎ 해보았는데 해결은 안되네요..ㅜㅜ 이런경우는 처음이라 당황스럽네요ㅜㅜ
  • 부적합한열유형.
    608
    2020-03-25 13:11:53

    maker0927 정확히 어떤 스크롤을 숨기고 싶으신건가요??

  • maker0927
    170
    2020-03-25 13:12:52
    기본적인 가장 긴 세로 스크롤 말고는 다 숨기고 싶어요!
  • 부적합한열유형.
    608
    2020-03-25 13:41:41

    #main_header { overflow: hidden; } 하면 안되나요?

  • maker0927
    170
    2020-03-25 13:43:07

    네ㅜㅜ 처음에는 구글링해서 그렇게 하면 해결이 될줄 알았는데.. 안되네요ㅜㅜ

  • 헬헬뿡
    607
    2020-03-25 13:43:47 작성 2020-03-25 13:44:48 수정됨

    메인헤더에 overflow 속성이 지정되어 있고  너비와 높이값을 갖고 있어서 브라우저 창 사이즈를 줄일 경우 스크롤이 발생하게 됩니다

  • maker0927
    170
    2020-03-25 13:47:51

    감사합니다ㅜㅜ 아침 8시부터 붙잡고 있었는데 드디어 해결됬네요ㅜㅜ 부적합한열유형님도 부족한 코드

    봐주시고 조언해드려서 너무 고마워요ㅜㅜ

  • 한경닷컴교육센터
    3k
    2020-03-25 13:49:54

    @media all and (max-width: 800px) {

        .container {

            width: 100%;

        }

    }


    @media all and (min-width:801px) and (max-width:1024px) {

        .container {

            width: 600px;

        }

    }


    @media all and (min-width:1025px) {

    .container { 

    width: 800px;

    }

    }


    이런식으로 해상도 미디어쿼리를 이용해서 해상도 별로 해야하지 않을까요 ?

    다만 컨텐츠에 따라 설정을 해야겠지만요 

  • maker0927
    170
    2020-03-25 13:51:28

    아.. 그럴려고 했는데 하나만 해보고 테스트 하니까 이런 문제가 생겨서요ㅜㅜ

  • 로그인을 하시면 답변 을 등록할 수 있습니다.