팬더다이녀석들아
296
2021-03-31 11:37:11
2
121

선배님들 반응형 질문 하나만 드려도 되겠습니까?





<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 {width:100%px; height:500px; background-color:#ece9e6; border-bottom:1px solid #909090; margin:0 auto;}

.area1 div {float:left;}

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

.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 div:nth-child(2) {width:309px; height:249px; background-color:#fff; border-right:1px solid #909090; border-bottom:1px solid #909090;}
.area1 div:nth-child(3) {width:308px; height:249px; background-color:#fff; border-bottom:1px solid #909090; border-right:1px solid #909090;}
.area1 div:nth-child(4) {width:617px; height:250px; background-color:#f2f0ec; border-right:1px solid #909090;}

.area2 {width:1500px; height:6500px; border-left:1px solid #909090; border-right:1px solid #909090; margin:0 auto;}
.area3 {text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:300; padding-top:100px; line-height:35px;}
.area4 {padding-top:100px;}
.area5 {text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size:35px; font-weight:700; padding-top:100px;}
.area6 {text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size:15px; font-weight:300; padding-top:10px;}
.area7 {text-align:center; padding-top:100px;}
.area8 {text-align:center; padding-top:120px; font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:300; line-height:35px;}
b {vertical-align:0 !important;}
.area9 {padding-top:180px;}

.area10 {text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size:35px; font-weight:700; padding-top:100px;}
.area11 {text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size:15px; font-weight:300; padding-top:10px;}
.area12 {text-align:center; padding-top:100px;}
.area13 {text-align:center; padding-top:150px; font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:300; line-height:35px;}
.area14 {padding-top:170px;}
.area15 {font-family: 'GmarketSansBold'; text-align:center; font-size:35px; padding-top:100px;}
.area16 {text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size:15px; font-weight:300; padding-top:10px;}
.area17 {text-align:center; padding-top:100px;}
</style>

<div class="brandhistory1">
    <div class="brandhistory2">BUSINESS AREA</div>
    <div class="brandhistory3">사업영역</div>
</div>
<div style="border-top:1px solid #909090;"></div>

<div class="area1">
    <div>
        <p class="areap1">CLOSET</p><br>
        <p class="areap2">붙박이장</p>
    </div>
    <div>
        <p class="areap3">FURNITURE<br>&<br>PROPS</p><br>
    </div>
    <div>
        <p class="areap3">BATH<br>&<br>PANNEL</p><br>
    </div>
    <div>
        <p class="areap4">KITCHEN</p><br>
        <p class="areap5">주방가구</p>
    </div>
</div>

<div class="area2">
    <div class="area3">베홈 시스템 퍼니처는 빌트인 가구 전문 회사로 붙박이장을 시작으로<br>
                      주방가구/ 바스/ 판넬/ 가구/ 소품까지 영역을 확장하고 있습니다.</div>

    <div class="area4"><img src="http://behom.cafe24.com//bizdemo39562/img/about/area1.jpg"></div>

    <div class="area5">붙박이장</div>
    <div class="area6">슬라이드 / 여닫이 / 드레스룸 / 거실장</div>
    <div class="area7"><img src="http://behom.cafe24.com//bizdemo39562/img/about/area2_06.jpg"></div>
    <div class="area8">베홈시스템퍼니처의 붙박이장은 <b>슬라이드 / 여닫이 도어</b> 스타일과<br>
                       도어가 없는 <b>드레스룸 / 엔드리스 시스템,</b> TV 등 거실 수납에 용이한 <b>거실장</b><br>
                       신발 및 부자재 정리의 용이한 <b>신발장</b> 빌트인 가구를 100% 국내생산하여 선보이고 있습니다.</div>
    <div class="area9"><img src="http://behom.cafe24.com//bizdemo39562/img/about/area3.jpg"></div>
    <div class="area10">주방가구</div>
    <div class="area11">싱크대 / 수납장 / 소재 / 옵션</div>
    <div class="area12"><img src=http://behom.cafe24.com//bizdemo39562/img/about/area10.jpg></div>
    <div class="area13">베홈시스템퍼니처의 주방가구 시스템은 싱크대 / 수납장의 도어 상판 및 소재 선택부터<br>
                        편리함을 더해 줄 액세서리 옵션까지 선보여 나에게 맞는 맞춤 주방을 경험하실 수 있도록 선보이고 있습니다.</div>
    <div class="area14"><img src="http://behom.cafe24.com//bizdemo39562/img/about/area4.jpg"></div>
    <div class="area15">NEW BUSINESS AREA</div>
    <div class="area16">새로운 사업영역</div>
    <div class="area17"><img src="http://behom.cafe24.com//bizdemo39562/img/about/area11.jpg"></div>
    <div class="area13">베홈시스템퍼니처의 공간은 끊임없이 발전합니다.<br>
                        빌트인 가구를 중심으로 바스 용품부터 소품까지 다양한 분야를 선보일 예정입니다.</div>

</div>



우선은 코드입니다.


이건 1920px 일때의 모습이구요



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


어느 해상도에 가도 해상도 1920px의 모습으로 유지시키고 싶은데 방법을 모르겠습니다 ㅜㅜ


반응형 초보에다가 사수도 없어서 구글링 하면서 하는데도 이런건 어떻게 처리해야할지를 모르겠습니다


알려주시면 정말 감사하겠습니다 ㅜㅜ





0
  • 답변 2

  • 요기베라
    296
    2021-03-31 11:45:52

    max-width 먹여두면 될거같네용

  • 릴보너
    526
    2021-03-31 11:48:33

    .area1에 max-width:1920px 추가하시면 됩니다.

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