Markdown

SongE·2022년 4월 20일
1

(KDT FE2) Study Note 🧾

목록 보기
6/10
post-thumbnail

1. 개요

장점

  • 문법이 쉽고 간결하다!
  • 관리가 쉽다!
  • 지원 가능한 플랫폼과 프로그램이 다양하다!

단점

  • 표준이 없다!
  • 모든 HTML 마크업을 대신하지 못한다!

2. 제목(Header)

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

제목 1

제목 2

제목 3

제목 4

제목 5
제목 6

3. 문장(Paragraph)

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

4. 줄바꿈(Line Breaks)

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

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

5. 강조(Emphasis)

_이텔릭_  
**두껍게**  
**_이텔릭 + 두껍게_**  
~~취소선~~  
<u>밑줄</u>

이텔릭
두껍게
이텔릭 + 두껍게
취소선
밑줄

6. 목록(List)

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

- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
  1. 순서가 필요한 목록
  2. 순서가 필요한 목록
  3. 순서가 필요한 목록
    1. 순서가 필요한 목록
    2. 순서가 필요한 목록
  4. 순서가 필요한 목록
  • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록
    • 순서가 필요하지 않은 목록
    • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록

<a href="https://google.com">GOOGLE</a>

[GOOGLE](https://google.com)

<a href="https://naver.com" title="NAVER로 이동!">NAVER</a>

[NAVER](https://naver.com "NAVER로 이동!")

GOOGLE

GOOGLE

NAVER

NAVER

8. 이미지(Images)

![HEROPY](https://heropy.blog/css/images/logo.png)

[![HEROPY](https://heropy.blog/css/images/logo.png)](https://heropy.blog/)



9. 인용문(BlockQuote)

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

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

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

인용문을 작성하세요!

중첩된 인용문

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

10. 인라인(inline) 코드 강조

CSS에서 `backgroud` 혹은
`background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

CSS에서 backgroud 혹은
background-image 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

11. 블록(block) 코드 강조

```html
<a href="https://google.co.kr/" target="_blank">GOOGLE</a>
<a href="https://google.co.kr/" target="_blank">GOOGLE</a>
```css
.list > li {
  position: absolute;
  top: 40px;
}
.list > li {
  position: absolute;
  top: 40px;
}
```javascript
function func() {
  var a = 'AAA';
  return a;
}
function func() {
  var a = 'AAA';
  return a;
}
```bash
$ git commit -m 'Study Markdown'
$ git commit -m 'Study Markdown'
```plaintext
동해물과 백두산이 마르고 닳도록  
하느님이 보우하사 우리나라 만세
동해물과 백두산이 마르고 닳도록  
하느님이 보우하사 우리나라 만세

12. 표(Table)

position 속성

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

13. 원시 HTML(Raw HTML)

동해물과 <span style="text-decoration: underline;">백두산</span>이 마르고 닳도록<br />
하느님이 보우하사 우리나라 만세

<a href="https://naver.com"
title="NAVER로 이동!">NAVER</a>

<img width="70" src="https://heropy.blog/css/images/logo.png" alt="HEROPY" />

동해물과 백두산이 마르고 닳도록

하느님이 보우하사 우리나라 만세

NAVER


14. 수평선(Horizontal Rule)

---

***

___



profile
front-end developer dreamer

0개의 댓글