네이버맵 코드

<script type="text/javascript" src="<https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=>[네이버클라우드 API Key]"></script>

<script type="text/javascript">

function initMap() {
    // 'map-content' 안에 있는 'map-image' ID를 가진 요소를 찾아 지도를 생성합니다.
    var map = new naver.maps.Map('map-image', {
        center: new naver.maps.LatLng(35.094456, 128.903542),
        zoom: 18,
        minZoom: 8,
        maxZoom: 40,
        zoomControl: true,
        zoomControlOptions: {
            style: naver.maps.ZoomControlStyle.SMALL,
            position: naver.maps.Position.TOP_RIGHT,
        },
    });

    // 마커 생성
    var marker = new naver.maps.Marker({
        position: new naver.maps.LatLng(35.094456, 128.903542),
        map: map
    });

    // 정보창(인포윈도우) 내용
    var infowindowtext = [
        '<div style="padding:6px; text-align: center; border:none;">',
        '   <p style="font-size: 14px; font-weight: bold; margin: 0;">파도세무회계</p>',
        '   <p style="font-size: 12px; margin: 0;">명지국제8로10번길 38<br/>플러스시네마 309호</p>',
        '</div>'
    ].join('');

    // 정보창 생성
    var infowindow = new naver.maps.InfoWindow({
        content: infowindowtext,
        maxWidth: 200,
        backgroundColor: "white",
        borderColor: "black",
        borderWidth: 1,
        disableAnchor: true,
        pixelOffset: new naver.maps.Point(0, -5)
    });

    // 지도가 초기화될 때 정보창을 바로 엽니다.
    infowindow.open(map, marker);
}
</script>

<div class="map-wrapper">
  <div class="map-container">
    <div class="map-content">
      <div id="map-image" class="map-image"></div>
    </div>
  </div>
</div>

연락처 코드

<!-- 연락처 정보 섹션 -->
<div class="contact-info-wrapper">
  <div class="contact-info-header">
    <h3 class="contact-info-title">빠르고 편하게 문의하세요</h3>
    <p class="contact-info-subtitle">편한 방법으로 연락주세요</p>
  </div>

  <!-- 연락처 카드 그리드 -->
  <div class="contact-grid">
    <!-- 대표번호 카드 -->
    <a href="tel:010-1234-5678" class="contact-card phone">
      <div class="contact-card-bg"></div>
      <div class="contact-content">
        <div class="contact-icon-wrapper">
          <svg
            class="contact-icon"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
            ></path>
          </svg>
        </div>
        <div class="contact-info">
          <h4>대표번호</h4>
          <p>010-1234-5678</p>
        </div>
      </div>
    </a>

    <!-- 이메일 카드 -->
    <a href="mailto:[email protected]" class="contact-card email">
      <div class="contact-card-bg"></div>
      <div class="contact-content">
        <div class="contact-icon-wrapper">
          <svg
            class="contact-icon"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
            ></path>
          </svg>
        </div>
        <div class="contact-info">
          <h4>이메일</h4>
          <p>[email protected]</p>
        </div>
      </div>
    </a>

    <!-- 카카오톡 카드 -->
    <a
      href="https:/naver.com"
      target="_blank"
      class="contact-card kakao"
    >
      <div class="contact-card-bg"></div>
      <div class="contact-content">
        <div class="contact-icon-wrapper">
          <svg
            class="contact-icon"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
            ></path>
          </svg>
        </div>
        <div class="contact-info">
          <h4>카카오톡 채널</h4>
          <p>파도세무회계</p>
        </div>
      </div>
    </a>
  </div>
</div>

<!-- 운영 시간 정보 -->
<div class="operation-hours">
  <svg
    class="operation-hours-icon"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
    ></path>
  </svg>
  <h3>운영 시간</h3>
  <p>평일 09:00 - 18:00 | 주말·공휴일 휴무</p>
</div>

E.o.D