[1주차 - 2022.04.13] Web & Markdown

웹 표준 (Web Standard)

웹 표준(Web Standard)이란 ‘웹에서 사용되는 표준 기술이나 규칙'을 의미

W3C의 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술

크로스 브라우징 (Cross Browsing)

조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작)을 줄 수 있도록 제작하는 기술, 방법

뷰포트 (Viewport)

하나의 웹 페이지가 출력(렌더링)되는 전체 영역을 의미

렌더링(Rendering)
브라우저의 뷰포트에 웹 사이트를 출력하는 (그림 그려내는) 행위를 말함

웹이미지

비트맵 (Bitmap)

• 픽셀이 모여 만들어진 정보의 집합, 레스터(Rester) 이미지라고도 부름
• 정교하고 다양한 색상을 자연스럽게 표현
• 확대/축소 시 계단 현상, 품질 저하
• .jpeg .gif .png

벡터 (Vector)

• 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지
• 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움
• 확대/축소에서 자유로움, 용량 변화가 없음
• .svg
  
  

특수 문자 용어

• ` : 백틱(Backtick), 그레이브(Grave)
• ~ : 틸드(Tilde), 물결 표시
• ! : 엑스클러메이션(Exclamation mark), 느낌표
• @ : 앳(At sign), 골뱅이
• # : 샵(Sharp), 넘버(Number sign), 우물 정
• ^ : 캐럿(Caret)
• & : 엠퍼센드(Ampersand)
• - : 하이픈(Hyphen), 대시(Dash), 마이너스
• _ : 언더스코어(Underscore), 로대시(Low dash), 밑줄
• = : 이퀄(Equals sign), 동등
• “ : 쿼테이션(Quotation mark), 큰 따옴표
• : : 콜론(Colon)
• ; : 세미콜론(Semicolon)
• . : 피리어드(Period), 닷(Dot), 점, 마침표
• / : 슬래시(Slash)
• | : 버티컬 바(Vertical bar)
• \ : 백슬래시, 역 슬래시
• ( ) : 퍼렌서시스(Parenthesis), 소괄호, 괄호
• { } : 브레이스(Brace), 중괄호
• [ ] : 브래킷(Bracket), 대괄호
• < > : 앵글 브래킷(Angle Bracket), 꺽쇠괄호

오픈 소스 라이선스

오픈소스란?

어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것

Apache License

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스

개인적/상업적 이용, 배포, 수정, 특허 신청이 가능

MIT License

매사추세츠대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스

개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음

BSD License

버클리 캘리포니아대학에서 개발한 라이선스이며 MIT와 동일 조건

Beerware

오픈소스 개발자에게 맥주를 사줘야 하는 라이선스, 물론 만날 수 있는 경우..

Markdown

장점

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

단점

• 표준이 없음
• 모든 HTML 마크업을 대신하지 못함
  
  

제목

#을 입력하고 한 칸을 띄워 제목을 입력한다.

크기별로 제목 1~6까지 표현이 가능하다.

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

문장

다른 기호없이 그냥 문자를 입력하면 된다.

이 라인은 문장입니다.

줄바꿈

줄바꿈을 하고 싶은 문장 뒤에 띄어쓰기 두개를 입력하면 줄바꿈이 된다.

또는, <br/ >태그를 입력한다.

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

강조

• 이텔릭 → 강조하고 싶은 문장 앞뒤로 _ 삽입
• 볼드 → 앞뒤로 ** 삽입
• 취소선 → 앞뒤로 ~~ 삽입
• 밑줄 → 앞뒤로 태그 삽입

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

목록

• 순서 필요한 목록 → 숫자(1.)
• 순서 필요하지 않은 목록 → -

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

- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
  - 순서가 필요하지 않은 목록
  - 순서가 필요하지 않은 목록

링크

마크다운은 타겟이라는 속성 제공하지 않음

<!-- GOOGLE 단어에 링크 걸림 -->
[GOOGLE](https://google.com)

<!-- NAVER 단어에 링크 걸고 title 추가 -->
[NAVER](http://naver.com "NAVER로 이동!")

이미지

<!-- 링크과 이미지의 차이는 앞에 느낌표의 유뮤이다 -->
![HEROPY](https://heropy.blog/css/images/logo.png)

<!-- 이미지에 링크 걸기 -->
[![HEROPY](https://heropy.blog/css/images/logo.png)](https://heropy.blog/)

인용문

문장 앞에 > 삽입한다.

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

<!-- 인용문 중첩하기 -->
> 인용문
>> 중첩된 인용문
>>> 중중첩된 인용문

인라인 코드 강조

강조하고 싶은 문장 앞뒤에 ` 삽입

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

블록 코드 강조

```html
<div>DIV</div>```

```plaintext
아무 문장이나 쓰기```

표

--|--|-- 은 표의 머릿말과 내용을 구분하는 기호

정렬은 기본값이 왼쪽 정렬이며, 가운데 정렬은 :—:, 오른쪽 정렬은 —:

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

원시 HTML

마크다운에서 아래와 같이 html 문법을 사용할 수 있음

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

수평선

아래 3개 중 아무 기호나 사용해도 수평선이 추가됨

---
***
___