마크다운 페이지

2022. 2. 9. 11:46ㆍ공부/HTML5

제목(Header)

#의 개수만큼 제목의 크기가 달라진다. h1 ~ h6 태그와 유사

# 제목 (#과 제목 사이에 공백 한 칸이 반드시 들어가야 함)

h1

h2

h3

h4

h5

h6

문장 (Paragraph) 및 줄바꿈

일반적으로 마크다운에선 줄바꿈 처리를 해주지 않으면 한 줄로 계속 내용이 이어짐.

공백 두번 또는 br 태그를 통해 줄바꿈 처리를 해주어야 한다.

동해물과 백두산이 마르고 닳도록(공백 X)
하나님이 보우하사 우리나라 만세(공백 두번)  
무궁화 삼천리 화려강산</br>
대한사람 대한으로 길이 보전하세

동해물과 백두산이 마르고 닳도록하나님이 보우하사 우리나라 만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세

강조(Emphasis)

_이탤릭_

**두껍게**

**_이탤릭 + 두껍게_**

~~취소선~~

<u>밑줄</u> //원시 HTML 문법

이탤릭

두껍게

이탤릭 + 두껍게

~~취소선~~

밑줄

목록(List)

각 항목 앞에 1.을 붙이면 자동으로 순서를 계산해서 표시해줌.
중간에 삽입하거나 삭제하여도 자동으로 반영.
서브 항목을 삽입하기 위해선 빈칸 네개를 삽입해주어야 함

1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
    1. 순서가 필요한 목록
    1. 순서가 필요한 목록
1. 순서가 필요한 목록

순서가 필요한 목록
순서가 필요한 목록
순서가 필요한 목록
1. 순서가 필요한 목록
2. 순서가 필요한 목록
순서가 필요한 목록
순서 없는 목록을 만들기 위해선 - 기호를 이용
```

순서가 필요없는 목록
순서가 필요없는 목록
순서가 필요없는 목록
```
순서가 필요없는 목록
순서가 필요없는 목록
순서가 필요없는 목록

링크(Links)

[링크 이름](링크 주소 "링크 설명")
[Naver](https://naver.com)
[리암 티스토리](https://riam.tistory.com/ "리암의 티스토리입니다.")

Naver
리암 티스토리

이미지(images)

![이미지이름](이미지 주소)
[![이미지이름](이미지 주소)](링크주소) // 이미지를 눌러 주소로 이동하는 방식
[![R](https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/LetterR.svg/84px-LetterR.svg.png)](https://riam.tistory.com/)

인용문(BlockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 떠온 문장.
> (네이버 국어사전)

> 인용문을 작성하세요!
>> 중첩된 인용문
>>> 중중첩된 인용문1
>>> 중중첩된 인용문2
>>> 중중첩된 인용문3

남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어 사전)

인용문을 작성하세요!

중첩된 인용문

중중첩된 인용문 1
중중첩된 인용문 2
중중첩된 인용문 3

인라인 코드 강조

백틱 기호( ` )로 문장을 감싸면 감싼 부분 하이라이트 처리.

블록 코드 강조

백틱 기호 3개로 문단을 감싸면 감싼 부분 블록 처리
```
문단
```
``` 오른쪽에 html, css, javascript, plaintext 등 표시하면 하이라이트 처리 방식을 바꿀 수 있음.

문단

<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>

.list > li {
  position: absolute;
  top: 40px;
}

function func() {
  var a = 'AAA';
  return a;
}

$ git commit -m 'Study Markdown'

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세

표

position 속성.
콜론 기호(:)는 붙이는 부분에 따라 컬럼의 좌우정렬을 선택할 수 있다.
버티컬 기호로 컬럼 구분.

값 | 의미 | 기본값
--|:--:|--:
static | 기준 없음 | O
relative | 요소 자신 | X
absolute | 위치 상 부모 요소 | X
fixed | 뷰포트 | X

값	의미	기본값
static	기준 없음	O
relative	요소 자신	X
absolute	위치 상 부모 요소	X
fixed	뷰포트	X

원시 HTML 태그

u : span 태그로 교체 가능.
br
a
img : width속성으로 크기 조절 가능동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세

수평선(Horizontal Rule)

--- (대쉬)
*** (애스터리스크)
___ (로대쉬)

'공부 > HTML5' 카테고리의 다른 글

HTML TAG (0)	2022.02.07

HTML TAG 2022.02.07

Riam