2023/09/06 문자온 퍼블리싱 > 3개 페이지 > 목차내용 추가

src/main/webapp/publish/publish_text/publish_text/multi_text.html

@@ -32,12 +32,32 @@
 </head>
 <style>
     html{min-width: 540px;}
+   .text-wrap .text_list{max-width: 1320px; width: calc(100% - 60px); border: 6px solid #f3f6fb; border-radius: 20px; overflow: hidden; margin: 0 auto; margin-top: 73px; padding: 2% 0;}
+   .text-wrap .text_list p{text-align: center; font-weight: 700; font-size: 39px; margin-bottom: 2%; letter-spacing: -1.5px;}
+   .text-wrap .text_list ul{padding: 0 36%; font-size: 28px; font-weight: 400; white-space: nowrap; line-height: 49px; letter-spacing: -1.5px;}
    .text-wrap .text-box{margin-top: 80px; text-align: center;}
    .text-wrap .text-box .content div{background-color: #fff; padding: 70px; border-radius: 10px; margin-bottom: 50px;}
    .text-wrap .text-box .content div .tit{font-size: 30px; font-weight: 700;}
    .text-wrap .text-box .content div .te{font-weight: 300; margin: 30px 0; line-height: 1.3;}
    .text-wrap .text-box .content div .tex{text-align: left;}
    .text-wrap .text-box .content div img{width: 50%;}
+
+   @media screen and (max-width:1000px){
+    .text-wrap .text_list ul{font-size: 24px; padding: 0 34%;}
+   }
+   @media screen and (max-width:870px){
+    .text-wrap .text_list p{font-size: 33px;}
+    .text-wrap .text_list ul{font-size: 24px; padding: 0 32%; line-height: 1.7;}
+   }
+   @media screen and (max-width:780px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 32%;}
+   }
+   @media screen and (max-width:700px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 28%;}
+   }
+   @media screen and (max-width:600px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 18%;}
+   }
    
 </style>
 
@@ -52,15 +72,25 @@
                 </div>
             </div>
         </div>
+        <div class="text_list">
+            <p>목 &nbsp;차</p>
+            <ul>
+                <li><a href="#multi_text_01">1. 단체문자발송</a></li>
+                <li><a href="#multi_text_02">2. 단체 및 대량문자 샘플</a></li>
+                <li><a href="#multi_text_03">3. 문자온 문자사이트 장점 및 혜택</a></li>
+                <li><a href="#multi_text_04">4. 문자사이트 선택의 5가지 기준</a></li>
+                <li><a href="#multi_text_05">5. 문자온 이벤트</a></li>
+            </ul>
+        </div>
         <div class="multi-text-box text-box">
 			<div class="content">
-                <div>
+                <div id="multi_text_01">
                     <p class="tit">단체문자발송</p>
                     <p class="te">휴대폰으로도 단체문자를 보낼 수 있지만, 한 번에 보낼 수 있는 단체 문자의 수가 제한됩니다. 보통은 수백명 이하이며, 갤럭시의 경우 인원수 제한을 초과하는 경우 메시지가 전송되지 않을 수 있습니다. 또한, 인터넷 문자사이트를 이용하여 대량 전송하는 것보다 요금 또한 매우 비쌉니다.</p>
                     <p class="te">문자온은 단체문자 및 대량문자 전송을 위한 특화된 인터넷 문자사이트로 별도의 프로그램 설치 없이 컴퓨터로 단체 및 대량 문자 전송이 가능하며, 특정문구 일괄변환, 무료 문자 포토에디터, 그림문자 맞춤제작, 주소록 등록 무료 대행, 080 수신거부 무료 제공, 문자메시지 내 제목 및 약도 추가, 자동화 기반 비용처리 등이 가능하여 누구나 쉽고 편리하게 문자를 대량으로 발송할 수 있습니다.</p>
                     <img src="./img/text_send_08.jpg" alt="단체문자발송">
                 </div>
-                <div>
+                <div id="multi_text_02">
                     <p class="tit">단체 및 대량문자 샘플</p>
                     <p class="te">
                         인터넷문자 사이트 문자온은 대량문자·단체문자 발송을 위한 다양한 문자 샘플을 무료로 제공합니다.
@@ -70,7 +100,7 @@
                     </p>
                     <img src="./img/text_sample_02.jpg" alt="문자발송 샘플">
                 </div>
-                <div>
+                <div id="multi_text_03">
                     <p class="tit">문자온 문자사이트 장점 및 혜택</p>
                     <p class="te tex">
                         o 대량 및 단체문자 일괄 발송 : 별도의 프로그램 설치 없이 웹문자로 100만건 이상 끊김 없는 대량 전송 가능 <br>
