패스트캠퍼스 환급챌린지 33일차 미션 (3월 4일) : 프론트엔드개발 강의 후기

오늘의 목표

Ch 02-2 Markdown (마크다운) 시작!

 

벌써 시간이 흘러서 어느덧 3월 첫주 월요일이 되었다.

내가 어느덧 한달이라는 귀한 시간을 강의 듣는 데에 쏟았군..! 너무 뿌듯해

 

사실 강의를 들으면서 배우는 게 있다고는 느꼈는데 오늘 회사에서 웹사이트 화면 구성을 해보고, 직접 디자인을 해서 vscode 로 옮겨보려고 계획을 짜는데 더 확실히 느꼈다.

뭔가 이전에는 막연하게 어떻게 진행하지? 했는데..

이번에는 이부분은 이 움직임을 주고, 이런 형태로 넣으면 되겠구나!ㅎㅎ 그래서 다양하게 연출하고 표현해낼 수 있겠다는 생각이 들었다..!

그래서 기존 사이트 리뉴얼 작업을 하는데 너무 이해가 쏙쏙 되었다.

일할 맛이 났다!!

 

오늘도 신나게 수업을 들어봅시다아아~!!!

 

점점 침대로 가고 있었던 나..ㅎㅎㅎ

 

 

사실 md마크다운 오늘 처음 들어봤다..

 

늘 궁금했던 게 css, html, js 말고 나머진 뭐지..? 싶었는데..!ㅎㅎ

오늘에서야 궁금증이 풀리는구나~!

 

마크다운

 

장점

문법이 쉽고 간결하다

관리가 쉽다

지원 가능한 플랫폼과 프로그램이 다양하다

 

단점

표준이 없다

모든 HTML 마크업을 대신하지 못한다

 

 

In md(마크다운)

 

 

-글자 크기 : # 붙이고 띄어쓰기 하기! (크기 작아질수록 #의 갯수 늘리고)

# 제목1

## 제목2

### 제목3

 

 

-줄바꿈 : 띄어쓰기 두번

마크다운에서 문장 줄바꿈을 하고 싶은 곳에서 띄어쓰기 두번을 하면 됨

근데 띄어쓰기 안 먹는 거 같을 때는 html처럼 <br/> 를 넣어도 된다.

 

 

 

-강조 

1) 이텔릭 글씨

_이텔릭_ (언더바 사이에 문장 넣기)

 

2)두껍게 하기

**두껍게** (에스터리스크 사이에 문장 넣기)

 

3) 이텔릭+두껍게

**_이텔릭 + 두껍게_** (두개 다 넣어서 이렇게 사용하면 됨)

 

4)취소선

~~취소선~~ (물결 사이에 문장 넣기)

 

5)밑줄

<u> 밑줄<u/>  (보통 잘 안쓰는데 마크다운이라서 이렇게도 쓸수 있다는 거 알려주는 정도)

 

 

 

- 목록

 

들여쓰기 두 번 꼭!!

 

 

 

 

 

- 링크

 

링크 넣기!

1번 방법

[ 들어갈 텍스트 ](이동할 주소)

 

2번 방법

[ 들어갈 텍스트 ](이동할 주소 "Naver로 이동!")

 

 

- 이미지

 

! [ 들어갈 텍스트 ](이미지 링크 주소)

이미지 넣는 건 링크랑 똑같은데 앞에 ! 하나만 넣어주면 됨.

 

 

 

 

*깨알 이미지 주소를 이미지에 넣어서 링크 이동 하는 방법도 있음!

! [ 들어갈 텍스트 ](이미지 링크 주소) 이게 원래 이미지 태그 내용인데

여기 부분에 위 이미지 태그 내용을 모조리 넣어주면 됨!

⬇️

[ 여기! ](이동할 주소) 

⬇️

[ ! [ 들어갈 텍스트 ](이미지링크 주소) ](이동할 주소) 

 

 

- 인용문(*중첩기능 있음)

남의 말이나 글에서 직접 또는 간접으로 따온 문장.

>  들어갈 문장  <

>>>>  들어갈 문장  <<<<

 

**표가 제일 궁금했다

과연 코딩으로 표는 어떻게 만드는가!!!!!

 

-표

버티컬 바 | 사용하기!

*이런 머리랑 몸통 정도 나누는 간단한 표만 가능함

 

머리부분

값  |  의미  |  ㅇ

-- | -- | --   (이거로 머리 몸통 구분함)

몸통부분

값  |  의미  |  ㅇ

 

 

정렬은 : (콜론 넣기!)

 

가운데 정렬

-- | :--: | -- 

 

오른쪽 정렬

-- | -- | -- :

 

 

-수평선

사용할 때는 

 

---(대쉬세번)

___(언더바 세번)

***(별 세번)

 

 

음.. 근데 md는 왜.. 필요한 걸까??!

원격 저장소에 저장해도 모르겠네 ㅎㅎㅎ

 

아유 메모;;!! 메모하려는 거구낳ㅎㅎ

 

오늘은 마크업 간단하게 끝!

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]