1<!doctype html> 2<html lang="ko"> 3 <head> 4 <!-- Google Tag Manager --> 5
5<script>
vendor: 343 bytes, lines 5-9
5(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 6 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 7 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 8 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 9 })(window,document,'script','dataLayer','
9GTM-52G86BP5
vendor: 3 bytes, line 9
9');
9</script>
9 10 <!-- End Google Tag Manager --> 11 <meta charset="UTF-8" /> 12 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 13 <title>TabTalk · í¡ì´ì í¨ê»íë ì§ì¤ íì´ë¨¸</title> 14 <link rel="canonical" href="https://tabtalk.co.kr/" /> 15 <meta name="description" content="ìíë ìê°ì ì í´ ì§ì¤íë ì¹ íì´ë¨¸ìì. 25ë¶ ì§ì¤í ëë§ë¤ í¡ì´ íë¶ì´ ìë¼ê³ , ì¹´ë©ë¼ë íì¥ íë¡ê·¸ë¨ì ì°ê²°íë©´ ì리·ìì ì´ë ë¤ë¥¸ í ì´ëë ì±ê¸¸ ì ìì´ì." /> 16 <link rel="preconnect" href="https://cdn.jsdelivr.net" /> 17 <link rel="stylesheet" as="style" crossorigin 18 href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" /> 19 <!-- ëìì¸ í í°(ì·모ì) â ì±Â·ë¸ë¡ê·¸Â·ê°ì´ëììë ê°ì íì¼ì ì´ë¤ --> 20 <link rel="stylesheet" href="/tokens.css" /> 21 <style> 22 @font-face { 23 font-family: "GmarketSans"; 24 src: url("/assets/gmarket-bold-latin.woff2") format("woff2"); 25 font-weight: 700; 26 font-style: normal; 27 /* optional: ìì²´ê° ì ë ëì°©íë©´ ì°ê³ , ë¦ì¼ë©´ ì´ë² íë©´ì ê·¸ë¥ ê¸°ë³¸ ìì²´ë¡ ëë¤. 28 swapì¼ë¡ ëë©´ ë¦ê² ëì°©í ìì²´ê° ë¡ê³ íì ë°ê¿ í¤ë ì ì²´ê° ë°ë¦°ë¤(0.0075 â 0.0803). 29 preloadë¡ ê°ì ì¶ì²ìì 미리 ë°ì¼ë¯ë¡ ê±°ì íì ì ë ëì°©íê³ , í ë² ë°ì¼ë©´ ìºìëë¤. */ 30 font-display: optional; 31 } 32 /* ìì tokens.cssì í í°ì´ ë¨ì¼ ì¶ì²ë¤. ìëë 기존 ì´ë¦ì í í°ì ì´ì´ë¶ì¸ ê² â 33 íë©´ 곳곳ì var(--blue) ê°ì í¸ì¶ì ê·¸ëë¡ ëë©´ì ê°ë§ í í°ì ë°ë¥´ê² íë¤. 34 ìë¡ ì°ë ê·ì¹ì --color-* í í°ì ì§ì ì´ë¤. */ 35 :root { 36 --blue: var(--color-primary); 37 --blue-dark: var(--color-primary-strong); 38 --blue-soft: var(--color-primary-soft); 39 --gray900: var(--color-text-strong); 40 --gray700: #4e5968; /* 본문 ê°ì¡° â bodyì strong ì¬ì´ */ 41 --gray600: var(--color-text-body); 42 --gray200: var(--color-border); 43 --gray100: #f2f4f6; 44 --bg: var(--color-bg-page); 45 --white: var(--color-surface); 46 --radius: var(--radius-card); 47 --shadow: var(--shadow-card); 48 } 49 /* iOS·ì¸ì± ë¸ë¼ì°ì ê° ë³¸ë¬¸ ê¸ì를 ììë¡ í¤ì°ë ê²ì ë§ëë¤ */ 50 html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } 51 button, input, textarea, select { font: inherit; } 52 * { box-sizing: border-box; margin: 0; padding: 0; } 53 body { 54 font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 55 color: var(--gray900); background: var(--bg); line-height: 1.6; 56 -webkit-font-smoothing: antialiased; 57 word-break: keep-all; /* íê¸ì´ ë¨ì´ ì¤ê°ìì ëê¸°ì§ ìê³ ì´ì ë¨ìë¡ ì¤ë°ê¿ */ 58 overflow-wrap: break-word; 59 } 60 h1, h2, .feature-card h3 { text-wrap: balance; } 61 p, li, .mascot .desc { text-wrap: pretty; } 62 /* ì§§ì ìë´ ë¬¸ë¨ì balanceë¡ â ì¤ ê¸¸ì´ë¥¼ ê³ ë¥´ê² ë§ì¶° ì´ì ì´ ì´ì ì©¡íê² ëê¸°ì§ ìê² */ 63 .feature-summary { text-wrap: balance; } 64 a { text-decoration: none; color: inherit; } 65 .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } 66 /* ââ ë²í¼: ìí ë³ ì¸ ì¢ ë¥ë§(Primary / Secondary / Tertiary) ââ 67 ê·ê²©ì ê³µíµ, ìë§ ìí ì´ ì íë¤. ê°ì ì¤ìëë©´ íë©´ì´ ë¬ë¼ë ê°ì ìì´ë¤. 68 모ëë³(ë³´ë¼Â·ë¯¼í¸)ë¡ ë²í¼ ìì ë°ê¾¸ì§ ìëë¤. */ 69 .btn { 70 display: inline-flex; align-items: center; justify-content: center; 71 gap: var(--btn-gap); 72 min-height: var(--btn-height); padding: 0 var(--btn-padding-x); 73 border: 1px solid transparent; border-radius: var(--radius-btn); 74 font-family: inherit; font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); 75 line-height: 1.2; cursor: pointer; white-space: nowrap; 76 transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; 77 } 78 .btn svg, .btn img { width: var(--btn-icon-size); height: var(--btn-icon-size); flex: 0 0 auto; } 79 /* í¬ì»¤ì¤ë ìì´ ìëë¼ ë§ì¼ë¡ ìë¦°ë¤ â í¤ë³´ë ì¬ì©ììê²ë§ ë³´ì´ê² */ 80 .btn:focus-visible, .kakao-ch:focus-visible { 81 outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); 82 } 83 .btn:disabled, .btn[aria-disabled="true"] { 84 background: var(--color-disabled); border-color: transparent; color: #fff;
85 cursor: not-allowed; pointer-events: none; 86 } 87 /* Primary â 주ì íëìë§ */ 88 .btn-primary { background: var(--color-primary-strong); color: #fff; } 89 .btn-primary:hover { background: var(--color-primary-hover); } 90 .btn-primary:active { background: var(--color-primary-active); } 91 /* Secondary â ë³´ì¡° íë */ 92 .btn-secondary { 93 background: var(--color-surface); border-color: var(--color-border); 94 color: var(--gray700); 95 } 96 .btn-secondary:hover { border-color: var(--color-border-hover); color: var(--color-text-strong); } 97 .btn-secondary:active { background: var(--color-primary-soft); } 98 /* í° CTA â íì´ë¡Â·ë§ë¬´ë¦¬ì²ë¼ íë©´ì 주 íë ì리ìë§. ìí ·ìì Primary ê·¸ëë¡ */ 99 .btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; } 100 /* Tertiary â 배경·í ë리 ìì, hoverììë§ ì°í íë */ 101 .btn-tertiary { background: none; border-color: transparent; color: var(--gray700); } 102 .btn-tertiary:hover { background: var(--color-primary-soft); color: var(--color-primary-strong); } 103 .btn-tertiary:active { background: var(--color-primary-soft); color: var(--color-primary-active); } 104 105 /* nav */ 106 /* ì¤í¬ë¡¤ë° ì리 ìì ìì½ â ì±ê³¼ ëì¼. íì´ì§ë¥¼ ì¤ê° ë ì¤í¬ë¡¤ë° ì ë¬´ë¡ 107 í¤ë ë¡ê³ ê° ì¢ì°ë¡ íì§ ìëë¤ */ 108 html { scrollbar-gutter: stable; } 109 @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } 110 .nav { position: sticky; top: 0; z-index: 20; background: rgba(247,249,251,.85); 111 backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--gray200); } 112 .nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; 113 max-width: 1120px; /* í¤ë í â ì íì´ì§ ê³µíµ(ì±ê³¼ ëì¼ 1120px + ì¢ì° 24px) */ } 114 .brand { display: flex; align-items: center; gap: 8px; font-size: 20px; 115 font-family: "GmarketSans", "Pretendard Variable", Pretendard, sans-serif; 116 font-weight: 700; letter-spacing: -0.031em; color: #191f28; 117 line-height: 1.2; /* ë¡ê³ íê° â ì íì´ì§ ê³µíµ(ì±ê³¼ ëì¼) */ } 118 /* í¤ë ë¡ê³ ìì´ì½ â íë¹ì½ê³¼ ê°ì 그림ì ì¨ì íâí¤ë ì¸ì§ë¥¼ ìëë¤ */ 119 .brand-mark { width: 24px; height: 24px; border-radius: 7px; object-fit: contain; flex: 0 0 24px; } 120 .brand .dot { width: 30px; height: 30px; border-radius: 9px; background: var(--blue); 121 color: #fff; display: grid; place-items: center; font-size: 16px; } 122 /* í¤ë ì°ì¸¡ â ì§ì¤ ê°ì´ë íì´ì§ì ëì¼: ë´ë°±í í ì¤í¸ ë§í¬(ê°ê²© 18px). */ 123 .nav-links { display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 700; } 124 .nav-links a { color: var(--gray600); } 125 .nav-links a:hover { color: var(--gray900); } 126 /* ì¹´ì¹´ì¤í¡ ì±ë ì¶ê° â ê³µì ë¡ê³ ë ë¸ëë ê·ì ì ë ¸ëì ìì¸. */ 127 .kakao-ch { display: inline-flex; align-items: center; justify-content: center; 128 width: 44px; height: 44px; border-radius: 12px; 129 cursor: pointer; transition: background .15s ease; } 130 .kakao-ch:hover { background: var(--gray100); text-decoration: none; } 131 .kakao-ch img { width: 30px; height: 30px; display: block; } 132 /* ì¸ì¤íê·¸ë¨ â ì¹´ì¹´ì¤ ì±ëê³¼ ê°ì ê·ê²©ì ìì´ì½ ë§í¬. ê³µì ë¡ê³ ë¼ ìì ê·¸ëë¡ ì´ë¤. */ 133 .insta-ch { display: inline-flex; align-items: center; justify-content: center; 134 width: 44px; height: 44px; border-radius: 12px; 135 cursor: pointer; transition: background .15s ease; } 136 .insta-ch:hover { background: var(--gray100); text-decoration: none; } 137 .insta-ch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); } 138 .insta-ch img { width: 30px; height: 30px; display: block; border-radius: 8px; } 139 /* ìì´ì½ ë²í¼ì ë르기 í¸íëë¡ 44px íí¸ ììì ì ì§íë¤. ê·¸ë°ë° ìì ë ë¡ê³ ë 140 30pxì´ë¼ ì¢ì°ë¡ 7pxì© 'ë³´ì´ì§ ìë ì¬ë°±'ì´ ì겨, ëìë ìì´ì½âìì´ì½ 32px· 141 ìì´ì½âê¸ì 25pxë¡ ë²ì´ì ¸ ë³´ì¸ë¤(ê¸ìë¼ë¦¬ë 18px). ê·¸ë§í¼ ìì ì¬ë°±ì¼ë¡ ë¹ê²¨ 142 ìì´ì½ ë ê°ë í 묶ìì¼ë¡ ë¶ì´ê³ (10px), ê¸ììë 리ë¬ì ë§ì¶ë¤(16px). 143 íí¸ ììì ê·¸ëë¡ë¼ ì ê·¼ì±(ìµì 44px)ìë ìí¥ì´ ìë¤. */ 144 .insta-ch { margin-right: -22px; } 145 .kakao-ch { margin-right: -9px; } 146 /* ì견 ë³´ë´ê¸° â ë§í¬ì ê°ì ì체·ìì ë²í¼(í ë리·배경 ìì) */ 147 .nav-feedback { border: 0; background: none; padding: 0; font-family: inherit; 148 font-size: inherit; font-weight: inherit; line-height: inherit; 149 color: var(--gray600); cursor: pointer; white-space: nowrap; } 150 .nav-feedback:hover { color: var(--gray900); } 151 /* ì¢ì í(ì¹´ì¹´ì¤ ì¸ì±ë¸ë¼ì°ì ë±): í¤ëê° í ì¤ì ì ë¤ì´ê°ë©´ 'ì§ì¤ ê°ì´ë'ê° 152 ë ì¤ë¡ 쪼ê°ì§ë©° ë린ë¤. ê°ê²©Â·í¨ë©ì ì¤ì´ê³ ë§í¬ë¥¼ nowrapë¡, CTA를 ìê² íë¤. */ 153 @media (max-width: 560px) { 154 .wrap { padding: 0 16px; } 155 /* ì§ì¤ ê°ì´ë íì´ì§ì ëì¼ â ì¢ìë í ì
155¤ì ë¤ì´ê°ë¤ */ 156 .nav-links { gap: 12px; font-size: 14px; } 157 } 158 /* í¤ë CTA를 ëº ë¤ë¡ë ì¹´ì¹´ì¤ ì±ë·ì§ì¤ ê°ì´ë·ì견 ë³´ë´ê¸° ì ì´ 360pxê¹ì§ í ì¤ì ë¤ì´ê°ë¤ 159 (íì 337px). 345px ìëììë§ 'ì§ì¤ ê°ì´ë'를 ê°ì¶ë¤ â ê°ì´ëë íì´ë¡ ìë ì¹´ëì 160 í¸í°ììë ê° ì ìë¤. */ 161 @media (max-width: 344px) { 162 .nav-links > a[href="/blog"] { display: none; } 163 } 164 165 /* hero */ 166 .hero { padding: 72px 0 40px; } 167 .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } 168 .eyebrow { display: inline-block; background: var(--blue-soft); color: var(--blue-dark); 169 font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 999px; margin-bottom: 20px; } 170 .hero h1 { font-size: 46px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; } 171 .hero h1 .accent { color: var(--blue); } 172 .hero p.lead { margin: 18px 0 12px; font-size: 18px; color: var(--gray700); max-width: none; } 173 .hero-body { margin: 0 0 24px; font-size: 15px; color: var(--gray600); line-height: 1.7; max-width: none; } 174 /* íì´ë¡ CTA â ì 목 ìì´ ìëë¼ ì½ë íë¦ëë¡ ê¸°ë¥ ì¤ëª ìëì ì¸ë¡ë¡ ëë¤. 175 (ì 목 ìì ë¶ì´ë©´ ì 목 ì¼ë¶ì²ë¼ ì½íê³ íë¦ì´ ë긴ë¤) 176 absolute·transform·ìì margin ìì´ ì¼ë° 문ì íë¦ì ê·¸ëë¡ ëëë¤. */ 177 .hero-cta { display: inline-flex; min-height: 48px; min-width: 176px; 178 padding: 0 26px; font-size: 16px; font-weight: 600; border-radius: var(--radius-btn); } 179 .hero-cta .btn-ico { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; } 180 /* ë림ì í¬ê¸°ê° ìëë¼ ìÂ·ë¯¸ì¸ ì´ëì¼ë¡ â ë ì´ììì´ íë¤ë¦¬ì§ ìê² */ 181 .hero-cta:active { transform: translateY(1px); } 182 .hero-note { margin-top: 14px; font-size: 13.5px; color: var(--color-text-body); } 183 184 .hero-visual { position: relative; display: grid; place-items: center; } 185 /* ìºë¦í° ì¹´ë: ìì ë§¡ë ê±´ ìºë¦í° ì´ë¯¸ì§ë¤. ì¹´ëë ìµëí ì¤ë¦½ì¼ë¡ ëì´ 186 ì¥ìì´ ìºë¦í°ì ê²½ìíì§ ìê² íë¤ â í° ë°°ê²½ · ê³µíµ íì í ë리 · ê¸°ë¥ ì¹´ëì ê°ì 그림ì. */ 187 .hero-card { 188 background: var(--color-surface); border: 1px solid var(--color-border); 189 border-radius: var(--radius-card); box-shadow: var(--shadow-card); 190 padding: 36px; width: 100%; max-width: 360px; text-align: center; 191 } 192 /* í¡ì´ 4ëª ì´ í¨ê» ë´ê¸´ ì´ë¯¸ì§ë¼ ìì¼ë©´ íì ì´ ì ë³´ì¸ë¤. ë°°ê²½ì´ ë¶í¬ëª ì´ë¼ ë¼ì´ëë¡ ì¹´ëì ë§ì¶ë¤. 193 ì´ë¯¸ì§ ëë ì ì»¬ë¬ í ë리·그ë¼ë°ì´ì ì ëì§ ìëë¤. */ 194 .hero-card img { display: block; margin: 0 auto; width: 240px; height: 240px; object-fit: contain; border-radius: 12px; } 195 .hero-card .chip { display: inline-block; background: var(--color-primary-soft); color: var(--color-primary-strong); 196 font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-pill); margin: 14px 0 10px; } 197 .hero-card .timer-sub { font-size: 14px; color: var(--color-text-body); } 198 .hero-card-msg { font-size: 14px; color: var(--gray600); margin: 12px 0 18px; line-height: 1.55; } 199 .hero-card-btn { width: 100%; } 200 201 /* sections */ 202 section.block { padding: 56px 0; } 203 .section-head { text-align: center; margin-bottom: 40px; } 204 .section-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; } 205 /* ì¤ë°ê¿ì <br>ë¡ ë°ì§ ìëë¤ â íì ë°ë¼ ìì°ì¤ë½ê² íë¥´ê² max-widthë§ ì¤ë¤ */ 206 /* í ì íì .wrap(1080px)ì´ ë§¡ëë¤ â chë ì«ì 0ì í 기ì¤ì´ë¼ íê¸ìì 207 ì²´ê°ë³´ë¤ í¨ì¬ ì¢ì(68ch â 544px) 문ì¥ì´ ìµì§ë¡ ì íë¤. */ 208 .section-head p { margin: 10px auto 0; color: var(--color-text-body); font-size: 16px; } 209 210 /* ââ ê¸°ë¥ ì¹´ë 3ì¥ ââ 211 í° ì¹´ë 1ê° + ê·¸ ìì ì°í ì¤ëª ìì 1ê°. í목ë§ë¤ ìì를 ë§ë¤ì§ ìëë¤. 212 ëì´ë ê³ ì ê° ìì´ grid stretch + flexë¡ ë§ì¶ë¤ â ë´ì©ì´ ë¬ë¼ë ëì ì´ ê°ë¤. */ 213 .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); 214 gap: 20px; align-items: stretch; } 215 .feature-grid > * { min-width: 0; } 216 .feature-card { display: flex; flex-direction: column; height: 100%; 217 background: var(--color-surface); border: 1px solid var(--color-border); 218 border-radius: var(--radius-card); box-shadow: var(--shadow-card); 219 padding: 24px; } 220 .feature-card__header { margin-bottom: 18px; } 221 .feature-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } 222 /* ì¹´í ê³ ë¦¬ ìì´ ì°ì´ë ê³³ â ìì´ì½ */ 223 .feature-icon { display: inline-flex; align-items: center; justify-content: center; 224 width: 32px; height: 32px; border-radius: 10px; flex: 0 0 32px; } 225 .feature-icon svg { width: 18px; height: 18px; } 226 .feature-card--timer .feature-icon { background: var(--color-primary-soft); color: var(--color-primary-strong); } 227 .feature-card--care .feature-icon { background: var(--color-care-soft); color: var(--color-care); } 228 .feature-card--usage .feature-icon { background: var(--color-usage-soft); color: var(--color-usage); } 229 /* ì¹´í ê³ ë¦¬ ìì´ ì°ì´ë ê³³ â¡ë°°ì§ */ 230 .tag { display: inline-block; font-size: 12px; font-weight: 700; 231 padding: 4px 10px; border-radius: var(--radius-pill); } 232 .tag.web { background: var(--color-primary-soft); color: var(--color-primary-strong); } 233 .tag.care { background: var(--color-care-soft); color: var(--color-care); } 234 .tag.usage { background: var(--color-usage-soft); color: var(--color-usage); } 235 /* ëí ì 목 â 기ë¥ëª ì´ ê°ì¥ 먼ì ì½íê². ìì ì¸ ì¹´ë 모ë ê°ì ì§í ì */ 236 .feature-card h3 { font-size: 22px; font-weight: 800; color: var(--color-text-strong); 237 margin-bottom: 6px; line-height: 1.35; } 238 .feature-summary { font-size: 14px; line-height: 1.6; color: var(--color-text-body); } 239 /* 3ì´ì¼ ë ìì½ì´ 1ì¤ì¸ ì¹´ëê° ìì´ í¤ë ëì´ê° ì´ê¸ë¬ë¤(íì´ë¨¸ë§ 1ì¤). 240 ê³ ì px ëì 2ì¤ ì리를 emì¼ë¡ íë³´í´ ì¤ëª ìì ììì ì ë§ì¶ë¤. 241 1ì´ììë íì ìì¼ë¯ë¡ ìë 미ëì´ì¿¼ë¦¬ìì í¼ë¤. */ 242 @media (min-width: 900px) { .feature-summary { min-height: calc(1.6em * 2); } } 243 /* ë´ë¶ ì¤ëª ìì â ì주 ì°í íì. ë¨ì ëì´ë¥¼ ì±ì ì¸ ì¹´ë ëì ì ë§ì¶ë¤ */ 244 .feature-card__details { flex: 1; background: var(--gray100); 245 border-radius: 12px; padding: 16px 18px; } 246 .feature-card__details ul { list-style: none; } 247 .feature-card__details li { display: grid; grid-template-columns: 16px 1fr; 248 column-gap: 8px; row-gap: 2px; margin-top: 14px; } 249 .feature-card__details li:first-child { margin-top: 0; } 250 /* ì¹´í ê³ ë¦¬ ìì´ ì°ì´ë ê³³ â¢ì²´í¬ íì */ 251 .feature-card__details li::before { content: "â"; font-weight: 900; font-size: 13px; 252 grid-column: 1; grid-row: 1; line-height: 1.6; } 253 .feature-card--timer .feature-card__details li::before { color: var(--color-primary-strong); } 254 .feature-card--care .feature-card__details li::before { color: var(--color-care); } 255 .feature-card--usage .feature-card__details li::before { color: var(--color-usage); } 256 /* ì 목·본문 ìì ì¹´ëê° ë¬ë¼ë ëì¼ */ 257 .feature-card__details li b { grid-column: 2; grid-row: 1; 258 font-size: 14px; font-weight: 700; color: var(--color-text-strong); } 259 .feature-card__details li .fd { grid-column: 2; grid-row: 2; 260 font-size: 13.5px; line-height: 1.6; color: var(--color-text-body); } 261 .fd-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); 262 font-size: 12.5px; line-height: 1.55; color: var(--color-text-body); } 263 264 /* mascots */ 265 .mascots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } 266 .mascot { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); 267 padding: 26px; display: flex; gap: 18px; align-items: flex-start; text-align: left; } 268 .mascot img { width: 84px; height: 84px; object-fit: contain; flex: 0 0 84px; } 269 .mascot .name { font-weight: 800; font-size: 18px; } 270 .mascot .role { font-size: 13px; color: var(--blue-dark); font-weight: 700; margin-top: 3px; } 271 .mascot .desc { font-size: 13.5px; color: var(--gray600); line-height: 1.62; margin-top: 9px; } 272 273 /* ê´ê³ ì리 (ì¹´ì¹´ì¤ ì ëí 300x250) 274 insì display ì ì´ë SDK 몫ì´ë¼ ì¬ê¸°ì ê±´ëë¦¬ì§ ìëë¤. ë°ê¹¥ divë§ ì¡ì ê°ì´ë° ì ë ¬. */ 275 /* ê´ê³ (300x250)ê° ë¦ê² ë¨ê±°ë ì ë ë í¸í°ê° ë°ë¦¬ì§ ìëë¡ ì리를 미리 ì¡ëë¤ */ 276 .ad-slot { display: flex; justify-content: center; align-items: center; 277 min-height: 250px; margin: 8px 0 40px; } 278
279 /* ì¬ì ì ì ë³´ â ì¹´ì¹´ì¤ ë¹ì¦ëì¤ ì±ë ì¬ì¬ìì ì¬ì ìâì±ë ì°ê´ì± íì¸ì ì°ì¸ë¤ */ 280 .biz-info { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: var(--color-text-body); } 281 .biz-info .sep { margin: 0 6px; opacity: .5; } 282 /* í¸í° ê³ ê°ì¼í° ë§í¬ â ì¬ì ì ì ë³´ì ê°ì í¤, êµµê¸°ë§ í ë¨ê³ */ 283 .biz-link { color: var(--gray700); font-weight: 700; } 284 footer { padding: 40px 0 60px; text-align: center; color: var(--color-text-body); font-size: 13.5px; } 285 footer a { color: var(--gray600); font-weight: 700; } 286 footer .sep { margin: 0 8px; opacity: .5; } 287 288 /* 899px ì´í 1ì´ â ì´ëë ëì´ë¥¼ ë§ì¶ì§ ìê³ ê° ì¹´ëì ìì° ëì´ë¥¼ ì´ë¤ */ 289 @media (max-width: 899px) { 290 .feature-grid { grid-template-columns: 1fr; gap: 16px; } 291 .feature-card { height: auto; } 292 } 293 @media (max-width: 820px) { 294 .hero-grid { grid-template-columns: 1fr; gap: 28px; } 295 .hero { padding: 44px 0 20px; } 296 .hero h1 { font-size: 34px; } 297 /* 모ë°ì¼: ì½í ì¸ ìì íì ê½ ì±ì´ë¤(ì¢ì° ì¬ë°±ì .wrapì´ ì§í¨ë¤) */ 298 .hero-cta { display: flex; width: 100%; } 299 .hero p.lead { max-width: none; } 300 301 .mascots { grid-template-columns: 1fr; } 302 } 303 304 /* ê´ê³ ìì ê°ë â íë©´ì ë®ë íì ì°¨ë¨ + ê°ë¡ ë침 ë°©ì§ (ì±ê³¼ ëì¼ ê·ì¹) */ 305 ins.adsbygoogle[data-anchor-status], 306 ins.adsbygoogle[data-vignette-loaded], 307 .adsbygoogle[style*="position: fixed"], 308 .adsbygoogle[style*="position:fixed"] { display: none !important; } 309 ins.adsbygoogle, .adsbygoogle { max-width: 100% !important; overflow: hidden !important; } 310 .hero ins.adsbygoogle, .hero-cta ins.adsbygoogle { display: none !important; } 311 ins.adsbygoogle { margin-block: 24px !important; } 312 </style> 313 <!-- Favicon --> 314 <link rel="icon" type="image/png" href="/assets/tabtalk_icon.png" /> 315 <link rel="apple-touch-icon" href="/assets/tabtalk_icon.png" /> 316 <!-- Open Graph / SNS ê³µì --> 317 <meta property="og:type" content="website" /> 318 <meta property="og:site_name" content="TabTalk" /> 319 <meta property="og:title" content="TabTalk · í¡ì´ì í¨ê»íë ì§ì¤ íì´ë¨¸" /> 320 <meta property="og:description" content="ìíë ìê°ì ì í´ ì§ì¤íë ì¹ íì´ë¨¸ìì. 25ë¶ ì§ì¤í ëë§ë
320¤ í¡ì´ íë¶ì´ ìë¼ê³ , ì¹´ë©ë¼ë íì¥ íë¡ê·¸ë¨ì ì°ê²°íë©´ ì리·ìì ì´ë ë¤ë¥¸ í ì´ëë ì±ê¸¸ ì ìì´ì." /> 321 <meta property="og:url" content="https://tabtalk.co.kr/" /> 322 <meta property="og:image" content="https://tabtalk.co.kr/assets/og-image.png" /> 323 <meta property="og:image:width" content="1200" /> 324 <meta property="og:image:height" content="630" /> 325 <meta property="og:locale" content="ko_KR" /> 326 <meta name="twitter:card" content="summary_large_image" /> 327 <meta name="twitter:title" content="TabTalk · í¡ì´ì í¨ê»íë ì§ì¤ íì´ë¨¸" /> 328 <meta name="twitter:description" content="ìíë ìê°ì ì í´ ì§ì¤íë ì¹ íì´ë¨¸ìì. 25ë¶ ì§ì¤í ëë§ë¤ í¡ì´ íë¶ì´ ìë¼ê³ , ì¹´ë©ë¼ë íì¥ íë¡ê·¸ë¨ì ì°ê²°íë©´ ì리·ìì ì´ë ë¤ë¥¸ í ì´ëë ì±ê¸¸ ì ìì´ì." /> 329 <meta name="twitter:image" content="https://tabtalk.co.kr/assets/og-image.png" /> 330 331 <!-- ë¡ê³ ì ì© ìì²´(GmarketSans Bold(700)) â ì§ì í¸ì¤í íë¤. 332 êµ¬ê¸ í°í¸ë¡ ë¶ë¬ìëë ìì²´ê° ë¦ê² ëì°©íë©° ë¡ê³ íì´ ë°ëì´ í¤ëê° ë°ë ¸ë¤ 333 (ë ì´ìì ì´ë 0.0075 â 0.0803). ê°ì ì¶ì²ìì 미리 ë°ì ëë©´ ê·¸ íë¤ë¦¼ì´ ìë¤. 334 ë¼í´ 문ìë§ ë´ì 15KBë¤ â ë¡ê³ í ë¨ì´ìë§ ì°ë¯ë¡ ì´ê±¸ë¡ ì¶©ë¶íë¤. --> 335 <link rel="preload" href="/assets/gmarket-bold-latin.woff2" as="font" type="font/woff2" crossorigin /> 336
336<script type="application/ld+json"> 337{ 338 "@context": "https://schema.org", 339 "@graph": [ 340 { 341 "@type": "Organization", 342 "@id": "https://tabtalk.co.kr/#org", 343 "name": "TabTalk", 344 "url": "https://tabtalk.co.kr/", 345 "logo": "https://tabtalk.co.kr/assets/tabtalk_icon.png" 346 }, 347 { 348 "@type": "WebSite", 349 "name": "TabTalk", 350 "alternateName": "TabTalk í¡ì´ì í¨ê»íë ì§ì¤ íì´ë¨¸", 351 "url": "https://tabtalk.co.kr/", 352 "inLanguage": "ko", 353 "publisher": { 354 "@id": "https://tabtalk.co.kr/#org" 355 } 356 } 357 ] 358} 359 </script>
359 360 <!-- Google AdSense â ì¬ì´í¸ ì°ê²°Â·ì¬ì¬ì© ê³µíµ ì¤ëí« (ì¹ì¸ ì ìë ê´ê³ ê° íìëì§ ìëë¤) --> 361
361<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6390883506772920" crossorigin="anonymous"></script>
361 362 </head> 363 <body> 364 <!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 364-365
364 365 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
365GTM-52G86BP5
vendor: 91 bytes, lines 365-367
365" 366 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 367
367<!-- End Google Tag Manager (noscript) --> 368 <nav class="nav"> 369 <div class="wrap nav-in"> 370 <a class="brand" href="/"><img class="brand-mark" src="/assets/tabtalk_icon.png" width="24" height="24" alt="" />TabTalk</a> 371 <!-- ìì: ì¹´ì¹´ì¤í¡ ì±ë · ì§ì¤ ê°ì´ë · ì견 ë³´ë´ê¸°. 372 í¤ëìë 주ì íë(Primary)ì ëì§ ìëë¤ â ì±ì¼ë¡ ê°ë 길ì ìë 모ë ì¹´ëê° ë§¡ëë¤. --> 373 <div class="nav-links"> 374 <!-- ì¹´ì¹´ì¤í¡ ì±ë ì¶ê° â ê³µì ì±ë ë¡ê³ . ì±í¤ ìì¼ë©´ followChannel, ìì¼ë©´ ì±ë íì¼ë¡ í´ë°± --> 375 <a class="insta-ch" href="https://www.instagram.com/tabtalk_official/" target="_blank" rel="noopener noreferrer" 376 aria-label="TabTalk ì¸ì¤íê·¸ë¨" title="TabTalk ì¸ì¤íê·¸ë¨"> 377 <img src="/assets/instagram_logo.png" width="30" height="30" alt="" /> 378 </a> 379 <a class="kakao-ch" id="kakaoChannelBtn" href="javascript:;" aria-label="ì¹´ì¹´ì¤í¡ ì±ë ì¶ê°" title="ì¹´ì¹´ì¤í¡ ì±ë ì¶ê°"> 380 <img src="/assets/kakao_channel_logo.png" width="30" height="30" alt="ì¹´ì¹´ì¤í¡ ì±ë ì¶ê°" /> 381 </a> 382 <a href="/blog">ì§ì¤ ê°ì´ë</a> 383 <button type="button" class="nav-feedback feedback-open">ì견 ë³´ë´ê¸°</button> 384 </div> 385 </div> 386 </nav> 387 388 <header class="hero"> 389 <div class="wrap hero-grid"> 390 <div> 391 <span class="eyebrow">ì§ì¤ì í¨ê»íë 4ëª ì í¡ì´</span> 392 <h1>ì¤ëë <span class="accent">í¡ì´ë¤</span>ê³¼<br />ììí´ë³¼ê¹ì?</h1> 393 <p class="lead">ì ì¤ì´, ë¤ì ì´, ì°¨ë¶ì´, ì´ì ì´ê° ì¤ëì 목í를 í¨ê» ììí ê²ì.</p> 394 <p class="hero-body">ì§ì¤í ìê°ì ì íê³ íì´ë¨¸ë¥¼ ì¼ë³´ì¸ì. 25ë¶ë§ë¤ í¡ì´ íë¶ì´ ìë¼ì.<br />ì¹´ë©ë¼ë íì¥ íë¡ê·¸ë¨ì ì°ê²°íë©´ ì리·ìì ì´ë ë¤ë¥¸ í ì´ëë í¡ì´ê° ì±ê²¨ì¤ì.</p> 395 <a class="btn btn-primary hero-cta" href="/app"> 396 <svg class="btn-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3" /></svg> 397 ì§ì¤ ììí기 398 </a> 399 <p class="hero-note">ì¤ì¹ ìì´ ë°ë¡ ìì · 무ë£</p> 400 </div> 401 <div class="hero-visual"> 402 <div class="hero-card"> 403 <img src="assets/tabtalk_family.png" alt="TabTalk í¡ì´ 4ëª â ì ì¤ì´Â·ë¤ì ì´Â·ì°¨ë¶ì´Â·ì´ì ì´" /> 404 <span class="chip">ì§ì¤ ì¤</span> 405 <div class="timer-sub">í¡ì´ê° ììì í¨ê»í ê²ì</div> 406 </div> 407 </div> 408 </div> 409 410 </header> 411 412 <!-- ê¸°ë¥ ìê° â ìì½ ì¹´ëì ìì¸ ì¤ëª ì íëë¡ í©ì¹ 3ì¥. 413 ìì(íì´ë¨¸) â ì ì§(ì§ì¤ ì¼ì´) â íì¸(ì¬ì©ë) ììë¡ ìí ì´ ë°ë¡ ì½íê² íë¤. 414 ì¹´ë ììë ë²í¼ì ëì§ ìëë¤(ì§ì ì í¤ë·íë¨ CTAê° ë§¡ëë¤). --> 415 <!-- ê¸°ë¥ ìê° â í° ê¸°ë¥ ì¹´ë 1ê° + ë´ë¶ ì°í ì¤ëª ìì 1ê°. 416 ì ë³´ ììë ì¸ ì¹´ë 모ë ê°ë¤: ìì´ì½Â·ë°°ì§ â ëí ì 목 â í ì¤ ìì½ â ì¤ëª ìì. 417 ì¹´í ê³ ë¦¬ ì(íë·보ë¼Â·ë¯¼í¸)ì ìì´ì½Â·ë°°ì§Â·ì²´í¬ íììë§ ì°ê³ 본문ìë ì°ì§ ìëë¤. --> 418 <section class="block" id="features"> 419 <div class="wrap"> 420 <div class="section-head"> 421 <h2>ì§ì¤ì íìí ì¸ ê°ì§ 기ë¥</h2> 422 <p>íì´ë¨¸ë¡ ìê°ì ì í´ ì§ì¤íê³ , ì§ì¤ ì¼ì´ë¡ íí¸ë¬ì§Â ìê°ì ììì°¨ë¦¬ê³ , ì¬ì©ëìì ë¸ë¼ì°ì 를 ê°ë³ê²Â ê´ë¦¬í´ì. ì§ì¤í ìê°ì í¡ì´Â íë¶ì¼ë¡ ìë¼ì.</p> 423 </div> 424 <div class="feature-grid"> 425 <article class="feature-card feature-card--timer"> 426 <header class="feature-card__header"> 427 <div class="feature-card__meta"> 428 <span class="feature-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8" /><path d="M12 9v4l2.5 2.5" /><path d="M9 2h6" /></svg></span>
429 <span class="tag web">ê°ë³ê² ìì</span> 430 </div> 431 <h3>íì´ë¨¸</h3> 432 <p class="feature-summary">ì§ì¤í ìê°ì ì íê³ ë°ë¡ ììí´ì. ì¹ê³¼ íì¥ íë¡ê·¸ë¨ ì´ëìì ììí´ë ê°ì ìê°ì´ ì´ì´ì§ëë¤.</p> 433 </header> 434 <div class="feature-card__details"> 435 <ul> 436 <li><b>15·30·45·60ë¶ ëë ì§ì ì ë ¥</b><span class="fd">ìíë ìê°ì ê³ ë¥´ê±°ë ìµë 600ë¶ê¹ì§ ì§ì ì ë ¥í ì ìì´ì.</span></li> 437 <li><b>í¨ê»í í¡ì´ ì í</b><span class="fd">ì ì¤ì´Â·ë¤ì ì´Â·ì°¨ë¶ì´Â·ì´ì ì´ ì¤ í ëª ì ê³¨ë¼ í¨ê» ì§ì¤í´ì.</span></li> 438 <li><b>목í ë¬ì±ê³¼ ë¬ì± ì¹´ë</b><span class="fd">목í를 ì±ì°ë©´ í¡ì´ì ìì ììì´ ì¬ìëê³ , í¨ê»í í¡ì´ê° ë´ê¸´ ë¬ì± ì¹´ë를 ì´ë¯¸ì§ë¡ ì ì¥í ì ìì´ì.</span></li> 439 <li><b>í¡ì´ íë¶ê³¼ í ë§í ìê³</b><span class="fd">
43925ë¶ ì§ì¤í ëë§ë¤ íë¶ì´ í ì¹¸ì© ìë¼ê³ , 4ì¹¸ì´ ì°¨ë©´ í ë§í ìê³ë¥¼ ë°ìì. TabTalkìì 모ì í ë§í ìê³ë í¨ê»í í¡ì´ì ì ë°ì ìì´ê³ , í¡ì´ê° í¸ì§ë¥¼ ë¨ê²¨ì.</span></li> 440 </ul> 441 </div> 442 </article> 443 444 <article class="feature-card feature-card--care"> 445 <header class="feature-card__header"> 446 <div class="feature-card__meta"> 447 <span class="feature-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3" /><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" /></svg></span> 448 <span class="tag care">ì§ì¤ íë¦ ì§í¤ê¸°</span> 449 </div> 450 <h3>ì§ì¤ ì¼ì´</h3> 451 <p class="feature-summary">ì¹´ë©ë¼ì íì¥ íë¡ê·¸ë¨ì í¨ê» ì¬ì©í´ ì§ì¤ ìí를 ë 꼼꼼íê² íì¸í´ì. íìí 기ë¥ë§ ì íí´ì ì¬ì©í ìë ìì´ì.</p> 452 </header> 453 <div class="feature-card__details"> 454 <ul> 455 <li><b>ì¹´ë©ë¼: íë©´ì ë³´ê³ ìëì§ íì¸</b><span class="fd">ììì 기기 ììì ì²ë¦¬íë©° ì ì¥íê±°ë ì ì¡íì§ ììì.</span></li> 456 <li><b>íì¥: ì§ì¤ íì ë¨¸ë¬¼ê³ ìëì§ íì¸</b><span class="fd">ì§ì í ì§ì¤ íì ë²ì´ëë©´ íì¥ íë¡ê·¸ë¨ì´ ê°ì§í´ì.</span></li> 457 <li><b>ë ë¤ ì¬ì©: ë ì¡°ê±´ì´ ë§ì ë ì§ì¤ ìê°ì¼ë¡ 기ë¡</b><span class="fd">íë©´ì ë³´ë©´ì ì§ì¤ íì ìì ëë§ ì§ì¤ ìê°ì¼ë¡ ì¸ì ë¼ì.</span></li> 458 <li><b>ìì ì´ ë©ì´ì§ê±°ë ë´ì§ íì¼ë¡ ì´ëíë©´ í¡ì´ê° ìë´</b><span class="fd">ë¤ì ì§ì¤í íì´ë°ì í¡ì´ê° ìë ¤ì¤ì.</span></li> 459 </ul> 460 </div> 461 </article> 462 463 <article class="feature-card feature-card--usage"> 464 <header class="feature-card__header"> 465 <div class="feature-card__meta"> 466 <span class="feature-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l3 8 4-16 3 8h4" /></svg></span> 467 <span class="tag usage">ë¸ë¼ì°ì ì 리</span> 468 </div> 469 <h3>ì¬ì©ë</h3> 470 <p class="feature-summary">íì¥ íë¡ê·¸ë¨ì ì°ê²°íë©´ ì¤ë ì¬ì©í ì¬ì´í¸ì ì´ë¦° í, 기기 ë©ëª¨ë¦¬ ìí를 íëì íì¸í ì ìì´ì.</p> 471 </header> 472 <div class="feature-card__details"> 473 <ul> 474 <li><b>ì¬ì´í¸ë³ ì¬ì© ìê°</b><span class="fd">ì¤ë ì´ë¤ ì¬ì´í¸ë¥¼ ì¼ë§ë ì¤ë ì¬ì©íëì§ íì¸í ì ìì´ì.</span></li> 475 <li><b>ì´ë¦° íê³¼ ì¤ë ì´ë¦° í</b><span class="fd">íì¬ ì´ë¦° íê³¼ ì¤ë ì´ì´ë íì íì¸íê³ ì§ì¤ ì ì ì 리í ì ìì´ì.</span></li> 476 <li><b>기기 ë©ëª¨ë¦¬ ìí</b><span class="fd">기기 ì ì²´ ë©ëª¨ë¦¬ ì¬ì© ìí를 íì¸í´ ë¸ë¼ì°ì ê° ë¬´ê±°ìì§ ìí©ì ì´í´ë³¼ ì ìì´ì.</span></li> 477 <li><b>ì§ì¤Â·ë´ì§ ì¬ì´í¸ ì¤ì </b><span class="fd">ì¬ì´í¸ë¥¼ ì§ì¤ì©Â·ë¹ì§ì¤ì©ì¼ë¡ ë¶ë¥í´ ë´ì§ í ê°ì§ 기ì¤ì ì í ì ìì´ì.</span></li> 478 </ul> 479 <p class="fd-note">ì¬ì©ëì íì¥ íë¡ê·¸ë¨ ì°ê²°ì´ íìí´ì.</p> 480 </div> 481 </article> 482 </div> 483 </div> 484 </section> 485 486 <section class="block"> 487 <div class="wrap"> 488 <div class="section-head"><h2>4ëª ì ì§ì¬, í¡ì´ë¤</h2><p>ëì ì ë§ë í¡ì´ë¥¼ 골ë¼ë³´ì¸ì. ë§í¬ë ììíë ë°©ìë 모ë ë¬ë¼ì.</p></div> 489 <div class="mascots"> 490 <div class="mascot"> 491 <img src="assets/concierge.png" alt="ì ì¤ì´" /> 492 <div class="mascot-text"> 493 <div class="name">ì ì¤ì´</div> 494 <div class="role">ìì ë°ë¥¸ ì§ì¤ ì§ì¬</div> 495 <p class="desc">íí¸ë¬ì§ ì§ì¤ì ë¤ì ì¡ìì¤ì. ì¬ì´íì§ ìê³ ë¤ì ììí ì ìëë¡ ì ì¤íê² ìë ¤ì£¼ë ì§ì¬ìì.</p> 496 </div> 497 </div> 498 <div class="mascot"> 499 <img src="assets/secretary.png" alt="ë¤ì ì´" /> 500 <div class="mascot-text"> 501 <div class="name">ë¤ì ì´</div> 502 <div class="role">ë°ë»í ìì ì§ì¬</div> 503 <p class="desc">ì§§ê² ì§ì¤í´ë ìíë¤ê³ 먼ì ììë´ ì¤ì. ì§ì¹ ë ë¶ë´ ì£¼ì§ ìê³ ììì ë¤ì íê² íì ë³´íë ì§ì¬ìì.</p> 504 </div> 505 </div> 506 <div class="mascot"> 507 <img src="assets/coach.png" alt="ì°¨ë¶ì´" /> 508 <div class="mascot-text"> 509 <div class="name">ì°¨ë¶ì´</div> 510 <div class="role">침착í íì´ì¤ ì§ì¬</div> 511 <p class="desc">í¸ë¤ê° ìì´ íìí ë§ë§ ë± í´ì¤ì. íë¦ì´ ë겨ë ì°¨ë¶íê² ë¤ì íì´ì¤ë¥¼ ì¡ì주ë ì§ì¬ìì.</p> 512 </div> 513 </div> 514 <div class="mascot"> 515 <img src="assets/manager.png" alt="ì´ì ì´" /> 516 <div class="mascot-text"> 517 <div class="name">ì´ì ì´</div> 518 <div class="role">ì´ì íë° ì§ì¬</div> 519 <p class="desc">ë¯¸ë£¨ê³ ì¶ì ë íë¶í° í ì¬ë ¤ì¤ì. ììí ë ëêµ¬ë³´ë¤ ì°ë ì°¨ê³ , 목í를 ëë´ë©´ ë ì ëê² ì¶ííë ì§ì¬ìì.</p> 520 </div> 521 </div> 522 </div> 523 </div> 524 </section> 525 526 <!-- ì§ì¤ ê°ì´ë(ë¸ë¡ê·¸) ìµì ê¸ â /blogìì ìµì 3ê°ë¥¼ ë°íìì ë¶ë¬ì ìë íìíë¤. 527 ì ê¸ì ì¶ê°íë©´ ì¬ê¸°ë ìëì¼ë¡ ê°±ì ëë¤(íì ë°ë¡ ìëì§ ììë ë¨). 528 JSë¡ ì±ì°ê¸° ì ì hidden â ì¤í¨ ì ë¹ ì¹ì ì´ ë¨ì§ ìê². --> 529 <style> 530 #guide-block .guide-cards { list-style: none; margin: 24px 0 0; padding: 0; 531 display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } 532 #guide-block .guide-card a { display: flex; flex-direction: column; gap: 8px; height: 100%; 533 padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); 534 border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-decoration: none; 535 transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } 536 #guide-block .guide-card a:hover { box-shadow: var(--shadow-card-hover); 537 border-color: var(--color-border-hover); transform: translateY(-2px); } 538 #guide-block .guide-card a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); } 539 #guide-block .guide-card .tag { align-self: flex-start; font-size: 12px; font-weight: 700; 540 color: var(--color-primary-strong); background: var(--color-primary-soft); 541 padding: 3px 10px; border-radius: var(--radius-pill); } 542 #guide-block .guide-card h3 { margin: 2px 0 0; font-size: 16px; font-weight: 700; 543 color: var(--color-text-strong); line-height: 1.4; } 544 #guide-block .guide-card p { margin: 0; flex: 1; font-size: 13.5px; 545 color: var(--color-text-body); line-height: 1.55; } 546 #guide-block .guide-card .meta { margin-top: 4px; font-size: 12px; color: var(--color-text-muted); } 547 #guide-block .guide-more-wrap { margin-top: 20px; text-align: center; } 548 #guide-block .guide-more { display: inline-flex; align-items: center; gap: 6px; 549 font-size: 14px; font-weight: 700; color: var(--color-primary-strong); text-decoration: none; } 550 #guide-block .guide-more:hover { text-decoration: underline; } 551 @media (max-width: 860px) { #guide-block .guide-cards { grid-template-columns: 1fr; } } 552 </style> 553 <section class="block" id="guide-block" hidden> 554 <div class="wrap"> 555 <div class="section-head"> 556 <h2>ì§ì¤ ê°ì´ë</h2> 557 <p>ì§ì§ ì§ì¤íë ë², ì§§ê² ì½ì´ë³´ì¸ì.</p> 558 </div>
559 <ul class="guide-cards" id="homeGuideList"></ul> 560 <div class="guide-more-wrap"> 561 <a class="guide-more" href="/blog">ê°ì´ë ì ì²´ 보기 <span aria-hidden="true">â</span></a> 562 </div> 563 </div> 564 </section> 565 566 <!-- ì¹´ì¹´ì¤ ì ëí â ëë© íë¨ (300x250) 567 ë±ë¡í 매체 URL(tabtalk.co.kr)ì ê´ê³ ê° ìì¼ë©´ ì¬ì¬ìì '미ì¤ì¹'ë¡ ë°ë ¤ëë¤. 568 insì display:noneì SDKê° ê´ê³ 를 ë°ì¼ë©´ ì§ì í´ì íë¯ë¡ ê±´ëë¦¬ì§ ë§ ê². --> 569 <div class="wrap"> 570 <div class="ad-slot"> 571 <ins class="kakao_ad_area" style="display:none;" 572 data-ad-unit="DAN-LYUbgFKJdCiZGb9g" 573 data-ad-width="300" 574 data-ad-height="250"></ins> 575 </div> 576 </div> 577 578 <footer> 579 <div class="wrap"> 580 © 2026 TabTalk 581 <span class="sep">·</span><a href="/privacy">ê°ì¸ì ë³´ì²ë¦¬ë°©ì¹¨</a><span class="sep">·</span><a href="/terms">ì´ì©ì½ê´</a> 582 <span class="sep">·</span><button type="button" class="link-btn" id="feedbackOpen">ì견 ë³´ë´ê¸°</button> 583 <div class="biz-info"> 584 ìë¹ì¤ëª : íí¡(TabTalk) <span class="sep">·</span> ìí¸ : ì´ë ¸ë¸(INNOVE) <span class="sep">·</span> ëí : ê¹í¨ì§<br /> 585 ì¬ì ìë±ë¡ë²í¸ : 333-32-01588<br /> 586 주ì : ìì¸í¹ë³ì ê°ë¨êµ¬ ìëëë¡ 602, 6층 z226í¸(ì¼ì±ë, ì¼ì±ë 미ì¼ë107)<br /> 587 ê³ ê°ì¼í° : <a class="biz-link" href="https://pf.kakao.com/_lhxcfX" target="_blank" rel="noopener">ì¹´ì¹´ì¤í¡ 문ì</a> 588 </div> 589 </div> 590 </footer> 591 592 <!-- GA ì´ë²¤í¸ ì¶ì (GTM dataLayerë¡ ì ì¡) --> 593
593<script> 594 function ttTrack(name, params) { 595 (window.dataLayer = window.dataLayer || []).push(Object.assign({ event: name }, params || {})); 596 } 597 document.addEventListener("click", function (e) { 598 var el = e.target.closest("a, button"); 599 if (!el) return; 600 // íì¥ íë¡ê·¸ë¨ ë¤ì´ë¡ëë ì´ì ëë©ì´ ìëë¼ ì§ì¤ ì¼ì´ íë©´ìë§ ìë¤ 601 // (ì± ìª½ app.jsê° ê°ì ì´ë¦ì¼ë¡ ì¶ì íë¤). 602 if (el.matches('a[href*="/app"]')) { 603 var m = (el.getAttribute("href") || "").match(/[?&](?:mode|view)=([a-z]+)/); 604 ttTrack("app_cta_click", { destination: m ? m[1] : "app" }); 605 } 606 }, true); 607 608 // í íë¨ 'ì§ì¤ ê°ì´ë' â /blogìì ìµì ê¸ 3ê°ë¥¼ ê°ì ¸ì ì¹´ëë¡ íì. 609 // ë¸ë¡ê·¸ 목ë¡ì´ ë¨ì¼ ì¶ì²ë¼, ì ê¸ì ì¶ê°íë©´ íë ìëì¼ë¡ ê°±ì ëë¤. 610 (function loadHomeGuide() { 611 var host = document.getElementById("homeGuideList"); 612 var sec = document.getElementById("guide-block"); 613 if (!host || !sec) return; 614 fetch("/blog", { credentials: "same-origin" }) 615 .then(function (r) { return r.ok ? r.text() : Promise.reject(new Error(r.status)); }) 616 .then(function (html) { 617 var doc = new DOMParser().parseFromString(html, "text/html"); 618 var cards = Array.prototype.slice.call(doc.querySelectorAll(".post-list .post-card > a")).slice(0, 3); 619 if (!cards.length) return; 620 var frag = document.createDocumentFragment(); 621 cards.forEach(function (a) { 622 var pick = function (sel) { var n = a.querySelector(sel); return n ? n.textContent.trim() : ""; }; 623 var li = document.createElement("li"); 624 li.className = "guide-card"; 625 var link = document.createElement("a"); 626 link.href = a.getAttribute("href") || "/blog"; 627 link.innerHTML = '<span class="tag"></span><h3></h3><p></p><span class="meta"></span>'; 628 link.querySelector(".tag").textContent = pick(".tag"); 629 link.querySelector("h3").textContent = pick("h2"); 630 link.querySelector("p").textContent = pick("p"); 631 link.querySelector(".meta").textContent = pick(".meta"); 632 li.appendChild(link); 633 frag.appendChild(li); 634 }); 635 host.appendChild(frag); 636 sec.hidden = false; 637 }) 638 .catch(function () { /* ì¤í¨ ì ì¹ì ì¨ê¹ ì ì§ */ }); 639 })(); 640 </script>
640 641 642 <!-- ì ëí SDK â íì´ì§ë¹ í ë²ë§ ë¡ëíë¤ --> 643
643<script type="text/javascript" src="//t1.kakaocdn.net/kas/static/ba.min.js" async></script>
643 644
644<script src="/feedback.js" defer></script>
644 645 <!-- ì¹´ì¹´ì¤í¡ ì±ë ì¶ê° ë²í¼ â 646 SDK â ì±í¤(ë°íì 주ì ) â ì±ë ë¡ì§ ììë¡ ë¡ëíë¤. deferë¼ ì´ ììëë¡ ì¤íëë¤. 647 ì±í¤ê° ìê±°ë SDKê° ë§íë©´ kakao-channel.jsê° ì±ë í ë§í¬ë¡ í´ë°±íë¤. --> 648
648<script 649 src="https://t1.kakaocdn.net/kakao_js_sdk/2.8.1/kakao.min.js" 650 integrity="sha384-OL+ylM/iuPLtW5U3XcvLSGhE8JzReKDank5InqlHGWPhb4140/yrBw0bg0y7+C9J" 651 crossorigin="anonymous" 652 defer 653 ></script>
653 654
654<script src="/api/kakao-config" defer></script>
654 655
655<script src="/kakao-channel.js" defer></script>
655 656 </body> 657</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.