@@ -102,7 +132,7 @@
                     </p>
                     <img src="./img/text_send_09.jpg" alt="장점 및 혜택">
                 </div>
-                <div>
+                <div id="multi_text_04">
                     <p class="tit">문자사이트 선택의 5가지 기준</p>
                     <p class="te tex">
                         o 속도, 성능, 기능, 보안, 가격이 보장되는가?
@@ -124,7 +154,7 @@
                     </p>
                     <img src="./img/text_send_10.jpg" alt="5가지 기준">
                 </div>
-                <div>
+                <div id="multi_text_05">
                     <p class="tit">문자온 이벤트</p>
                     <p class="te tex">
                         o 첫결제 국내 최저가(단문 : 7.5원, 장문 : 32원, 그림 : 59원) 이벤트 진행 중!

src/main/webapp/publish/publish_text/publish_text/send_text.html

@@ -32,11 +32,31 @@
 </head>
 <style>
     html{min-width: 540px;}
+   .text-wrap .text_list{max-width: 1320px; width: calc(100% - 60px); border: 6px solid #f3f6fb; border-radius: 20px; overflow: hidden; margin: 0 auto; margin-top: 73px; padding: 2% 0;}
+   .text-wrap .text_list p{text-align: center; font-weight: 700; font-size: 39px; margin-bottom: 2%; letter-spacing: -1.5px;}
+   .text-wrap .text_list ul{padding: 0 36%; font-size: 28px; font-weight: 400; white-space: nowrap; line-height: 49px; letter-spacing: -1.5px;}
    .text-wrap .text-box{margin-top: 80px; text-align: center;}
    .text-wrap .text-box .content div{background-color: #fff; padding: 70px; border-radius: 10px; margin-bottom: 50px;}
    .text-wrap .text-box .content div .tit{font-size: 30px; font-weight: 700;}
    .text-wrap .text-box .content div .te{font-weight: 300; margin: 30px 0; line-height: 1.3;}
    .text-wrap .text-box .content div img{width: 50%;}
+
+   @media screen and (max-width:1000px){
+    .text-wrap .text_list ul{font-size: 24px; padding: 0 34%;}
+   }
+   @media screen and (max-width:870px){
+    .text-wrap .text_list p{font-size: 33px;}
+    .text-wrap .text_list ul{font-size: 24px; padding: 0 32%; line-height: 1.7;}
+   }
+   @media screen and (max-width:780px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 32%;}
+   }
+   @media screen and (max-width:700px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 28%;}
+   }
+   @media screen and (max-width:600px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 18%;}
+   }
    
 </style>
 
@@ -51,19 +71,29 @@
                 </div>
             </div>
         </div>
+        <div class="text_list">
+            <p>목 &nbsp;차</p>
+            <ul>
+                <li><a href="#send_text_01">1. 인터넷으로 문자보내기</a></li>
+                <li><a href="#send_text_02">2. 컴퓨터로 문자보내기</a></li>
+                <li><a href="#send_text_03">3. 단체문자보내기 주의할 점</a></li>
+                <li><a href="#send_text_04">4. 번호도용방지서비스?</a></li>
+                <li><a href="#send_text_05">5. 광고문자/홍보문자 보내기 주의할 점</a></li>
+            </ul>
+        </div>
         <div class="multi-text-box text-box">
 			<div class="content">
-                <div>
+                <div id="send_text_01">
                     <p class="tit">인터넷으로 문자보내기</p>
                     <p class="te">갤럭시나 아이폰 등 휴대폰으로 문자를 발송하는 것이 아닌, PC나 컴퓨터 등 인터넷 문자사이트를 통해 문자를 단체로 대량 발송하는 행위</p>
                     <img src="./img/text_send.jpg" alt="문자보내기">
                 </div>
-                <div>
+                <div id="send_text_02">
                     <p class="tit">컴퓨터로 문자보내기</p>
                     <p class="te">인터넷문자 사이트를 통해 문자발송하는 행위 중 특히 컴퓨터(PC)를 통해 문자를 발송하는 행위</p>
                     <img src="./img/text_send_02.jpg" alt="컴퓨터로 문자보내기">
                 </div>
-                <div>
+                <div id="send_text_03">
                     <p class="tit">단체문자보내기 주의할 점</p>
                     <p class="te" style="text-align: left;">
                         1. 문자사이트에서 인터넷으로 단체문자를 보낼 때에는 회신번호(발신번호)로 사용하는 번호가 이동통신사 “번호도용방지서비스”에 가입되어 있는지 확인하는 것이 중요합니다. 해당 서비스에 가입되어 있을 경우 문자발송사이트를 통해 문자메세지를 발송하실 수 없습니다.  
