메가박스 사이트 따라 만들기 - 고객센터 / SVG

megabox18

고객센터/SVG

SVG

아이콘은 SVG로 이용할 경우 선명도가 뛰어나고, 반응형이 지원됩니다. 최근 많이 사용하는 추세이며, 단점은 익스플로러 옛날 버전에서는 지원이 안됩니다.

 

결과

HTML

<article class="help_box3">
  <h3>고객센터</h3>
  <div class="service">
    <ul>
      <li>
        <a href="#">
          <span class="img_svg">
            <svg
              version="1.1"
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              viewBox="0 0 120 120"
              style="enable-background: new 0 0 120 120"
              xml:space="preserve"
            >
              <g>
                <!-- svg코드 -->
              </g>
            </svg>
          </span>
          <strong>1:1 문의</strong>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="img_svg">
            <svg
              version="1.1"
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              viewBox="0 0 120 120"
              style="enable-background: new 0 0 120 120"
              xml:space="preserve"
            >
              <g>
                <!-- svg코드 -->
              </g>
            </svg>
          </span>
          <strong>단체관람</strong>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="img_svg">
            <svg
              version="1.1"
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              viewBox="0 0 120 120"
              style="enable-background: new 0 0 120 120"
              xml:space="preserve"
            >
              <g>
                <!-- svg코드 -->
              </g>
            </svg>
          </span>
          <strong>자주묻는 질문</strong>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="img_svg">
            <svg
              version="1.1"
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              viewBox="0 0 120 120"
              style="enable-background: new 0 0 120 120"
              xml:space="preserve"
            >
              <style type="text/css">
                .st0 {
                  fill: none;
                }

                .st1 {
                  fill: #ffffff;
                }

                .st2 {
                  fill: #755ca7;
                }

                .st3 {
                  fill: #1d1d1b;
                }

                .st4 {
                  fill: #715ea5;
                }

                .st5 {
                  fill: none;
                  stroke: #ffffff;
                  stroke-width: 0;
                  stroke-linecap: round;
                  stroke-linejoin: round;
                }

                .st6 {
                  fill: none;
                  stroke: #1d1d1b;
                  stroke-width: 0;
                  stroke-linecap: round;
                  stroke-linejoin: round;
                }
              </style>
              <g>
                <!-- svg코드 -->
              </g>
            </svg>
          </span>
          <strong>분실물 문의</strong>
        </a>
      </li>
    </ul>
  </div>
</article>

 

style.css

/* 고객센터 */
.service ul {
  overflow: hidden;
}

.service li {
  float: left;
  width: 50%;
  height: 193px;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  text-align: center;
}

.service li a span {
  display: block;
  width: 120px;
  height: 120px;
  margin: 20px auto 0 auto;
  overflow: hidden;
}

.service li a strong {
  color: #666;
  font-size: 18px;
  font-weight: 500;
}

.service li:nth-child(1) {
  border-right: 0;
  border-bottom: 0;
}

.service li:nth-child(2) {
  border-bottom: 0;
}

.service li:nth-child(3) {
  border-right: 0;
}

 

출력