0729 og 태그추가 등 (이미지, 설명등)

+구글 자동번역 영문으로 바꿧을때 잘리는 부분 해결 (맵마커,팝업스크롤)
fold6 · Jul 29, 2024 · 0ccfc5b · 0ccfc5b
1 parent 638cd23
commit 0ccfc5b
Show file tree

Hide file tree

Showing 8 changed files with 8,690 additions and 8,282 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+img/~ai-1e409b80-9da2-4be5-a21b-694477db1e7c_.tmp
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 <br>
 
 ## 기능 및 특징
-- 드림캐쳐 본사를 기준으로 펼쳐지는 주변 맵에 '드림캐쳐 투어'
+- 드림캐쳐 본사를 기준으로 펼쳐지는 '드림캐쳐 투어'
 - 장소이름을 클릭하여 영업시간, 연락처 등의 '장소정보'를 열람
 - 컨텐츠란을 클릭하여 유튜브영상 등의 '촬영된 컨텐츠'를 열람
 - 멤버 별 방문장소 필터링 버튼으로 원하는 장소만 표기가능

diff --git a/comment.html b/comment.html
@@ -5,9 +5,19 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- sns 공유 -->
+  <meta property="og:site_name" content="DreamPlace">
+  <meta property="og:title" content="DreamPlace">
+  <meta property="og:description" content="드림캐쳐가 방문한 장소를 한 눈에!">
+  <meta property="og:type" content="website">
+  <meta property="og:image" content="img/sns_thum.png">
+
+  <!-- 파비콘 -->
   <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
   <link rel="icon" href="img/favicon.ico" type="image/x-icon">
   <title>방명록(Guestbook)✍️</title>
+
   <!-- CSS  -->
   <link href="css/font.css" rel="stylesheet">
   <link href="css/reset.css" rel="stylesheet">
@@ -51,6 +61,7 @@
   #disqus_thread a video {
     max-height: 100px !important;
   }
+
   /* Tb. Ver. */
   @media (max-width:768px) {
 

diff --git a/css/index.css b/css/index.css
@@ -124,6 +124,7 @@ header {
 .overlay_info a strong {
     padding: 10px 24px;
 }
+
 .overlay_info a strong.def_place {
     background: url(../img/DC_cate_icon/icon_dc.png?ver) no-repeat left center;
     background-size: 19px;
@@ -322,6 +323,7 @@ header {
     text-align: center;
     z-index: 999;
     height: 465px;
+    /* height: 100vh; */
 }
 
 .guide_slide_wrap div:first-child {
@@ -340,9 +342,7 @@ swiper-container {
 swiper-slide {
     text-align: center;
     font-size: 18px;
-    /*     display: flex;
-    justify-content: center;
-    align-items: center; */
+    overflow: auto;
 }
 
 /* pagination 수정 */
@@ -381,6 +381,8 @@ swiper-slide {
     font-weight: 900;
     color: #333;
     margin-bottom: 10px;
+    white-space: pre-line;
+    padding: 0 15px;
 }
 
 .col_big {
@@ -393,6 +395,7 @@ swiper-slide {
     color: #666;
     line-height: 20px;
     margin-bottom: 20px;
+    padding: 0 15px;
 }
 
 .g_img_wrap {

diff --git a/css/reset.css b/css/reset.css
@@ -3,6 +3,7 @@
 * {
     margin: 0;
     padding: 0;
+    outline: none !important;
 }
 
 body,
@@ -11,6 +12,11 @@ html {
     margin: 0 auto;
     background-color: #f9f9f9;
     -webkit-tap-highlight-color: transparent;
+    -ms-overflow-style: none;
+}
+
+::-webkit-scrollbar {
+    display: none;
 }
 
 li {
@@ -39,10 +45,4 @@ p {
 
 img {
     border: 0;
-}
-
-
-* {
-    outline: none !important;
-}
-
+}
diff --git a/img/DC_map_ai.ai b/img/DC_map_ai.ai
diff --git a/img/sns_thum.png b/img/sns_thum.png
diff --git a/index.html b/index.html
@@ -2,10 +2,19 @@
 <html lang="ko">
 
 <head>
-    <title>Dream Place</title>
+    <title>DreamPlace</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- sns 공유 -->
+    <meta property="og:site_name" content="DreamPlace">
+    <meta property="og:title" content="DreamPlace">
+    <meta property="og:description" content="드림캐쳐가 방문한 장소를 한 눈에!">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="img/sns_thum.png">
+
+
+    <!-- 파비콘 -->
     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
     <link rel="icon" href="img/favicon.ico" type="image/x-icon">
 
@@ -47,7 +56,7 @@
 <body>
     <header>
         <p class="header_title">
-            Dream Place
+            DreamPlace
         </p>
         <p class="header_right">
             <img src="img/DC_icon/howto_btn.png" alt="guide_btn">
@@ -83,7 +92,9 @@
             <!-- 1 -->
             <swiper-slide>
                 <div class="guide_box">
-                    <p class="guide_tit"><span class="col_big">DreamPlace</span> 로 <br> 드캐투어 가보자고!</p>
+                    <!-- 영문 번역시 줄바꿈 이슈 때문에 '.guide_tit' 만 pre로 변경 (줄바꿈 enter 그대로 적용) -->
+                    <p class="guide_tit"><span class="col_big">DreamPlace</span> 로
+                        드캐투어 가보자고!</p>
                     <p class="sub_text">DreamPlace는 드림캐쳐가<br>방문했던 장소를 표기해주는 지도에요</p>
                     <div class="g_img_wrap">
                         <img src="img/DC_guide/g1.png" alt="guide_img"><img>
@@ -94,8 +105,8 @@
             <!-- 2 -->
             <swiper-slide>
                 <div class="guide_box">
-                    <p class="guide_tit"><span class="col_big">장소정보</span>와 <br> <span class="col_big">컨텐츠</span>를 볼 수
-                        있어요
+                    <p class="guide_tit"><span class="col_big">장소정보</span>와 
+                        <span class="col_big">컨텐츠</span>를 볼 수 있어요
                     </p>
                     <p class="sub_text">장소이름 클릭 시 정보(영업시간 등)를,<br>컨텐츠 클릭 시 드림캐쳐의 모습을 볼 수 있어요</p>
                     <div class="g_img_wrap">
@@ -107,7 +118,8 @@
             <!-- 3 -->
             <swiper-slide>
                 <div class="guide_box">
-                    <p class="guide_tit"><span class="col_big">멤버 별</span> 방문장소<br><span class="col_big">필터링!</span></p>
+                    <p class="guide_tit"><span class="col_big">멤버 별</span> 방문장소
+                        <span class="col_big">필터링!</span></p>
                     <p class="sub_text">각 멤버별로 방문한 장소를 필터링 해서<br>원하는 장소만 볼 수 있어요!</p>
                     <div class="g_img_wrap">
                         <img src="img/DC_guide/g3.png" alt="guide_img"><img>
@@ -118,8 +130,8 @@
             <!-- 4 -->
             <swiper-slide>
                 <div class="guide_box">
-                    <p class="guide_tit"><span class="col_big">방명록</span> 에서<br> <span class="col_big">InSomnia
-                            Talk!</span>
+                    <p class="guide_tit"><span class="col_big">방명록</span> 에서
+                        <span class="col_big">InSomnia Talk!</span>
                     </p>
                     <p class="sub_text">방문후기 및 지도 표기요청 등<br>로그인 없이 다양한 이야기를 할 수 있어요!</p>
                     <div class="g_img_wrap">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@

		img/~ai-1e409b80-9da2-4be5-a21b-694477db1e7c_.tmp