PageSourceSearch

https://songsong.dev/category/%EA%B5%AC%ED%98%84

html songsong.dev collected 2026-10-06 03:37:43 UTC 48,517 bytes, 874 lines download raw bytes

1<!doctype html>
2<html lang="ko">
3
4                                                                <head>
5                
5<script type="text/javascript">if (!window.T) { window.T = {} }
6window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":373748,"name":"ylem76","title":"송송은 오늘도 열심히 코딩 하네","isDormancy":false,"nickName":"송송 DEV","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://songsong.dev/category/%25EA%25B5%25AC%25ED%2598%2584","DEFAULT_URL":"https://songsong.dev","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"};
7window.T.entryInfo = null;
8window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
9window.initData = {};
10
11window.TistoryBlog = {
12    basePath: "",
13    url: "https://songsong.dev",
14    tistoryUrl: "https://ylem76.tistory.com",
15    manageUrl: "https://ylem76.tistory.com/manage",
16    token: "Cc20QVRCzb7Y2MmN9JNXSKwFdySiuA92v4QiFPAanVn9x8Wx29yoQG+b1T9oZX4M"
17};
18var servicePath = "";
19var blogURL = "";</script>
19
20
21                
22                
23                        <!-- BusinessLicenseInfo - START -->
24        
25            <link href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/plugin/BusinessLicenseInfo/style.css" rel="stylesheet" type="text/css"/>
26
27            
27<script>function switchFold(entryId) {
28    var businessLayer = document.getElementById("businessInfoLayer_" + entryId);
29
30    if (businessLayer) {
31        if (businessLayer.className.indexOf("unfold_license") > 0) {
32            businessLayer.className = "business_license_layer";
33        } else {
34            businessLayer.className = "business_license_layer unfold_license";
35        }
36    }
37}
38</script>
38
39
40        
41        <!-- BusinessLicenseInfo - END -->
42        <!-- DaumShow - START -->
43        <style type="text/css">#daumSearchBox {
44    height: 21px;
45    background-image: url(//i1.daumcdn.net/imgsrc.search/search_all/show/tistory/plugin/bg_search2_2.gif);
46    margin: 5px auto;
47    padding: 0;
48}
49
50#daumSearchBox input {
51    background: none;
52    margin: 0;
53    padding: 0;
54    border: 0;
55}
56
57#daumSearchBox #daumLogo {
58    width: 34px;
59    height: 21px;
60    float: left;
61    margin-right: 5px;
62    background-image: url(//i1.daumcdn.net/img-media/tistory/img/bg_search1_2_2010ci.gif);
63}
64
65#daumSearchBox #show_q {
66    background-color: transparent;
67    border: none;
68    font: 12px Gulim, Sans-serif;
69    color: #555;
70    margin-top: 4px;
71    margin-right: 15px;
72    float: left;
73}
74
75#daumSearchBox #show_btn {
76    background-image: url(//i1.daumcdn.net/imgsrc.search/search_all/show/tistory/plugin/bt_search_2.gif);
77    width: 37px;
78    height: 21px;
79    float: left;
80    margin: 0;
81    cursor: pointer;
82    text-indent: -1000em;
83}
84</style>
85
86        <!-- DaumShow - END -->
87
88        <!-- GoogleAnalytics - START -->
vendor: 66 bytes, lines 88-89
88
89        <script src="https://www.googletagmanager.com/gtag/js?id=
89G-P06FXBW0J0
vendor: 26 bytes, line 89
89" async="async"></script>
90<script>
vendor: 126 bytes, lines 90-93
90window.dataLayer = window.dataLayer || [];
91function gtag(){dataLayer.push(arguments);}
92gtag('js', new Date());
93gtag('config','
93G-P06FXBW0J0
vendor: 159 bytes, lines 93-97
93', {
94    cookie_domain: 'ylem76.tistory.com',
95    cookie_flags: 'max-age=0;domain=.tistory.com',
96    cookie_expires: 7 * 24 * 60 * 60 // 7 days, in seconds
97});
97</script>
97
98
99        <!-- GoogleAnalytics - END -->
100
101<!-- System - START -->
102
103<!-- System - END -->
104
105        <!-- TistoryProfileLayer - START -->
106        <link href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/plugin/TistoryProfileLayer/style.css" rel="stylesheet" type="text/css"/>
107<script type="text/javascript" src="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/plugin/TistoryProfileLayer/script.js"></script>
107
108
109        <!-- TistoryProfileLayer - END -->
110
111                
112                <meta http-equiv="X-UA-Compatible" content="IE=Edge">
113<meta name="format-detection" content="telephone=no">
114<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
vendor: 1 bytes, line 114
114
115<script type="text/javascript" src="//t1.kakaocdn.net/tiara/js/v1/tiara-1.2.0.min.js"></script>
115<meta name="referrer" content="always"/>
116<meta name="google-adsense-platform-account" content="ca-host-pub-9691043933427338"/>
117<meta name="google-adsense-platform-domain" content="tistory.com"/>
118<meta name="google-adsense-account" content="ca-pub-3549159921171034"/>
119<meta name="description" content="'구현' 카테고리의 글 목록"/>
120
121    <!-- BEGIN OPENGRAPH -->
122    <meta property="og:type" content="website"/>
123<meta property="og:site_name" content="송송은 오늘도 열심히 코딩 하네"/>
124<meta property="og:title" content="'구현' 카테고리의 글 목록"/>
125<meta property="og:description" content="송송은 뚠뚠
126오늘도 뚠뚠
127열심히 ~ 
128코딩 하네 뚠뚠"/>
129<meta property="og:image" content="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&amp;fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F373748%2Fattach%2Faf0ef0205e234b4f9f09d7bce27dd237"/>
130    <!-- END OPENGRAPH -->
131
132    <!-- BEGIN TWITTERCARD -->
133    <meta name="twitter:card" content="summary_large_image"/>
134<meta name="twitter:site" content="@TISTORY"/>
135<meta name="twitter:title" content="'구현' 카테고리의 글 목록"/>
136<meta name="twitter:description" content="송송은 뚠뚠
137오늘도 뚠뚠
138열심히 ~ 
139코딩 하네 뚠뚠"/>
140<meta property="twitter:image" content="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&amp;fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F373748%2Fattach%2Faf0ef0205e234b4f9f09d7bce27dd237"/>
141    <!-- END TWITTERCARD -->
142<script type="module" src="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/pc/dist/index.js" defer=""></script>
vendor: 1 bytes, line 142
142
143<script type="text/javascript" src="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/pc/dist/index-legacy.js" defer="" nomodule="true"></script>
vendor: 1 bytes, line 143
143
144<script type="text/javascript" src="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/pc/dist/polyfills-legacy.js" defer="" nomodule="true"></script>
144
145<link rel="stylesheet" type="text/css" href="https://t1.daumcdn.net/tistory_admin/www/style/font.css"/>
146<link rel="stylesheet" type="text/css" href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/style/content.css"/>
147<link rel="stylesheet" type="text/css" href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/pc/dist/index.css"/>
148<link rel="stylesheet" type="text/css" href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/style/uselessPMargin.css"/>
149<script type="text/javascript">(function() {
150    var tjQuery = jQuery.noConflict(true);
151    window.tjQuery = tjQuery;
152    window.orgjQuery = window.jQuery; window.jQuery = tjQuery;
153    window.jQuery = window.orgjQuery; delete window.orgjQuery;
154})()</script>
vendor: 1 bytes, line 154
154
155<script type="text/javascript" src="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/script/base.js"></script>
vendor: 1 bytes, line 155
155
156<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
156
157
158                
159  <meta charset="UTF-8">
160  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
161  <link rel="canonical" href="https://songsong.dev/">
162  <title>'구현' 카테고리의 글 목록</title>
163  
163<script src="https://tistory1.daumcdn.net/tistory/373748/skin/images/dark.js?_version_=1715699145"></script>
163
164  
164<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
164
165  
166  
167
168  <link rel="stylesheet" href="https://tistory1.daumcdn.net/tistory/373748/skin/style.css?_version_=1715699145">
169  <!-- font -->
170  <link rel="preconnect" href="https://fonts.googleapis.com">
171  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
172  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
173
174  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
175  <link rel="stylesheet" href="https://tistory1.daumcdn.net/tistory/373748/skin/images/widget.css?_version_=1715699145">
176
177
178  <!-- naver search advisor -->
179  <meta name="naver-site-verification" content="c9f71c216cb7e517733a39db1295daaec5d37ea4" />
180  <!-- google search console -->
181  <meta name="google-site-verification" content="1DX4DEaYUk3XvnWrQulCibT8v0wPIgP2P6oYm73GF-E" />
182  <!-- codepen -->
183  
183<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
183
184
185  <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 66 bytes, lines 185-186
185
186  <script async src="https://www.googletagmanager.com/gtag/js?id=
186UA-199666140-1
vendor: 14 bytes, lines 186-187
186"></script>
187  
187<script>
188    
vendor: 153 bytes, lines 188-194
188window.dataLayer = window.dataLayer || [];
189
190    function gtag() {
191      dataLayer.push(arguments);
192    }
193    gtag('js', new Date());
194    gtag('config', '
194UA-199666140-1
vendor: 6 bytes, lines 194-195
194');
195  
195</script>
195
196  <!-- google adsense -->
197  
197<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3549159921171034" crossorigin="anonymous"></script>
197
198
199                
200                
201                <link rel="stylesheet" type="text/css" href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/style/revenue.css"/>
202<link rel="canonical" href="https://songsong.dev"/>
203
204<!-- BEGIN STRUCTURED_DATA -->
205<script type="application/ld+json">
206    {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":0,"item":{"@id":"https://songsong.dev/entry/Auto-Generated-Post-Tables","name":"게시물 Table Of Contents 자동 목차 만들기"}},{"@type":"ListItem","position":1,"item":{"@id":"https://songsong.dev/entry/Creating-a-React-Custom-Select-Box","name":"리액트 커스텀 셀렉트 박스 만들기"}},{"@type":"ListItem","position":2,"item":{"@id":"https://songsong.dev/entry/S3%EC%97%90-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EB%8A%94-%EC%84%B8-%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95","name":"S3에 파일을 업로드하는 세 가지 방법"}},{"@type":"ListItem","position":3,"item":{"@id":"https://songsong.dev/entry/%EC%98%A4%EB%8A%98-%ED%95%98%EB%A3%A8-%EB%B3%B4%EC%A7%80-%EC%95%8A%EA%B8%B0-%ED%8C%9D%EC%97%85-%EB%A7%8C%EB%93%A4%EA%B8%B0","name":"오늘 하루 보지 않기 팝업 만들기"}},{"@type":"ListItem","position":4,"item":{"@id":"https://songsong.dev/entry/kakao-link-api%EB%A1%9C-%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0","name":"카카오 링크 API로 카카오톡 공유하기"}},{"@type":"ListItem","position":5,"item":{"@id":"https://songsong.dev/entry/swiperjs-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0","name":"swiperjs 슬라이더 기본 사용법 알아보기"}},{"@type":"ListItem","position":6,"item":{"@id":"https://songsong.dev/entry/Javascript%EB%A1%9C-%EB%8B%AC%EB%A0%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0","name":"자바스크립트로 달력 만들기"}},{"@type":"ListItem","position":7,"item":{"@id":"https://songsong.dev/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EB%AC%B8%EC%9E%90%EB%A9%94%EC%8B%9C%EC%A7%80-%EB%B3%B4%EB%82%B4%EA%B8%B0","name":"자바스크립트로 문자메시지 보내기"}}]}
207</script>
207
208<!-- END STRUCTURED_DATA -->
209<link rel="stylesheet" type="text/css" href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/style/dialog.css"/>
210<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
211<link rel="stylesheet" type="text/css" href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/style/postBtn.css"/>
212<link rel="stylesheet" type="text/css" href="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/style/tistory.css"/>
213<script type="text/javascript" src="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/script/common.js"></script>
213
214
215                
216                </head>
217
218                                                <body id="tt-body-category" class="color-gray post-type-thumbnail paging-view-more">
219                
220                
221                
222  
223    <div id="acc-nav">
224      <a href="#content">본문 바로가기</a>
225    </div>
226    <div id="wrap">
227      <header id="header" class="header">
228        <div class="scrollbar">
229        </div>
230        <div class="header__wrapper">
231          <nav role="navigation" class="category">
232            <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(14)</span> </a>
233  <ul class="category_list"><li class=""><a href="/category/%EB%AC%B8%EC%A0%9C%20%ED%95%B4%EA%B2%B0" class="link_item"> 문제 해결 <span class="c_cnt">(3)</span> </a></li>
234<li class=""><a href="/category/%EC%B5%9C%EC%A0%81%ED%99%94" class="link_item"> 최적화 <span class="c_cnt">(1)</span> </a></li>
235<li class="selected"><a href="/category/%EA%B5%AC%ED%98%84" class="link_item"> 구현 <span class="c_cnt">(8)</span> </a></li>
236<li class=""><a href="/category/%EA%B8%B0%ED%83%80" class="link_item"> 기타 <span class="c_cnt">(2)</span> </a></li>
237</ul>
238</li>
239</ul>
240
241            <a href="https://songsong-dev.notion.site/bc4b4fdb145c4393b2bcf4e0670d0302?v=cfdc82665942470cb2728db5603ae2ed&pvs=74" target="_blank" rel="noopener noreferrer">TIL</a>
242          </nav>
243          <button type="button" class="mobile-menu"><span>메뉴</span></button>
244        </div>
245        <h1>
246          <a href="https://songsong.dev/">송송은 오늘도 열심히 코딩 하네</a>
247        </h1>
248
249        <!-- [s] gnb -->
250        <div class="menu">
251          <nav id="gnb">
252            <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(14)</span> </a>
253  <ul class="category_list"><li class=""><a href="/category/%EB%AC%B8%EC%A0%9C%20%ED%95%B4%EA%B2%B0" class="link_item"> 문제 해결 <span class="c_cnt">(3)</span> </a></li>
254<li class=""><a href="/category/%EC%B5%9C%EC%A0%81%ED%99%94" class="link_item"> 최적화 <span class="c_cnt">(1)</span> </a></li>
255<li class="selected"><a href="/category/%EA%B5%AC%ED%98%84" class="link_item"> 구현 <span class="c_cnt">(8)</span> </a></li>
256<li class=""><a href="/category/%EA%B8%B0%ED%83%80" class="link_item"> 기타 <span class="c_cnt">(2)</span> </a></li>
257</ul>
258</li>
259</ul>
260
261          </nav>
262          <div class="social-link">
263            
264            
265            
266            
267          </div>
268          <!-- <p>POWERED BY TISTORY</p> -->
269        </div>
270        <div class="search">
271          <i class="fas fa-search"></i>
272          
273            <input type="text" name="search" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { try {
274    window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value);
275    document.getElementsByName('search')[0].value = '';
276    return false;
277} catch (e) {} }">
278            <button type="submit" onclick="try {
279    window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value);
280    document.getElementsByName('search')[0].value = '';
281    return false;
282} catch (e) {}"><i class="fas fa-search"></i><span>검색</span></button>
283          
284        </div>
285      </header>
286  
287      <section class="profile">
288        <figure class="profile__thumb">
289          <span style="background-image:url('https://tistory1.daumcdn.net/tistory/373748/attach/af0ef0205e234b4f9f09d7bce27dd237');">
290          </span>
291        </figure>
292        <h1 class="profile__title">
293          송송 DEV
294        </h1>
295        <p class="profile__desc">
296          송송은 뚠뚠
297오늘도 뚠뚠
298열심히 ~ 
299코딩 하네 뚠뚠
300        </p>
301
302      </section>
303      <!-- 태그 클라우드 -->
304      <section class="tag_wrapper">
305        
306          <div class="tagbox">
307            <ul>
308              
309                <li>
310                  <a href="/tag/swiperjs" class="cloud5"> swiperjs</a>
311                </li>
312              
313                <li>
314                  <a href="/tag/%EC%BD%94%EB%94%A9%EA%B0%95%EC%9D%98%ED%9B%84%EA%B8%B0" class="cloud5"> 코딩강의후기</a>
315                </li>
316              
317                <li>
318                  <a href="/tag/CSS" class="cloud3"> CSS</a>
319                </li>
320              
321                <li>
322                  <a href="/tag/margin%20collapse" class="cloud5"> margin collapse</a>
323                </li>
324              
325                <li>
326                  <a href="/tag/%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D%EA%B8%B0%EC%B4%88" class="cloud5"> 정규표현식기초</a>
327                </li>
328              
329                <li>
330                  <a href="/tag/%EB%AC%B8%EC%9E%90%EB%B3%B4%EB%82%B4%EA%B8%B0%EA%B8%B0%EB%8A%A5" class="cloud5"> 문자보내기기능</a>
331                </li>
332              
333                <li>
334                  <a href="/tag/%EB%A7%88%EC%A7%84%EC%83%81%EC%87%84" class="cloud5"> 마진상쇄</a>
335                </li>
336              
337                <li>
338                  <a href="/tag/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88" class="cloud5"> 코딩앙마</a>
339                </li>
340              
341                <li>
342                  <a href="/tag/%EB%AC%B4%EB%A3%8C%EA%B0%95%EC%9D%98%ED%9B%84%EA%B8%B0" class="cloud5"> 무료강의후기</a>
343                </li>
344              
345                <li>
346                  <a href="/tag/%EC%84%9C%EB%B8%8C%EC%85%8B%ED%8C%85" class="cloud5"> 서브셋팅</a>
347                </li>
348              
349                <li>
350                  <a href="/tag/Next.js%EA%B0%95%EC%9D%98" class="cloud5"> Next.js강의</a>
351                </li>
352              
353                <li>
354                  <a href="/tag/%EC%A0%95%EA%B7%9C%EC%8B%9D%EA%B8%B0%EC%B4%88%EB%AC%B8%EB%B2%95" class="cloud5"> 정규식기초문법</a>
355                </li>
356              
357                <li>
358                  <a href="/tag/%EC%B9%B4%EC%B9%B4%EC%98%A4%EA%B3%B5%EC%9C%A0" class="cloud5"> 카카오공유</a>
359                </li>
360              
361                <li>
362                  <a href="/tag/%EC%84%9C%EB%B8%8C%EC%85%8B%ED%8F%B0%ED%8A%B8" class="cloud5"> 서브셋폰트</a>
363                </li>
364              
365                <li>
366                  <a href="/tag/%EB%B8%94%EB%A1%9D%EC%84%9C%EC%8B%9D%EB%A7%A5%EB%9D%BD" class="cloud5"> 블록서식맥락</a>
367                </li>
368              
369                <li>
370                  <a href="/tag/%EB%A9%94%EC%8B%9C%EC%A7%80%ED%85%9C%ED%94%8C%EB%A6%BF" class="cloud5"> 메시지템플릿</a>
371                </li>
372              
373                <li>
374                  <a href="/tag/JQuery%EB%8B%AC%EB%A0%A5" class="cloud5"> JQuery달력</a>
375                </li>
376              
377                <li>
378                  <a href="/tag/%EB%8B%AC%EB%A0%A5%EB%A0%8C%EB%8D%94%EB%A7%81" class="cloud5"> 달력렌더링</a>
379                </li>
380              
381                <li>
382                  <a href="/tag/jank" class="cloud5"> jank</a>
383                </li>
384              
385                <li>
386                  <a href="/tag/S3%EC%97%85%EB%A1%9C%EB%93%9C" class="cloud5"> S3업로드</a>
387                </li>
388              
389                <li>
390                  <a href="/tag/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8B%AC%EB%A0%A5" class="cloud5"> 자바스크립트달력</a>
391                </li>
392              
393                <li>
394                  <a href="/tag/KS%20X%201001" class="cloud5"> KS X 1001</a>
395                </li>
396              
397                <li>
398                  <a href="/tag/Next.js" class="cloud3"> Next.js</a>
399                </li>
400              
401                <li>
402                  <a href="/tag/jank%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0" class="cloud5"> jank해결하기</a>
403                </li>
404              
405                <li>
406                  <a href="/tag/%EC%97%AC%EB%B0%B1%EC%83%81%EC%87%84" class="cloud5"> 여백상쇄</a>
407                </li>
408              
409                <li>
410                  <a href="/tag/%EC%9B%B9%ED%8F%B0%ED%8A%B8%EA%B2%BD%EB%9F%89%ED%99%94" class="cloud5"> 웹폰트경량화</a>
411                </li>
412              
413                <li>
414                  <a href="/tag/JavaScript" class="cloud1"> JavaScript</a>
415                </li>
416              
417                <li>
418                  <a href="/tag/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%AC%B8%EC%9E%90" class="cloud5"> 자바스크립트문자</a>
419                </li>
420              
421                <li>
422                  <a href="/tag/API%EC%82%AC%EC%9A%A9%EB%B2%95" class="cloud5"> API사용법</a>
423                </li>
424              
425                <li>
426                  <a href="/tag/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8" class="cloud3"> 자바스크립트</a>
427                </li>
428              
429            </ul>
430          </div>
431        
432      </section>
433      <section class="container">
434        
435        <article id="content">
436          
437
438          <!-- [s] 본문 페이지-->
439          
440
441          
442
443
444
445          <!-- [s]보호글 -->
446          
447
448          <!-- [s] 글그룹 -->
449
450          <!-- [s] 리스트 그룹 -->
451          
452            <div class="post-header">
453              <span>
454                <h1>구현</h1>
455              </span>
456              <span class="number" style="padding-left: 5px; font-weight: bold; color:#72afcf;">8</span>
457              <div class="list-type">
458                <button type="button" class="thum"><i class="fas fa-th-large"></i><span>썸네일형</span></button>
459                <button type="button" class="list"><i class="fas fa-th-list"></i><span>리스트형</span></button>
460              </div>
461            </div>
462            <ul class="article-list">
463              
464                <li class="article-item">
465
466                  <a href="/entry/Auto-Generated-Post-Tables" class="article-link">
467                    <figure>
468                      
469                        <span style="background-image:url('//i1.daumcdn.net/thumb/R600x0/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FpPUew%2FbtsjGZPkWJK%2FAAAAAAAAAAAAAAAAAAAAAOElWBOuJCCp_xkTKyjSeFO8xycTMsQhFHLURb8Gf82H%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3DGUJZOCUIzp0Gkk0rLLhJT2g1%252B1U%253D')"></span>
470                      
471                    </figure>
472                  </a>
473                  <div class="article-info">
474                    <div class="article-meta">
475
476                      <a href="/category/%EA%B5%AC%ED%98%84" target="_self" class="category">
477                        구현
478                      </a>
479                      <span class="date">2023.06.13</span>
480                    </div>
481
482                    <a href="/entry/Auto-Generated-Post-Tables">
483                      <span class="title">게시물 Table Of Contents 자동 목차 만들기</span>
484                      <span class="excerpt">개요현재 블로그 게시글 페이지처럼 글 구조를 보여주는 목차를 페이지 한편에 띄우려 한다.이름하야 Table of Contents, 목차다. 보통 한 쪽에 글의 소제목을 나열하고, 현재 읽고 있는 부분이 어디인지 알려주거나 클릭했을 때 해당 파트로 이동할 수 있는 기능을 말한다.페이지 상의 글 구조를 분석 후 리스트를 만들어 원하는 위치에 꽂아주려 한다.&nbsp;구현 사항글의 구조를 분석하고 리스트로 만든다해당 제목을 클릭했을 때 해당 위치로 이동한다&nbsp;구현 방법페이지에서 DOM을 분석하여 글의 리스트를 추출하고, 이것을 조합하여 중첩된 ol엘리먼트로 만든다만든 엘리먼트를 원하는 위치에 꽂아준다페이지에 알맞게 스타일링을 해준다이번 글에서는 페이지에서 리스트 추출해서 화면에 붙이는 것까지만 작성할 예정이다.&nbsp;사실 작..</span>
485                    </a>
486
487                  </div>
488
489                </li>
490              
491                <li class="article-item">
492
493                  <a href="/entry/Creating-a-React-Custom-Select-Box" class="article-link">
494                    <figure>
495                      
496                        <span style="background-image:url('//i1.daumcdn.net/thumb/R600x0/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FIn1OH%2FbtshmXtl0F2%2FAAAAAAAAAAAAAAAAAAAAAHK6uy_Ezao60yai0ERyl6tQQmUQSiOYWVM2l0wM-kIY%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3DlfJwe6NylUk76wBLJL8XunqojJo%253D')"></span>
497                      
498                    </figure>
499                  </a>
500                  <div class="article-info">
501                    <div class="article-meta">
502
503                      <a href="/category/%EA%B5%AC%ED%98%84" target="_self" class="category">
504                        구현
505                      </a>
506                      <span class="date">2023.05.25</span>
507                    </div>
508
509                    <a href="/entry/Creating-a-React-Custom-Select-Box">
510                      <span class="title">리액트 커스텀 셀렉트 박스 만들기</span>
511                      <span class="excerpt">개요리액트에서 기본 셀렉트 태그가 아닌 자유롭게 스타일링할 수 있는 커스텀 셀렉트 박스를 만들어보자!브라우저에서 기본 제공하는 셀렉트 박스에 대해 알아보고 원하는 스타일을 입힐 수 있도록 커스텀 셀렉트 박스를 만들어보기로 한다.&nbsp;미리 보기PC모바일&nbsp;셀렉트 박스 알아보기&nbsp;셀렉트박스는 다양한 옵션 중에서 사용자가 하나를 선택할 수 있는 UI로 드롭다운 메뉴, 콤보박스 등 다양한 이름으로 불린다. 기본적으로 HTML의&nbsp;&nbsp;태그와&nbsp;&nbsp;태그를 이용하여 만들 수 있다.&nbsp;&nbsp;기본 셀렉트 태그먼저 기본 셀렉트 태그를 살펴보자.샘플 이미지의 소스는 mdn의 예제 소스이다. 링크PC크롬엣지파이어폭스&nbsp;모바일크롬카카오톡 브라우저삼성 인터넷&nbsp;브라우저 자체의 스타일이 있으며 CSS로 제어할 수 있는 부분이 적기 때문에 스타일 커스텀하..</span>
512                    </a>
513
514                  </div>
515
516                </li>
517              
518                <li class="article-item">
519
520                  <a href="/entry/S3%EC%97%90-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EB%8A%94-%EC%84%B8-%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95" class="article-link">
521                    <figure>
522                      
523                        <span style="background-image:url('//i1.daumcdn.net/thumb/R600x0/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FlE0z3%2FbtrQkHjfKbF%2FAAAAAAAAAAAAAAAAAAAAAMXHd4Xx3zuc6sYpbvEpcVLqduMaupdZkn3VcucljTmz%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3D1FJnl1qc7oRKe4k2rEOdbPimmP4%253D')"></span>
524                      
525                    </figure>
526                  </a>
527                  <div class="article-info">
528                    <div class="article-meta">
529
530                      <a href="/category/%EA%B5%AC%ED%98%84" target="_self" class="category">
531                        구현
532                      </a>
533                      <span class="date">2022.11.04</span>
534                    </div>
535
536                    <a href="/entry/S3%EC%97%90-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EB%8A%94-%EC%84%B8-%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95">
537                      <span class="title">S3에 파일을 업로드하는 세 가지 방법</span>
538                      <span class="excerpt">AWS SDK for Javascript v3을 이용해 next.js에서 S3에 파일 업로드를 하는 다양한 방법을 알아보자! 개요 기본 참고 자료 링크 AWS 가이드(S3 Upload) AWS 가이드(Presigned URL) 유튜브(Sam Meech-Ward) 링크로 소개한 영상에서는 express를 이용했는데, 더보기란에 첨부한 예제에 nextjs 소스도 있다. aws 설정 및 세팅 부분은 위 영상 참고하는 게 더 자세하다. 조건 DB 없음, 업로드 소스만 따로 떼어서 작성 추가 패키지 최소 사용 AWS 및 nextjs 기본 사용법 숙지한 상태라 가정 백엔드 api 통신을 많이 해 본 편이 아니라 개념이나 사용하는 패키지 등이 익숙하지가 않아 이리저리 시험해본 결과를 정리하였다. 원리에 대한 깊은 이..</span>
539                    </a>
540
541                  </div>
542
543                </li>
544              
545                <li class="article-item">
546
547                  <a href="/entry/%EC%98%A4%EB%8A%98-%ED%95%98%EB%A3%A8-%EB%B3%B4%EC%A7%80-%EC%95%8A%EA%B8%B0-%ED%8C%9D%EC%97%85-%EB%A7%8C%EB%93%A4%EA%B8%B0" class="article-link">
548                    <figure>
549                      
550                        <span style="background-image:url('//i1.daumcdn.net/thumb/R600x0/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbijWsL%2FbtrIdxWKcYj%2FAAAAAAAAAAAAAAAAAAAAABIrm-klY8TwCWprOmmH3X6f9ImxzdLc4_NZ1MwWUVxZ%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3DnHMRaDi79Jmtr15FjIFuLbPbJLs%253D')"></span>
551                      
552                    </figure>
553                  </a>
554                  <div class="article-info">
555                    <div class="article-meta">
556
557                      <a href="/category/%EA%B5%AC%ED%98%84" target="_self" class="category">
558                        구현
559                      </a>
560                      <span class="date">2022.07.26</span>
561                    </div>
562
563                    <a href="/entry/%EC%98%A4%EB%8A%98-%ED%95%98%EB%A3%A8-%EB%B3%B4%EC%A7%80-%EC%95%8A%EA%B8%B0-%ED%8C%9D%EC%97%85-%EB%A7%8C%EB%93%A4%EA%B8%B0">
564                      <span class="title">오늘 하루 보지 않기 팝업 만들기</span>
565                      <span class="excerpt">오늘 하루는 보지 않기 팝업을 구현합니다.쿠키와 로컬 스토리지가 어떤 것인지 간단하게 알아보고두가지 방법으로 구현하는 방법을 함께 알아봐요!&nbsp;구현 사항 및 방법 정리어떤 걸 구현해야 할까?사용자가 그냥 닫기를 눌렀는지, 오늘 하루 보지 않기 버튼을 눌렀는지 확인팝업이 다시 보이는 시각 계산하여 저장저장한 값을 읽고 눌렀다면 보이게, 보이지 않게 스타일 변경버튼에 이벤트 거는 설명은 생략. 오늘 중요한 건 사용자가 오늘하루 보지 않기 버튼을 눌렀는지, 안 눌렀는지 확인하는 것이다.적당한 저장 장소 찾기HTTP, 보통 볼 수 있는 웹 페이지는 상태를 저장하지 않는 stateless 프로토콜이다. 주소를 입력해 페이지를 접속하면 서버는 언제나 동일하게 똑같은 html 정보를 브라우저로 보내 준다.다시 말하자면..</span>
566                    </a>
567
568                  </div>
569
570                </li>
571              
572                <li class="article-item">
573
574                  <a href="/entry/kakao-link-api%EB%A1%9C-%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0" class="article-link">
575                    <figure>
576                      
577                        <span style="background-image:url('//i1.daumcdn.net/thumb/R600x0/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FCUtkn%2Fbtrs0u1ykin%2FAAAAAAAAAAAAAAAAAAAAAHRU9Ci7aZ5ed5-evXYZy7GSAhnK2hq4OyXdwZ6XrUJX%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3Ddg7cdmNh3%252BprR6SPzx5qGdSdeBE%253D')"></span>
578                      
579                    </figure>
580                  </a>
581                  <div class="article-info">
582                    <div class="article-meta">
583
584                      <a href="/category/%EA%B5%AC%ED%98%84" target="_self" class="category">
585                        구현
586                      </a>
587                      <span class="date">2022.02.11</span>
588                    </div>
589
590                    <a href="/entry/kakao-link-api%EB%A1%9C-%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0">
591                      <span class="title">카카오 링크 API로 카카오톡 공유하기</span>
592                      <span class="excerpt">현재 웹 페이지의 내용을 카카오톡으로 공유할 수 있는 카카오 링크 API 사용법에 대해 알아봅시다. 개요 웬만한 홈페이지에는 다 들어가있는 공유기능. API 이용이 익숙하지 않으면 무슨 소리인지 모르겠고 헤매기 십상이다. 혹시나 도움이 될까 해서 작성해본다. 관련 문서 링크 모음 카카오 링크 api sdk 다운로드 페이지 네임스페이스 안내 페이지 데모 페이지 카카오 API에서 제공하는 기능이 너무 많아 헷갈릴 수 있는데, 오늘 다룰 부분은 어플 등이 아니라 일반 홈페이지에서 사용할 것으로 Kakao SDK for JavaScript에서 제공하는 기능 중 카카오 메시지 &gt; 카카오링크(JavaScript)를 이용할 것이다. 요렇게 진행해보려 한다. 카카오 개발자 사이트에서 카카오 링크를 위해 애플리케이션을 ..</span>
593                    </a>
594
595                  </div>
596
597                </li>
598              
599                <li class="article-item">
600
601                  <a href="/entry/swiperjs-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0" class="article-link">
602                    <figure>
603                      
604                        <span style="background-image:url('//i1.daumcdn.net/thumb/R600x0/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FeB1Yj7%2Fbtrn8HKdp01%2FAAAAAAAAAAAAAAAAAAAAABvrd3wACuvkc31n5SbKtca6Ski937OdhSOSHx8gy8WS%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3DkoI1jrOsMKb8FePFB%252BpAPAsK8Wg%253D')"></span>
605                      
606                    </figure>
607                  </a>
608                  <div class="article-info">
609                    <div class="article-meta">
610
611                      <a href="/category/%EA%B5%AC%ED%98%84" target="_self" class="category">
612                        구현
613                      </a>
614                      <span class="date">2021.12.17</span>
615                    </div>
616
617                    <a href="/entry/swiperjs-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0">
618                      <span class="title">swiperjs 슬라이더 기본 사용법 알아보기</span>
619                      <span class="excerpt">swiperjs 웹사이트에 기본적으로 들어가는 슬라이더. 흔하게 쓰이는 기능인만큼 슬라이더 플러그인도 엄청나게 많다. 오늘은 그 중에서 swiperjs를 소개 하려 한다. 실제로 사용하면서 초보 시절에 헷갈렸던 부분이나 최근 새로 알게 된 팁들까지 최대한 자세하게 작성했다. swiperjs 장점 많고 많은 슬라이더 중에서 swiper를 사용하게 된 이유는 아래와 같다. 많은 예시 및 자세한 api 안내글 &rarr; 혼자서 배우기 좋음 사용하는 사람 많음 &rarr; 자료 찾기 쉬움 다양한 기능 지원 &rarr; 커스텀하여 사용하기 편리함 vue, reactjs 프레임워크용 슬라이더 지원 &rarr; 한 번 배워두면 여기저기 사용하기 좋음 자, 이렇게 장점이 많은 슬라이더, 어떻게 쓰는 건지 한번 알아나 봅시다. 01. GET STARTE..</span>
620                    </a>
621
622                  </div>
623
624                </li>
625              
626                <li class="article-item">
627
628                  <a href="/entry/Javascript%EB%A1%9C-%EB%8B%AC%EB%A0%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0" class="article-link">
629                    <figure>
630                      
631                        <span style="background-image:url('//i1.daumcdn.net/thumb/R600x0/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdVcujc%2FbtrndGkrTYR%2FAAAAAAAAAAAAAAAAAAAAADQFAK_ujLLRsUtGog6bkxk_1ws6G4N5aBE0BDK0DxV_%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3DlhFZIfzbyyawco4eBOAGztpkYOA%253D')"></span>
632                      
633                    </figure>
634                  </a>
635                  <div class="article-info">
636                    <div class="article-meta">
637
638                      <a href="/category/%EA%B5%AC%ED%98%84" target="_self" class="category">
639                        구현
640                      </a>
641                      <span class="date">2021.12.06</span>
642                    </div>
643
644                    <a href="/entry/Javascript%EB%A1%9C-%EB%8B%AC%EB%A0%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0">
645                      <span class="title">자바스크립트로 달력 만들기</span>
646                      <span class="excerpt">오늘의 만들어볼까요? 자바스크립트의 date객체를 이용해 달력을 만들어보자. 만들기 조건 table이 아니라 flex 레이아웃을 이용 클래스를 활용해 css로 스타일 지정 달력은 월요일부터 시작 이전달의 월요일부터 마지막 날까지 표기 다음 달의 1일부터 일요일까지 표기 선택자 등등은 JQuery 이용 1. 날짜 가져오기 날짜 정보를 가져오기 위해서 자바스크립트의 date 객체를 이용할 예정이다. date 객체는 세계표준시(UTC) 1970년 1월 1일 00시 00분 00초를 기준으로 현재와 얼마나 시간 차가 얼마나 되는지 밀리초 단위로 나타낸다. 이 시간 차이를 조정하여 원하는 날짜를 표기할 수 있다. 기본적으로 아래와 같이 사용한다. console.log(new Date()); // 현재 날짜(로컬 기..</span>
647                    </a>
648
649                  </div>
650
651                </li>
652              
653                <li class="article-item">
654
655                  <a href="/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EB%AC%B8%EC%9E%90%EB%A9%94%EC%8B%9C%EC%A7%80-%EB%B3%B4%EB%82%B4%EA%B8%B0" class="article-link">
656                    <figure>
657                      
658                        <span style="background-image:url('//i1.daumcdn.net/thumb/R600x0/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbqJ6Xf%2Fbtrl5vlJ6Iu%2FAAAAAAAAAAAAAAAAAAAAANZ4CAZVJ9Tc0DmL46m9qViIH
658MVQDlj9UQ6_JZVlJKKv%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3DTEsYm0wEXWrL5vPQrICJbw%252FzKoo%253D')"></span>
659                      
660                    </figure>
661                  </a>
662                  <div class="article-info">
663                    <div class="article-meta">
664
665                      <a href="/category/%EA%B5%AC%ED%98%84" target="_self" class="category">
666                        구현
667                      </a>
668                      <span class="date">2021.11.25</span>
669                    </div>
670
671                    <a href="/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EB%AC%B8%EC%9E%90%EB%A9%94%EC%8B%9C%EC%A7%80-%EB%B3%B4%EB%82%B4%EA%B8%B0">
672                      <span class="title">자바스크립트로 문자메시지 보내기</span>
673                      <span class="excerpt">문자보내기 기능 구현하기. 여기에 URI Scheme과 URI 이스케이프를 곁들인... 오늘의 주제? 문자로 공유하기 기능 개발하려고 한다. 링크를 누르면 원하는 사람을 선택하여 정해둔 메시지를 보낼 수 있게 하는 기능이다. 결론부터 말하자면 a 태그에 href 속성에 일반적인 링크 주소인 http://가 아니라 문자 메시지를 의미하는 sms:를 이용하여 간단하게 구현할 수 있다. 안드로이드 문자보내기 iOS8 이상 문자보내기 iOS8 미만 문자보내기 여기서 : 앞에 오는 문자, sms 는 URI 스킴이라고 부른다. 이게 과연 무엇을 뜻하는 걸까? 한번 정리해보려고 한다. URI 스킴(URI Scheme)이란? Uniform Resource Identifier (URI) Schemes URI : 통합 자..</span>
674                    </a>
675
676                  </div>
677
678                </li>
679              
680            </ul>
681          
682
683                
684          
685  
686
687          
688      
689          
690  
691
692          
693      
694          
695  
696
697          
698      
699          
700  
701
702          
703      
704          
705  
706
707          
708      
709          
710  
711
712          
713      
714          
715  
716
717          
718      
719          
720  
721
722          
723      
724
725          <!-- [e] 글 그룹 -->
726
727
728          
729
730          <!-- [s]방명록 -->
731          
732
733          <!-- [s] 페이지네이션 -->
734          
735            <div class="pagination">
736
737              <a  class="prev no-more-prev">이전</a>
738              
739
740                <a href="/category/%EA%B5%AC%ED%98%84?page=1"><span class="selected">1</span></a>
741              
742
743              <a  class="next no-more-next">다음</a>
744            </div>
745          
746        </article>
747      </section>
748      <hr>
749      
750      <!-- [s]푸터-->
751      <footer id="footer">
752        <!-- <div class="toggle-mode">
753					<button class="toggle-button">
754						다크
755					</button>
756				</div> 
757-->
758        <p class="copyright">DESIGN BY
759
760          <a href="#">TISTORY</a>
761
762          <a href="https://ylem76.tistory.com/manage" class="admin">관리자</a>
763        </p>
764      </footer>
765    </div>
766
767  
768  
768<script>
769    // 애드센스 삽입
770    function bodyAdInit() {
771      var adContent = '<ins class="adsbygoogle" style="display:block; text-align:center; width:calc(100% - 28px);" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3549159921171034" data-ad-slot="3009618201" data-full-width-responsive="true"></ins>';
772      var h1Array = document.querySelectorAll(".entry-content h1");
773
774      Array.prototype.forEach.call(h1Array, function(h1, idx) {
775        if (idx === 0) {
776          return
777        }
778        $(h1).before(adContent);
779        (adsbygoogle = window.adsbygoogle || []).push({});
780      });
781    }
782    bodyAdInit();
783  </script>
783
784  
784<script src="https://tistory1.daumcdn.net/tistory/373748/skin/images/script.js?_version_=1715699145"></script>
784
785  
785<script src="https://tistory1.daumcdn.net/tistory/373748/skin/images/toc.js?_version_=1715699145"></script>
785
786  
786<script src="https://tistory1.daumcdn.net/tistory/373748/skin/images/kakao_share.js?_version_=1715699145"></script>
786
787  
788  
789<div class="#menubar menu_toolbar ">
790  <h2 class="screen_out">티스토리툴바</h2>
791</div>
792<div class="#menubar menu_toolbar "></div>
793<div class="layer_tooltip">
794  <div class="inner_layer_tooltip">
795    <p class="desc_g"></p>
796  </div>
797</div>
798<div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div>
799
800
801                        <!-- CallBack - START -->
802        
802<script>                    (function () { 
803                        var blogTitle = '송송은 오늘도 열심히 코딩 하네';
804                        
805                        (function () {
806    function isShortContents () {
807        return window.getSelection().toString().length < 30;
808    }
809    function isCommentLink (elementID) {
810        return elementID === 'commentLinkClipboardInput'
811    }
812
813    function copyWithSource (event) {
814        if (isShortContents() || isCommentLink(event.target.id)) {
815            return;
816        }
817        var range = window.getSelection().getRangeAt(0);
818        var contents = range.cloneContents();
819        var temp = document.createElement('div');
820
821        temp.appendChild(contents);
822
823        var url = document.location.href;
824        var decodedUrl = decodeURI(url);
825        var postfix = ' [' + blogTitle + ':티스토리]';
826
827        event.clipboardData.setData('text/plain', temp.innerText + '\n출처: ' + decodedUrl + postfix);
828        event.clipboardData.setData('text/html', '<pre data-ke-type="codeblock">' + temp.innerHTML + '</pre>' + '출처: <a href="' + url + '">' + decodedUrl + '</a>' + postfix);
829        event.preventDefault();
830    }
831
832    document.addEventListener('copy', copyWithSource);
833})()
834
835                    })()</script>
835
836
837        <!-- CallBack - END -->
838
839<!-- DragSearchHandler - START -->
840<script src="//search1.daumcdn.net/search/statics/common/js/fe/search-library-workspace/drag-search/1.0.2/main.js"></script>
840
841
842<!-- DragSearchHandler - END -->
843
844        <!-- SyntaxHighlight - START -->
845        <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/styles/atom-one-dark-reasonable.min.css" rel="stylesheet"/>
845<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/highlight.min.js"></script>
vendor: 1 bytes, line 845
845
846<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/delphi.min.js"></script>
vendor: 1 bytes, line 846
846
847<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/php.min.js"></script>
vendor: 1 bytes, line 847
847
848<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/python.min.js"></script>
vendor: 1 bytes, line 848
848
849<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/r.min.js" defer></script>
vendor: 1 bytes, line 849
849
850<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/ruby.min.js"></script>
vendor: 1 bytes, line 850
850
851<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/scala.min.js" defer></script>
vendor: 1 bytes, line 851
851
852<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/shell.min.js"></script>
vendor: 1 bytes, line 852
852
853<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/sql.min.js"></script>
vendor: 1 bytes, line 853
853
854<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/swift.min.js" defer></script>
vendor: 1 bytes, line 854
854
855<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/typescript.min.js" defer></script>
vendor: 1 bytes, line 855
855
856<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/vbnet.min.js" defer></script>
856
857  
857<script>hljs.initHighlightingOnLoad();</script>
857
858
859
860        <!-- SyntaxHighlight - END -->
861
862                
863                <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
864<script type="text/javascript" src="https://edge.daumcdn.net/tistory/tistory-admin/userblog/userblog-542bd84ce37260cece1e68a465e3c63534629c86/static/script/common.js"></script>
864
865
866                
867                
867<script>window.tiara = {"svcDomain":"user.tistory.com","section":"기타","trackPage":"글뷰_보기","page":"글뷰","key":"373748","customProps":{"userId":"0","blogId":"373748","entryId":"null","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":null,"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null","thirdProvideAgree":null}</script>
vendor: 1 bytes, line 867
867
868<script type="module" src="https://edge.daumcdn.net/tistory/tistory-admin/frontend/tiara/v1.0.8/index.js"></script>
vendor: 1 bytes, line 868
868
869<script src="https://edge.daumcdn.net/tistory/tistory-admin/frontend/tiara/v1.0.8/polyfills-legacy.js" nomodule="true" defer="true"></script>
vendor: 1 bytes, line 869
869
870<script src="https://edge.daumcdn.net/tistory/tistory-admin/frontend/tiara/v1.0.8/index-legacy.js" nomodule="true" defer="true"></script>
870
871
872                </body>
873
874</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.