* 미디어쿼리
.showroom_aside {
height: 450px;
background: url(../img/m_showroom-banner.jpg) no-repeat top;
background-size: cover;
/* position: relative; */
}
.showroom-view {
margin-top: 50px;
margin-bottom: 30px;
}
.showroom-view__desktop-img {
display: none;
}
.showroom-view__mobile-img {
display: block;
}
.showroom_aside .wrap {
font-size: 40px;
padding-top: 180px;
}
.showroom_aside .wrap > div:nth-child(2) {
font-size: 16px;
font-weight: 400;
}
.showroom-info {
}
.showroom-info ul li {
float: none;
width: 100%;
margin-top: 10px;
}
.showroom-map {
margin-top: 30px;
margin-bottom: 50px;
}
*style.css
/* 쇼룸 */
.showroom_aside {
height: 450px;
background: url(../img/estimate_aside.jpg) no-repeat top;
background-size: cover;
/* position: relative; */
}
.showroom_aside .wrap {
/* text-align: center; */
color: #ffffff;
/* font-weight: 40px; */
padding-top: 150px;
text-align: center;
font-size: 50px;
font-weight: 100;
}
.showroom_aside .wrap > div:nth-child(2) {
font-size: 20px;
font-weight: 400;
}
.showroom_aside__inner {
position: relative;
}
.dim {
background-color: #111111;
height: 450px;
width: 100%;
opacity: 0.5;
position: absolute;
}
.showroom-view {
margin-top: 70px;
margin-bottom: 50px;
text-align: center;
}
.showroom-view .tit {
margin-bottom: 30px;
font-size: 30px;
font-weight: 300;
}
.showroom-view__desktop-img img {
max-width: 720px !important;
}
.showroom-view__mobile-img {
display: none;
}
.showroom-info {
text-align: center;
background-color: #f1f1f1;
padding: 50px 0;
}
.showroom-info img {
width: 80px;
}
.showroom-info ul {
text-align: center !important;
}
.showroom-info ul li {
float: left;
width: 33.2%;
padding: 20px 0;
}
.showroom-info ul li .tit {
font-size: 25px;
margin-top: 20px;
font-weight: 500;
}
.showroom-info ul li .sub-tit {
margin-top: 10px;
font-size: 20px;
}
.showroom-info ul li .desc {
margin-top: 10px;
color: #666666;
}
.showroom-map {
margin-top: 50px;
text-align: center;
}
.showroom-map .tit {
margin-top: 30px;
font-size: 25px;
}
.showroom-map .sub-tit {
margin-top: 30px;
}
.showroom-map .btn {
margin-top: 30px;
}
.showroom-map .btn a {
display: inline-block;
width: 300px;
height: 56px;
text-align: center;
background-color: #9b9b9b;
color: #ffffff;
line-height: 56px;
border-radius: 30px;
margin-bottom: 50px;
}
.showroom-map .btn a:hover {
background-color: #3f3fff;
}
.showroom-map .root_daum_roughmap {
margin: 0 auto;
}
*html
- aside는 공통영역 입니다
- map에 script 코드 있습니다
<aside class="showroom_aside">
<div class="showroom_aside__inner">
<div class="dim"></div>
<div class="wrap">
<div>샘플보러 놀러오세요</div>
<div>
마미견적서에서는 다양한 브랜드 자재를 볼 수 있습니다
</div>
</div>
</div>
</aside>
<!-- //#배경 aside -->
<section class="showroom-view">
<div class="row">
<div class="container">
<div class="tit">
샘플매장 둘러보기
</div>
<div class="showroom-view__desktop-img">
<img src="img/showroom-img.png" alt="">
</div>
<div class="showroom-view__mobile-img">
<img src="img/m_showroom-img.png" alt="">
</div>
</div>
</div>
</section>
<section class="showroom-info">
<div class="container">
<ul class="clearfix">
<li>
<div class="showroom-info__img">
<img src="img/t1.svg" alt="">
</div>
<div class="showroom-info__desc">
<div class="tit">방문일자</div>
<div class="sub-tit">방문하시기 하루 전 연락주세요</div>
<div class="desc">
<div>평일 10:00 - 18:30</div>
<div>주말 10:00 - 15:00</div>
</div>
</div>
</li>
<li>
<div class="showroom-info__img">
<img src="img/t2.svg" alt="">
</div>
<div class="showroom-info__desc">
<div class="tit">오시는길</div>
<div class="sub-tit">은평구 갈현동 468-5 베로니스상가 108호</div>
<div class="desc">
<div>구산역 4번출구 3분거리</div>
<div>연신내역 6번출구 도보 10분거리</div>
</div>
</div>
</li>
<li>
<div class="showroom-info__img">
<img src="img/t3.svg" alt="">
</div>
<div class="showroom-info__desc">
<div class="tit">주차여부</div>
<div class="sub-tit">주차요금은 무료입니다</div>
<div class="desc">차량을 타고오실 경우 미리 말씀해주세요</div>
</div>
</li>
</ul>
</div>
</section>
<section class="showroom-map">
<div class="row">
<div class="container">
<div class="tit">
오시는길 상세설명
</div>
<div class="sub-tit">
<div>서울특별시 은평구 연서로 17길 9, 베로니스 상가건물 1층 108호</div>
<div>(서울시 은평구 갈현동 468-5)</div>
</div>
<div class="btn">
<a href="#a">
오는시는 길 상세보기
</a>
</div>
<div class="map-img">
<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1592490686146" class="root_daum_roughmap root_daum_roughmap_landing"></div>
</div>
</div>
</div>
</section>
* 지도 스크립트
<!--
2. 설치 스크립트
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "1592490686146",
"key" : "yuja",
"mapWidth" : "640",
"mapHeight" : "360"
}).render();
* 추가내용
- 이미지 추가
- 헤더 및 탭메뉴 (매장위치)