Html, 마크다운

3 minute read

HTML

HTML이란?

웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.

HT - HyperText, 문서와 문서가 링크로 연결되어 있다.

M - Markdown, 태그로 이루어져 있다.

L - Language

태그(Tag)란?

정보를 정의하는 형식이다.

태그의 형식

<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠

<a href = "https://dongun3957.github.io"> 링크 <a/>

<>로 묶여 있는 부분은 태그,

“링크”는 컨텐츠이다.

태그는 컨첸트를 감싸서 그 정보의 성격과 의미를 정의한다.

열리는 테그가 있으면 닫히는 테그가 있어야 한다.

닫히는 태그 앞에는 ‘/’가 붙어야한다.

문서의 구조

HTML 문서는 파일의 확장자가 html 혹은 htm으로 끝난다.
- 최상위 태그로 <html>을 사용한다. 그 하위에 <head> 태그와 <body> 태그를 컨텐츠로 가지고 있다.
  - 태그는 문서를 설명하는 태그로 제목이나 키워드와 같은 정보를 담는다. * 태그에는 문서의 내용이 위치한다.

메타 데이터(meta data) 란 데이터를 설명하는 데이터를 의미한다. 이를테면 태그가 대표적인 메타데이터이다.

마크다운

마크다운이란?

텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다.

헤더(Headers)

큰 제목 : 문서 제목

This is an H1
=============

This is an H1

작은 제목 : 문서 부제목

This is an H2
-------------

This is an H2

글머리: 1~6까지만 지원

# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5

This is a H6

BlockQuote

이메일에서 사용하는 > 블럭인용문자를 이용한다.

This is a first blockqute. > This is a second blockqute. > > This is a third blockqute.

This is a first blockqute.

This is a second blockqute.

This is a third blockqute.

순서있는 목록 (숫자 + .)

어떤 번호를 입력해도 순서는 내림차순으로 정의된다.

첫번째
두번째
세번째

첫번째
두번째
세번째

순서없는 목록(글머리 기호: *, +, - 지원)

* 빨강
  * 녹색
    * 파랑

+ 빨강
  + 녹색
    + 파랑

- 빨강
  - 녹색
    - 파랑

빨강
- 녹색
  - 파랑
빨강
- 녹색
  - 파랑
빨강
- 녹색
  - 파랑

코드

4개의 공백 또는 하나의 탭으로 들여쓰기

들여쓰지 않은 행을 만날때까지 변환이 계속된다.

This is a normal paragraph:

    This is a code block.
    
end code block.

This is a normal paragraph:

This is a code block.

end code block.

코드 블럭

사용법이 2가지가 있다.

<pre><code>{code}</code></pre> 이용방식


int main{

printf("Hello World!");

return 0;

}

코드블럭코드(“```”) 을 이용하는 방법

int main{

printf("Hello World!");

return 0;

}

수평선<hr/>

아래 줄은 모두 수평선을 만든다. 마크다운 문서를 미리보기로 출력할 때 페이지 나누기 용도로 많이 사용한다.

* * *

***

*****

- - -

---------------------------------------

링크

참조링크

[link keyword][id]

[id]: URL "Optional Title here"

// code
Link: [Google][googlelink]

[googlelink]: https://google.com "Go google"
Link: Google

외부링크

사용문법: [Title](link)
적용예: [Google](https://google.com, "google link")

Link: Google

자동연결

일반적인 URL 혹은 이메일주소인 경우 적절한 형식으로 링크를 형성한다.

* 외부링크: <http://example.com/>
* 이메일링크: <address@example.com>

외부링크: http://example.com/ 이메일링크: address@example.com

강조

*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
~~cancelline~~

single asterisks single underscores double asterisks double underscores ~~cancelline~~

이미지

![펭귄](https://t1.daumcdn.net/cfile/blog/226DF14454BF29FC06)

[]안에 이미지 제목, ()안에 이미지 주소

<img src="https://t1.daumcdn.net/cfile/blog/226DF14454BF29FC06" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="펭귄"></img><br/>
<img src="https://t1.daumcdn.net/cfile/blog/226DF14454BF29FC06" width="40%" height="30%" title="px(픽셀) 크기 설정" alt="펭귄"></img>

<img width="" height=""></img>를 이용하여 사이즈를 조절할 수 있다.

</img>
</img>

줄바꿈

3칸 이상 띄어쓰기( )를 하면 줄이 바뀐다.

* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다. 
이렇게

* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다.___\\ 띄어쓰기
이렇게

줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다. 이렇게

줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다.
이렇게

표

문자와 - 문자로 표를 만들 수 있습니다.

|제목|내용|설명|
|------|---|---|
|테스트1|테스트2|테스트3|
|테스트1|테스트2|테스트3|
|테스트1|테스트2|테스트3|

제목	내용	설명
테스트1	테스트2	테스트3
테스트1	테스트2	테스트3
테스트1	테스트2	테스트3

: 문자로 정렬을 정의할 수 있습니다.

|제목|내용|설명|
|:---|---:|:---:|
|왼쪽정렬|오른쪽정렬|중앙정렬|
|왼쪽정렬|오른쪽정렬|중앙정렬|
|왼쪽정렬|오른쪽정렬|중앙정렬|

제목	내용	설명
왼쪽정렬	오른쪽정렬	중앙정렬
왼쪽정렬	오른쪽정렬	중앙정렬
왼쪽정렬	오른쪽정렬	중앙정렬

Twitter Facebook LinkedIn

Your Name