팬더다이녀석들아
296
2021-04-08 11:24:23
3
187

선배님들 반응형 질문좀 드리겠습니다.. 왜이러는지 모르겠어요 ㅜㅜ



{{$head_sub}}


<style>
    body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form, figcaption, img, a {margin:0; padding:0; text-decoration: none; list-style: none;}
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;700;900&display=swap');
    
    @font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

.brandhistory1 {width:1500px; height:560px; text-align:center; margin:0px auto; border-left:1px solid #909090; border-right:1px solid #909090;} 
.brandhistory2 {font-family: 'GmarketSansBold'; font-size:40px;line-height:500px;}
.brandhistory3 {font-family: 'Noto Sans KR', sans-serif; font-size:18px; color:#7e7e7e; margin-top:-210px;}

.area1 {max-width:1920px; height:501px; background-color:#ece9e6; border-bottom:1px solid #909090; margin:0 auto; border-top:1px solid #909090;}

.area1 div {float:left;}

.area1_sub1 {width:883px; height:499px; background-color:#f2f0ec; border-left:1px solid #909090; border-right:1px solid #909090; margin-left:202px;}

.area1_sub1:hover {background-color:#222; color:#fff;}
.area1_sub2:hover {background-color:#222; color:#fff;}
.area1_sub3:hover {background-color:#222; color:#fff;}
.area1_sub4:hover {background-color:#222; color:#fff;}

.areap1 {text-align:center; padding-top:200px; font-family: 'GmarketSansMedium'; font-size:25px;}
.areap2 {text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:300;}
.areap3 {text-align:center; font-family: 'GmarketSansMedium'; font-size:20px; padding-top:80px;}
.areap4 {text-align:center; font-family: 'GmarketSansMedium'; font-size:25px; padding-top:80px;}
.areap5 {text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:300;}

.area1_sub2 {width:309px; height:249px; background-color:#fff; border-right:1px solid #909090; border-bottom:1px solid #909090;}
.area1_sub3 {width:308px; height:249px; background-color:#fff; border-bottom:1px solid #909090; border-right:1px solid #909090;}
.area1_sub4 {width:617px; height:250px; background-color:#f2f0ec; border-right:1px solid #909090;}

.n_contents {border-left:1px solid #909090; border-right:1px solid #909090; width:1500px; margin:0 auto; padding-top:100px; padding-bottom:100px;}
</style>

<div class="brandhistory1">
    <div class="brandhistory2">NOTICE</div>
    <div class="brandhistory3">공지사항</div>
</div>
<div class="area1">
    <a href="http://www.behom.co.kr/default/mp5/mp5_sub4.php?sub=04"><div class="area1_sub1">
        <p class="areap1">MEASUREMENT & INQUIRY</p><br>
        <p class="areap2">실측 & 상담요청</p>
    </div></a>

    <a href=http://www.behom.co.kr/default/mp5/mp5_sub3.php?sub=03><div class="area1_sub2">
        <p class="areap4">Q & A</p><br>
        <p class="areap5">문의게시판</p>
    </div></a>

    <a href="http://www.behom.co.kr/default/mp5/mp5_sub6.php?sub=06"><div class="area1_sub3">
        <p class="areap4">REVIEW</p><br>
        <p class="areap5">사용후기</p>
    </div></a>

    <a href="http://www.behom.co.kr/default/mp5/mp5_sub1.php?sub=01"><div class="area1_sub4">
        <p class="areap4">NOTICE</p><br>
        <p class="areap5">공지사항</p>
    </div></a>
</div>

<!-- 본문 -->
<div class="n_contents">
    <div class="container">
        <div class="row">

            <!-- 메뉴 영역 -->
            <div class="col-sm-3">
                <!-- 페이지메뉴 -->

                <!-- 배너 -->
                {{$left_banner}}
            </div>

            <!-- 내용 영역 -->
            <div class="col-sm-9">
                <div id="contentsArea">

                    <!-- 게시판모듈 -->
                    <div class="n_board_txt">
                        {{$cafe_board_1}}
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

{{$foot}}



우선은 코드입니다~


이건 1920px 의 해상도일때의 모습이구요



이건 2560px 일때의 모습인데요


저번에도 질문해서 max-width 하면 된다고 하셔서 했는데도 2560px로 옮기면 자꾸 저렇게 어긋나네요..


해결방법을 모르겠습니다 도와주시면 감사하겠습니다 ㅜㅜ

0
  • 답변 3

  • 20170923
    2k
    2021-04-08 11:53:34 작성 2021-04-08 12:03:05 수정됨


    1920px 말고 다른 해상도로 해도 깨지는데 우선 px로 고정해놓으셔서 그런 부분이 제일 큰거같아요

    뷰에 따라서 길이가 어느정도 변경되도록 vw나 %, em같은걸로 하심이 좋을거 같네요

  • 20170923
    2k
    2021-04-08 12:03:15


  • 팬더다이녀석들아
    296
    2021-04-08 14:24:49

    20170923


    답변 감사합니다 선배님~ 알려주신 방법으로 조정해볼게요~!

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