엑시스트 블로그
테스트 포스트
--- __Advertisement :)__ - __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image resize in browser. - __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly i18n with plurals support and easy syntax. You will like those projects! --- # h1 Heading 8-) ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading ## Horizontal Rules ___ --- *** ## Typographic replacements Enable typographer option to see result. (c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test... test..... test?..... test!.... !!!!!! ???? ,, -- --- "Smartypants, double quotes" and 'single quotes' ## Emphasis **This is bold text** __This is bold text__ *This is italic text* _This is italic text_ ~~Strikethrough~~ ## Blockquotes > Blockquotes can also be nested... >> ...by using additional greater-than signs right next to each other... > > > ...or with spaces between arrows. ## Lists Unordered + Sub-lists are made by indenting 2 spaces: - Marker character change forces new list start: * Ac tristique libero volutpat at + Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit + Very easy! Ordered 1. Lorem ipsum dolor sit amet 2. Consectetur adipiscing elit 3. Integer molestie lorem at massa 1. You can use sequential numbers... 1. ...or keep all the numbers as `1.` Start numbering with offset: 57. foo 1. bar ## Code Inline `code` Indented code // Some comments line 1 of code line 2 of code line 3 of code Block code "fences" ``` Sample text here... ``` Syntax highlighting ``` js var foo = function (bar) { return bar++; }; console.log(foo(5)); ``` ## Tables | Option | Description | | ------ | ----------- | | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | Right aligned columns | Option | Description | | ------:| -----------:| | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | ## Links [link text](http://dev.nodeca.com) [link with title](http://nodeca.github.io/pica/demo/ "title text!") Autoconverted link https://github.com/nodeca/pica (enable linkify to see) ## Images   Like links, Images also have a footnote style syntax ![Alt text][id] With a reference later in the document defining the URL location: [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" ## Plugins The killer feature of `markdown-it` is very effective support of [syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). ### [Emojies](https://github.com/markdown-it/markdown-it-emoji) > Classic markup: :wink: :cry: :laughing: :yum: > > Shortcuts (emoticons): :-) :-( 8-) ;) see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. ### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) - 19^th^ - H~2~O ### [\<ins>](https://github.com/markdown-it/markdown-it-ins) ++Inserted text++ ### [\<mark>](https://github.com/markdown-it/markdown-it-mark) ==Marked text== ### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) Footnote 1 link[^first]. Footnote 2 link[^second]. Inline footnote^[Text of inline footnote] definition. Duplicated footnote reference[^second]. [^first]: Footnote **can have markup** and multiple paragraphs. [^second]: Footnote text. ### [Definition lists](https://github.com/markdown-it/markdown-it-deflist) Term 1 : Definition 1 with lazy continuation. Term 2 with *inline markup* : Definition 2 Third paragraph of definition 2. _Compact style:_ Term 1 ~ Definition 1 Term 2 ~ Definition 2a ~ Definition 2b ### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) This is HTML abbreviation example. It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. *[HTML]: Hyper Text Markup Language ### [Custom containers](https://github.com/markdown-it/markdown-it-container) ::: warning *here be dragons* :::
learn
more
테스트 포스트 2
--- __Advertisement :)__ - __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image resize in browser. - __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly i18n with plurals support and easy syntax. You will like those projects! --- # h1 Heading 8-) ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading ## Horizontal Rules ___ --- *** ## Typographic replacements Enable typographer option to see result. (c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test... test..... test?..... test!.... !!!!!! ???? ,, -- --- "Smartypants, double quotes" and 'single quotes' ## Emphasis **This is bold text** __This is bold text__ *This is italic text* _This is italic text_ ~~Strikethrough~~ ## Blockquotes > Blockquotes can also be nested... >> ...by using additional greater-than signs right next to each other... > > > ...or with spaces between arrows. ## Lists Unordered + Sub-lists are made by indenting 2 spaces: - Marker character change forces new list start: * Ac tristique libero volutpat at + Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit + Very easy! Ordered 1. Lorem ipsum dolor sit amet 2. Consectetur adipiscing elit 3. Integer molestie lorem at massa 1. You can use sequential numbers... 1. ...or keep all the numbers as `1.` Start numbering with offset: 57. foo 1. bar ## Code Inline `code` Indented code // Some comments line 1 of code line 2 of code line 3 of code Block code "fences" ``` Sample text here... ``` Syntax highlighting ``` js var foo = function (bar) { return bar++; }; console.log(foo(5)); ``` ## Tables | Option | Description | | ------ | ----------- | | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | Right aligned columns | Option | Description | | ------:| -----------:| | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | ## Links [link text](http://dev.nodeca.com) [link with title](http://nodeca.github.io/pica/demo/ "title text!") Autoconverted link https://github.com/nodeca/pica (enable linkify to see) ## Images   Like links, Images also have a footnote style syntax ![Alt text][id] With a reference later in the document defining the URL location: [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" ## Plugins The killer feature of `markdown-it` is very effective support of [syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). ### [Emojies](https://github.com/markdown-it/markdown-it-emoji) > Classic markup: :wink: :cry: :laughing: :yum: > > Shortcuts (emoticons): :-) :-( 8-) ;) see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. ### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) - 19^th^ - H~2~O ### [\<ins>](https://github.com/markdown-it/markdown-it-ins) ++Inserted text++ ### [\<mark>](https://github.com/markdown-it/markdown-it-mark) ==Marked text== ### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) Footnote 1 link[^first]. Footnote 2 link[^second]. Inline footnote^[Text of inline footnote] definition. Duplicated footnote reference[^second]. [^first]: Footnote **can have markup** and multiple paragraphs. [^second]: Footnote text. ### [Definition lists](https://github.com/markdown-it/markdown-it-deflist) Term 1 : Definition 1 with lazy continuation. Term 2 with *inline markup* : Definition 2 Third paragraph of definition 2. _Compact style:_ Term 1 ~ Definition 1 Term 2 ~ Definition 2a ~ Definition 2b ### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) This is HTML abbreviation example. It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. *[HTML]: Hyper Text Markup Language ### [Custom containers](https://github.com/markdown-it/markdown-it-container) ::: warning *here be dragons* :::
hello
world
테스트3
개요 == 스크롤 애니메이션은 최근 많은 사이트에서 찾아볼 수 있는 애니메이션 종류 중에 하나입니다. 사용자가 스크롤하는 것에 따라 반응하여 애니메이션이 동작하기 때문에 유저 인터랙션 측면에서도 긍정적인 역할을 가져오며 사이트의 완성도를 크게 높일 수 있는 방법중 하나입니다. 제가 스크롤 애니메이션을 구현한 사이트는 아래 두 사이트입니다. [데브게이트 | 스타트업 전문 개발사](https://devgate.kr/) [김민수 | 풀스택 개발자](https://minsu.info/) 그리고 이 예제에서는 제가 만들고 있는 제 외주 사업사 홈페이지, 코드스테이션 사이트를 이용하고자 합니다. [코드스테이션 | 당신이 찾던 개발외주사](https://codestation.kr/) Intersection Observer ===================== Intersection Observer는 브라우저에서 제공하는 API입니다. 비교적 최신 API이며 현재 모든 브라우저에서 지원합니다. [Intersection Observer API - Web API | MDN](https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%ED%98%B8%ED%99%98%EC%84%B1) 자세한 설명은 위 모질라 공식문서를 참고해주세요! 간단하게 정리하자면 특정 요소가 viewport에서 어느 위치에 있는지를 비동기적으로 받아올 수 있는 API입니다. 이를 이용해 특정 범주에서 스크롤이 발생할 수 있도록 구현할 수 있습니다. 다만, 저는 좀 더 편하게 구현하도록 svelte-inview라는 패키지를 사용하려 합니다. Svelte-inview 패키지 ----------------- [npm: svelte-inview](https://www.npmjs.com/package/svelte-inview) 아직까지는 그래도 지속적으로 관리를 해주는 것 같고 버전도 4버전까지 올라왔기 때문에 사용하도록 하겠습니다. 사실 패키지를 많이 사용하는 걸 추천하진 않으나 중요한 로직도 아니고 작동하지 않는다고 해서 큰 문제가 되진 않기 때문에 일단은 해당 패키지를 이용해서 사용하도록 하겠습니다. ScrollDetectContainer ===================== 저는 보다 편하게 많은 곳에서 사용할 수 있도록 하기 위해 ScrollDetectContainer라는 이름의 컴포넌트를 만들어봤습니다. 해당 코드는 아래와 같습니다. ``` <script lang="ts"> // src/lib/components/ScrollDetectContainer.svelte import { inview } from 'svelte-inview'; export let isInView: boolean; </script> <div class=" hidden delay-75" /> <div class=" hidden delay-150" /> <div class=" hidden delay-200" /> <div class=" hidden delay-300" /> <div class=" hidden delay-500" /> <div class=" hidden delay-700" /> <div use:inview={{ unobserveOnEnter: true, rootMargin: '-20%', }} on:change={(e) => { isInView = e.detail.inView; }} > <slot /> </div> ```
안녕
하세요