@@ -76,12 +106,12 @@
                     </p>
                     <img src="./img/text_send_03.jpg" alt="단체문자보내기 주의점">
                 </div>
-                <div>
+                <div id="send_text_04">
                     <p class="tit">번호도용방지서비스?</p>
                     <p class="te">이동통신사 번호도용 문자차단 서비스는 웹에서 발송되는 스미싱, 스팸문자에 내 번호가 회신번호로 악용되는 것을 방지해주는 서비스로 해당 서비스에 가입되어 있는 경우 인터넷을 통해 본인 휴대폰 번호로 문자 발송이 자동 차단되게 됩니다. 이동통신사에 '번호도용 문자차단서비스' 서비스 해지를 요청할 경우 정상 발송까지 3~7일 정도가 소요됩니다.</p>
                     <img src="./img/text_service.jpg" alt="번호도용방지">
                 </div>
-                <div>
+                <div id="send_text_05">
                     <p class="tit">광고문자/홍보문자 보내기 주의할 점</p>
                     <p class="te">홍보 및 광고문자의 경우에는 광고성 문자규정을 반드시 준수하여야 합니다. 문자온은 문자전송 화면에 광고문자 필수 표기사항 자동입력 기능 및 광고문자 전송 규정 안내를 제공하고 있으므로 규정에 맞게 편리하게 이용하실 수 있습니다.</p>
                 </div>

src/main/webapp/publish/publish_text/publish_text/text_send.html

@@ -32,18 +32,39 @@
 </head>
 <style>
     html{min-width: 540px;}
+   .text-wrap .text_list{max-width: 1320px; width: calc(100% - 60px); border: 6px solid #f3f6fb; border-radius: 20px; overflow: hidden; margin: 0 auto; margin-top: 73px; padding: 2% 0;}
+   .text-wrap .text_list p{text-align: center; font-weight: 700; font-size: 39px; margin-bottom: 2%; letter-spacing: -1.5px;}
+   .text-wrap .text_list ul{padding: 0 36%; font-size: 28px; font-weight: 400; white-space: nowrap; line-height: 49px; letter-spacing: -1.5px;}
    .text-wrap .text-box{margin-top: 80px; text-align: center;}
    .text-wrap .text-box .content div{background-color: #fff; padding: 70px; border-radius: 10px; margin-bottom: 50px;}
    .text-wrap .text-box .content div .tit{font-size: 30px; font-weight: 700;}
    .text-wrap .text-box .content div .te{font-weight: 300; margin: 30px 0; line-height: 1.3;}
    .text-wrap .text-box .content div img{width: 50%;}
+
+   @media screen and (max-width:1000px){
+    .text-wrap .text_list ul{font-size: 24px; padding: 0 34%;}
+   }
+   @media screen and (max-width:870px){
+    .text-wrap .text_list p{font-size: 33px;}
+    .text-wrap .text_list ul{font-size: 24px; padding: 0 32%; line-height: 1.7;}
+   }
+   @media screen and (max-width:780px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 32%;}
+   }
+   @media screen and (max-width:700px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 28%;}
+   }
+   @media screen and (max-width:600px){
+    .text-wrap .text_list ul{font-size: 22px; padding: 0 18%;}
+   }
+
    
 </style>
 
 <body>
     <div class="multi-text-wrap text-wrap">
         <div class="banner-wrap">
-            <a href="https://www.munjaon.co.kr" class="logo"><img src="http://www.munjaon.co.kr/publish/images/CI.png" alt="배너로고"></a>
+            <a href="https://www.munjaon.co.kr"  class="logo"><img src="http://www.munjaon.co.kr/publish/images/CI.png" alt="배너로고"></a>
             <div class="banner">
                 <img src="/publish/publish_adv/img/banner.jpg" alt="배너">
                 <div class="title">
@@ -51,14 +72,26 @@
                 </div>
             </div>
         </div>
+        <div class="text_list">
+            <p>목 &nbsp;차</p>
+            <ul>
+                <li><a href="#text_send_01">1. 단체문자 발송</a></li>
+                <li><a href="#text_send_02">2. 문자발송 샘플</a></li>
+                <li><a href="#text_send_03">3. 문자 예약발송</a></li>
+                <li><a href="#text_send_04">4. 문자발송 실패</a></li>
+                <li><a href="#text_send_05">5. 문자발송 대기</a></li>
+                <li><a href="#text_send_06">6. 문자발송 성공이나 수신 안되는 경우</a></li>
+                <li><a href="#text_send_07">7. 문자발송사이트 문자온</a></li>
+            </ul>
+        </div>
         <div class="multi-text-box text-box">
 			<div class="content">
