[2024.05.23] TIL 26일차

[ 본캠프 26일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

MarkDown 개념 정리

# 마크 다운이란?

마크다운은 일반 텍스트 문서에 서식 요소를 추가하는 데 사용할 수 있는 경량 마크업 언어이다.


2004년 John Gruber가 개발한 MD는 현재 세계에서 가장 인기 있는 마크업 언어 중 하나이다.

# 마크업 언어란?

마크업은 개발자가 텍스트 스크립트에 약속된 기호(MarkUp)이다.


마크업 언어는 이러한 마크업(기호)를 사용하여 작성하면, 프로그램이 마크업이 포함된 스크립트를 읽을 때, 다시 약속된 방법으로 출력하는 것을 말한다

# MD를 사용하는 이유?

1. 다른 마크업 언어에 비해 문법이 쉬워 금방 적응하여 사용할 수 있다.
2. 모든 것에 사용될 수 있다. ( ex | 웹사이트, 문서, 메모, 책, 프리젠테이션, 이메일 메시지 및 기술 문서 등... )
3. 지원 가능한 플랫폼 및 프로그램이 다양하다. ( MD 형식의 텍스트가 포함된 파일은 거의 모든 응용 프로그램을 사용하여 열 수 있다. )
4. 플랫폼이 독립적이여서, 모든 운영체제와 장치에서 MarkDown 형식의 텍스트를 만들 수 있다.
5. 마크다운은 사용 중인 응용 프로그램이 서비스를 종료해도 다른 응용 프로그램을 사용하여 MD 형식의 텍스트를 계속해서 읽을 수 있다. (무기한으로 보존해야하는 서적 및 논문을 쓰기에 적합하다.)
   
   

# MD 작동 프로세스

1. 텍스트 편집기나 전용 MD 애플리케이션을 사용하여 MD 파일을 만든다. ( 이때, 파일의 확장자는 .md & .markdown이어야 한다. )
2. MD 애플리케이션에서 MD 파일을 연다.
3. MD 응용 프로그램을 사용하여 MD 파일을 HTML 문서로 변환한다.
4. 웹 브라우저에서 HTML 파일을 보거나 MD 응용 프로그램을 사용하여 PDF와 같은 파일 형식으로 변환한다.

# MD 문법

<h1>, <h2>, <h3>, <h4> 와 같은 제목을 나타내는 태그들은 다음과 같이 사용할 수 있습니다.

# h1
## h2
### h3
#### h4
##### h5
###### h6

문단 구분

안녕하세요, <!-- Enter 2번 : 문단 사이 간격이 조금 넓음 -->
반갑습니다.

안녕하세요, <br /> 반갑습니다.

글씨체 ( Bold, Italic, Bold and Italic )

This is *Italic*
This is **Bold**
This is ***Bold and Italic***

인용 블럭 ( blockquote )

> 첫번 째 인용 블럭 |
> 첫번 째 인용 블럭, 작성 중...
>> 두번 째 인용 블럭 |
>> 두번 째 인용 블럭, 작성 중...
>>> 세번째 인용 블럭

목록 작성

1. 목록 첫번 째
2. 목록 두번 째
3. 목록 세번 째

- 목록 1
- 목록 2
- 목록 3

코드 블럭

<!-- Tab 2번 후 --> 
console.log("Hello World");

<!-- 혹은 백틱 앞뒤로 3개씩 -->
```
    function add(a, b = 1) {
      console.log(a, b)
      return a + b
    }
```

코드 강조

    <-- 강조하고싶은 부분 앞뒤에 백틱 넣어주기 -->
    `color`와 `font-size`는 텍스트의 색상과 크기를 지정할 수 있는 속성입니다. 

이미지 삽입

<!-- ![대체 텍스트(alt)](이미지_소스_URL "이미지 설명(title)") -->
![poster](./image.png "이미지 설명")

<!--  ![](이미지_소스_URL) -->
![](https://github.com/potato-carrot-study/react-study/assets/165988823/b79d0df6-6fc8-4a28-98a3-469477e4600b)

<!-- 이미지 사이즈 조정 -->
![poster](./image.png/width값/height값)

표 만들기

• ---, :---: 좌측 정렬

• :---:: 가운데 정렬

• ---:: 우측 정렬

  | 헤더 | 헤더 | 헤더 |
  |---|---|---|
  | 셀 | 셀 | 셀 |
  | 셀 | 셀 | 셀 |
  
  헤더 | 헤더 | 헤더
  ---|---|---
  셀 | 셀 | 셀
  셀 | 셀 | 셀

    | 값 | 의미 | 기본값 |
    |---|:---:|---:|
    | `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
    | `relative` | 요소 자신을 기준으로 배치 |  |
    | `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 |  |
    | `fixed` | 브라우저 창을 기준으로 배치 |  |
    | `sticky` | 스크롤 영역 기준으로 배치 |  |
    
    값 | 의미 | 기본값
    ---|:---:|---:
    `static` | 유형(기준) 없음 / 배치 불가능 | `static`
    `relative` | 요소 자신을 기준으로 배치 |
    `absolute` | 위치 상 부모_(조상)요소를 기준으로 배치 |
    `fixed` | 브라우저 창을 기준으로 배치 |
    `sticky` | 스크롤 영역 기준으로 배치 |

수평선

    ---
    ***
    ___