Now Loading ...
-
Markdown 문법
Markdown 문법
게시물 작성하면서, Markdown을 많이 사용할텐데, 요약집처럼 정리해보았다.
제목
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6
제목 1
제목 2
제목 3
제목 4
제목 5
제목 6
<h1>, <h2>는 다음과 같이 표현할 수도 있습니다.
제목 1
======
제목 2
------
제목 1
제목 2
강조
이텔릭체 : *별 기호* 혹은 _언더바_
볼드 : **별 기호** 혹은 __언더바__
__*이텔릭체*와 볼드__ 혼용 가능
취소선 : ~~물결 기호~~
밑줄 : 직접 `<u></u>` <u>밑줄</u> 사용
이텔릭체 : 별 기호 혹은 언더바
볼드 : 별 기호 혹은 언더바
이텔릭체와 볼드 혼용 가능
취소선 : 물결 기호
밑줄 : 직접 <u></u> 밑줄 사용
목록
`-`로 시작하는 순서가 없는 목록으로 구분합니다.
1. 순서가 있는 항목
1. 순서가 있는 항목
- 순서가 없는 항목
- 순서가 없는 항목
1. 순서가 있는 항목
1. 순서가 있는 항목
- 순서가 없는 항목
- 순서가 없는 항목
- 순서가 없는 항목
- 순서가 없는 항목
-로 시작하는 순서가 없는 목록으로 구분합니다.
순서가 있는 항목
순서가 있는 항목
순서가 없는 항목 (4depth)
순서가 없는 항목 (4depth)
순서가 있는 항목
순서가 있는 항목
순서가 없는 항목
순서가 없는 항목
순서가 없는 항목
순서가 없는 항목
링크
[이름](링크)
[이름](링크 "설명")
[이름][참조]
[참조]: 링크
[참조]: 링크 "설명"
링크 문법 구조
[GOOGLE](https://google.com)
[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")
[상대적 참조](../users/login)
[Dribbble][Dribbble Link]
[GitHub][1]
문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>
[Dribbble Link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"
GOOGLE
NAVER
상대적 참조
Dribbble
GitHub
문서 안에서 참조 링크를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: https://naver.com
이미지
![대체텍스트][참조]
[참조]: 이미지주소
[참조]: 이미지주소 "설명"
![이미지입니다!][Image]
[Image]: https://picsum.photos/500/300 "이미지입니다!"
이미지에 링크 추가
[](https://dmstjd1024.github.io/)
코드 강조
`background` 혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.
background 혹은 background-image 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.
블록
// 연속 백틱 3개 시작, 종료 구조
```언어이름
내용
```
function add(a, b = 1) {
console.log(a, b)
return a + b
}
$ npm run dev
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
백틱 기호 사용
\`
<code>\`</code>
`
\`
표
| 헤더 | 헤더 | 헤더 |
|---|---|---|
| 셀 | 셀 | 셀 |
| 셀 | 셀 | 셀 |
헤더 | 헤더 | 헤더
---|---|---
셀 | 셀 | 셀
셀 | 셀 | 셀
값
의미
기본값
static
유형(기준) 없음 / 배치 불가능
static
relative
요소 자신을 기준으로 배치
absolute
위치 상 부모(조상)요소를 기준으로 배치
fixed
브라우저 창을 기준으로 배치
sticky
스크롤 영역 기준으로 배치
값
의미
버티컬바 출력
|
인라인 코드 강조
\|
인용문
> 인용문 - 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> _(네이버 국어 사전)_
BREAK!
> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩 인용문 1
>>> 중중첩 인용문 2
>>> 중중첩 인용문 3
인용문 - 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어 사전)
BREAK!
인용문을 작성하세요!
중첩된 인용문(nested blockquote)을 만들 수 있습니다.
중중첩 인용문 1
중중첩 인용문 2
중중첩 인용문 3
원시 HTML
<img width="150" src="http://gstatic.com/webp/gallery/4.jpg" alt="Prunus" title="마크다운은 이미지의 크기를 지정할 수 없으므로, 크기 지정을 위해서는 <img> 태그를 사용해야 합니다.">
수평선
---
***
___
줄바꿈
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산 <!--띄어쓰기 2번--> 대한
사람 대한으로 길이 보전하세<br>
끝!
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산 대한
사람 대한으로 길이 보전하세
끝!
주석
-- 시작 --
[//]: # (주석은 이렇게 작성합니다.)
[//]: # (이 주석은 렌더링되지 않습니다.)
[//]: # (주석은 이렇게 작성합니다.)
[//]: # (이 주석은 렌더링되지 않습니다.)
-- 끝 --
– 시작 –
– 끝 –
[참조]
markdown guide
HEROPY.DEV
-
SSR, SSG
SSR, SSG, jamstack
SSR
Server Side Rendering으로 서버에서 HTML 구조로 응답하는 방식
CSR
Client Side Rendering (ex Angular, React, Vue) javascript로 동적 페이지를 출력
SPA
Single Page Application으로 한 페이지 내에서 모든 동작을 수행 ( CSR과는 다른 개념)
SEO (Search Engine Optimization)
검색 페이지 적합하게 만들어진 페이지, 크롤링을 통해 구조, 컨텐츠 파악해 목차와 색인을 만드어 사용자 검색의 결과물을 나타낸다.
Next.js, Nuxt.js
Next.js는 React, Nuxt.js는 Vue에 각각 두개의 장점을 가져오는 ssr로 페이지를 제공하는 기능들을 추가 즉( CSR을 통해 비 동기인 방식으로 요청했을 때, SSR의 장점인 html 구조로 응답하는 방식
Vue를 통해 만든 프로젝트를 요청했을 때, 처음에 div만 들어있는 페이지를 호출하고, 브라우저의 요청이 실행되었을 때, 링크된 자바스크립트 파일을 다운로드 뒤 데이터를 요청해서 서버에 받아온 데이터들을 클라이언트에서 모양을 생성해 출력한다. 이때 요청이나 로직이 많은 경우라면 시작 시에 딜레이가 발생한다.
허나 Next.js나 Nuxt.js를 사용하면 기존에 노출시키고 싶은 페이지와 데이터를 mounted()를 통해 먼저 렌더링 한 후, fetch 코드를 사용하여 변화되는 데이터를 API 서버에 요청해 받아오는 것이다. node js가 깔린 서버에서 프로젝트를 어플리케이션으로 실행해 프론트를 배포한다. 즉, 페이지에서 접속시 바로 출력할 내용을 서버에 미리 렌더링 해 출력한다.
또한 mounted를 통해 먼저 렌더링했을 경우 SEO에 잡힐 수 있기 때문에 검색결과에 노출 비중이 높다.
SSG
Static Site Generator, 정적 사이트 생성기, -> 렌더링을 다 마친 정적 파일들을 배포,
정적인 사이트를 만들 때엔 json, yaml, xml등의 view 파일에 저장하고 build 시 html 태그 구조에 맞게 수정한 html 파일을 서버에 저장시켜 놓는다. (Next, Hugo, Gatsby)
Jam Stack
Javascript API Markup + Stack 으로 웹서비스 만드는 설계 방식,
pre-landering, decoupling
자바 스크립트를 사용한 Jam으로 페이지를 Pre 렌더링 후 외부 API 서비스로 아웃소싱해서 설계 분리(decoupling)
이렇게 만든 정적 페이지를 CDN으로 배포하는 방식이다. 이걸 통해 비용절감, 보안강화, 사이트 확장에 용이하다.
Touch background to close
전은성 Dev