-                <div>
+                <div id="text_send_01">
                     <p class="tit">단체문자발송</p>
                     <p class="te">단체문자 및 대량문자전송 사이트 문자온을 통해 아주 쉽고 간단하게 문자를 발송할 수 있습니다. 문자전송 메뉴에는 문자를 대량발송하기 위한 광고문자 규정 문구 자동 입력 기능, 받는 사람마다 내용을 달리할 수 있는 특정문구 일괄변환 기능, 문자내용을 저장해두고 사용할 수 있는 내문자함 기능, 사진(그림)을 편집할 수 있는 포토에디터 기능, 자주 사용하는 수신번호를 관리할 수 있는 주소록 불러오기 기능 및 엑셀 불러오기 기능, 다양한 문자샘플 및 지도/약도URL 기능 등 대량문자발송을 위한 다양한 기능을 무료로 제공하고 있습니다.</p>
                     <img src="./img/text_send_04.jpg" alt="단체문자발송">
                 </div>
-                <div>
+                <div id="text_send_02">
                     <p class="tit">문자발송 샘플</p>
                     <p class="te">
                         웹문자 사이트 문자온은 대량문자·단체문자 발송을 위한 다양한 SMS/LMS/MMS 샘플을 무료로 제공하고 있습니다.
@@ -68,29 +101,29 @@
                     </p>
                     <img src="./img/text_sample.jpg" alt="문자발송 샘플">
                 </div>
-                <div>
+                <div id="text_send_03">
                     <p class="tit">문자 예약발송</p>
                     <p class="te">
                         문자온은 단체문자전송을 위한 예약문자 발송 기능을 제공하고 있습니다. 문자를 발송할 날짜, 시간 및 분할 횟수를 지정하여 예약할 경우 해당 시간에 맞춰 문자가 자동발송되며, 예약취소 및 변경이 가능합니다. 단, 예약 취소는 문자예약전송 시간이 5분 이상 남아있을 경우에만 가능합니다.
                     </p>
                     <img src="./img/text_send_05.jpg" alt="문자 예약발송">
                 </div>
-                <div>
+                <div id="text_send_04">
                     <p class="tit">문자발송 실패</p>
                     <p class="te">수신자의 휴대폰 번호 변경, 서비스 일시 정지, 발신자의 번호도용방지서비스 가입 등 다양한 사유가 존재하며 발송에 실패한 문자메시지에 대해서는 해당요금 전액 잔액으로 반환(환불)됩니다.</p>
                     <img src="./img/text_fail.jpg" alt="문자발송 실패">
                 </div>
-                <div>
+                <div id="text_send_05">
                     <p class="tit">문자발송 대기</p>
                     <p class="te">수신자의 휴대폰이 꺼져있거나, 수신지역 이탈 등 다양한 사유가 존재하며 대기 상태일 경우 최대 72시간까지 문자발신을 시도(통신사마다 1~3일 소요)합니다. 최종적으로 수신자가 문자를 받을 수 없을 경우 실패 처리되며 해당요금은 잔액으로 반환됩니다.</p>
                     <img src="./img/text_send_06.jpg" alt="문자발송 대기">
                 </div>
-                <div>
+                <div id="text_send_06">
                     <p class="tit">문자발송 성공이나 수신 안되는 경우</p>
                     <p class="te">한국인터넷진흥원 불법스팸대응센터에서 스팸종합대책을 마련함에 따라, 각 이동통신사는 스팸차단서비스(스팸필터링서비스)를 운영하고 있습니다. 이동통신사는 각각 보유한 알고리즘을 지속적으로 업데이트 하면서 자동으로 스팸문자를 판단하여 해당 통신사 스팸보관함에 보관합니다. 이 때 문자 발송은 성공한 것으로 처리하기 때문에 정상과금 처리가 됩니다. 따라서 정상적으로 문자를 발송하였는데도 수신자가 받지 못했을 경우에는 수신자를 통해 스팸차단서비스에 의해 차단되었는지를 확인해 보시길 바랍니다.</p>
                     <img src="./img/text_send_07.jpg" alt="성공이나 수신 안되는 경우">
                 </div>
-                <div>
+                <div id="text_send_07">
                     <p class="tit">문자발송사이트 문자온</p>
                     <p class="te">문자비용이 고민된다면 문자온의 첫결제이벤트를 통해 웹문자를 발송해보세요. 최저 문자요금 7.5원(부가세 별도)! 파격 특가를 지금 만나실 수 있습니다. </p>
                 </div>