가져오기 / 내보내기

import : 외부에 있는 다른 자바스크립트 파일을 가져올 수 있다. export : 내부에 있는 다른 자바스크립트 파일을 내보낼 수 있다.

- export (내보내기)

1. default export

파일을 내보낼 때 이름을 지정하지 않아도 되는 내보내기 방식이다. 단점으로 하나의 파일에서 한 개의 함수,변수등을 내보낼 수 있다.

default export 사용법

export default function () {

};

2. named export

파일을 내보낼 때 이름을 지정해줘서 내보내는 방식이다. 이렇게 이름만 지정되어 있다면, 하나의 파일에서 몇개의 함수,변수등을 내보내던지 상관이 없다.

named export 사용법

export function name1(){

};

export const name2 = { };

- import (가져오기)

1. import (default export에서 나오는 파일 가져오기)

import에 아무 이름을 입력해도 상관이 없다.

import 사용법 (default export)

import name from '가져올 js파일 위치'

2. import (named export에서 나오는 파일 가져오기)

import에 이름을 입력해 줄 때 이름을 { }로 꼭 감싸줘야 한다. { }안에 데이터를 변경하고 싶다면 :가 아닌 as를 사용하여 {name as firstName} 이런식으로 사용하여 변경할 수 있다.

import 사용법 (named export)

import {name} from '가져올 js파일 위치'

import {name as firstName} from '가져올 js파일 위치'

💡 한 번에 파일안에 모든 named export로 내보낸 내용을 가져오고 싶다면, import * as name from '가져올 js파일 위치'로 *을 사용해 모든 내용을 할당해서 가져올 수 있다.

구조 분해 할당

구조 분해 할당이란 배열이나 객체의 속성을 분해해서 변수에 할당하는 방법이다.

구조 분해 할당 방법

const user = {
    name: 'Kim',
    age: 27,
    address: 'Korea'
}

const {name,age,address} = user;

console.log(name);
// Kim

user 객체에서 name, age, address를 변수 이름으로 할당했고, 이 변수를 각각 호출하게 되면 user 객체 안에 있는 name의 value를 출력한다.

💡 만약에 아래의 예시처럼 address가 user 객체 안에 없다면 기본값을 지정해줘서 사용이 가능하다. 기본값을 지정해줘도 user안에 key값이 있다면 user안에 있는 값이 우선순위로 적용이 된다.

const user = {
    name: 'Kim',
    age: 27,
}

const {name,age,address = 'Korea'} = user;

console.log(address);
// Korea

💡 객체를 구조 분해 할당으로 지정해준 값의 변수 이름을 따로 바꾸고 싶다면 변수명을 :을 사용하여 변경해주면, 호출할 때 변경된 변수의 이름으로 호출할 수 있고 출력되는 값은 변수의 내용이 아닌 이름만 바뀌었기 때문에 user의 address에 있는 부분이 호출되게 된다.

const user = {
    name: 'Kim',
    age: 27,
    address: 'Korea'
}

const {name,age,address:country} = user;

console.log(country);
// Korea

object.assign( )이란?

대상 객체에 출처 객체의 데이터를 덮어 씌우는 메서드이다.

const user1 = {
    name: 'Kim',
    age: 27
}

const user2 = {
    name: 'Park',
    age: 30
}

Object.assign(user1,user2);
// user1 = {
//    name: 'Park',
//    age: 30
// }

assign(대상 객체,출처 객체1,출처 객체2...) 이렇게 출처 객체는 한개가 아닌 여러개를 사용할 수가 있다. 여러개의 데이터를 겹칠 때 같은 key값이 있다면 뒤에 오는 순서가 덮어 씌워지게 된다.

💡 만약 출처 객체들을 모아 새로운 대상 객체를 생성하고 싶다면 빈 중괄호를 사용하면 아예 새로운 객체가 생성이 된다. 이 방법은 객체의 복사본을 만들 때도 사용할 수 있다.

const user1 = {
    name: 'Kim',
    age: 27,
    job: 'student'
}

const user2 = {
    name: 'Park',
    age: 30
}
const user3 = Object.assign({},user1,user2);
// user3 = {
//    name: 'Park',
//  age: 30,
//  job: 'student'
// }

1. concat( )

const user1 = ['1','2','3']
const user2 = ['3','4','5']

const result = user1.concat(user2);
// '1','2','3','3','4','5'

concat은 배열에 다른 배열을 덮어씌울 수 있는 메서드입니다. 대신 두 개의 배열이 같은 내용을 가지고 있어도 중복으로 출력이 된다는 점이 있습다.

💡 메서드에 인수로 함수를 사용할 때 그 함수를 콜백함수라고 부릅니다.

2. forEach( )

const user1 = ['1','2','3']

user1.forEach(function(element,index){
    console.log(element,index);
});
// 1 0 
// 2 1
// 3 2

forEach는 콜백함수를 배열 요소 각각에 대해 실행할 수 있습니다. 위 식은 배열의 요소와 그 요소에 대한 인덱스 번호를 차례대로 끝까지 호출을 한 식입니다.

3. map( )

const user1 = ['1','2','3']

const result = user1.map(function(item,index){
    return `${item}-${index}`
});
// 1-0
// 2-1
// 3-2

map은 콜백함수의 값을 반환하여 변수에 저장할 수 있습니다. 그리고 새로운 배열로 묶어서 출력이 됩니다.

4. push( )

const user1 = ['1','2','3']

user1.push('맨 뒤에 추가');
// ['1','2','3','맨 뒤에 추가']

배열에 추가할 값을 맨 뒤에 추가시켜주는 메서드입니다.

5. unshift( )

const user1 = ['1','2','3']

user1.unshift('맨 앞에 추가');
// ['맨 앞에 추가','1','2','3']

배열에 추가할 값을 맨 앞에 추가 시켜주는 메세드입니다.

6. reverse( )

const user1 = ['1','2','3']

user1.reverse();
// ['3','2','1']

배열의 순서를 거꾸로 뒤바꾸는 메서드입니다.

7. splice( )

const user1 = ['1','2','3']

user1.splice(0,1);
// ['2','3']

splice는 ( )안에 (지울 index번호, 지울 index번호부터 몇개를 지울지)를 입력해주면 선택한 index번호 부터 지정한 개수만큼 배열안에 요소를 삭제해준다.

const user1 = ['1','2','3']

user1.splice(3,0,'4');
// ['1','2','3','4']

splice는 삭제뿐만 아니라 지운 위치에 새로운 데이터를 끼워 넣을 수도 있고 (지울 index번호, 지울 index번호부터 몇개를 지울지,'그 자리에 넣을 데이터'), 지울 개수를 0으로 설정하여 아무 데이터도 지우지 않고 선택한 위치에 새로운 데이터를 넣을 수도 있다.

npm이란?

npm은 Node Package Manager로 전 세계 노드 개발자들이 만든 기능(패키지, 모듈)을 사용할 수 있습니다. npm은 node.js를 설치할 때 자동으로 설치가 됩니다.

- package.json

vscode 터미널에서 npm init -y라는 명령어를 사용하면 package.json이라는 파일이 폴더에 생성된다. 이 파일은 사용자의 정보나 라이센스, 버전을 수정할 수 있습니다.

- npm install

npm install+설치할 패키지를 통해서 npm 생태계 안에서 다양한 패키지,모듈을 설치할 수 있다.

- parcel bundler

먼저 npm install parcel-bundler -D라는 명령어를 터미널에 입력하면 parcel bundler라는 패키지를 설치할 수 있습니다. 같이 설치되는 node_modules에 있는 폴들은 parcel bundler를 사용할 때 같이 필요한 패키지들이고, 자동으로 같이 설치가 됩니다.

💡 package.json 에 devDepndencies, Depndencies를 보면 설치된 패키지들을 볼 수 있습니다. 이렇게 설치된 파일을 볼 수 있을 때 장점은 node_modules 폴더가 삭제되어도 package.json에 있는 설치된 패키지 내역을 보고 npm install을 해주면 내역에 있는 모든 패키지들이 다시 설치가 됩니다.
npm i 로 작성해도 됩니다. (install의 약어) 추가로 설치된 따로 설정을 하지 않아도 package-lock.json은 자동으로 관리됩니다.

- lodash

npm install lodash를 통해서 설치할 수 있습니다.

💡 여기서 parcel bundler를 설치할 때와 다르게 -D를 붙이지 않은 이유는?

• -D 가 붙어서 설치하는 패키지는 개발용 의존성 패키지입니다. 개발할 때만 필요하고 웹브라우저에서 동작할 때 필요하지 않습니다.
• -D 가 없이 설치하는 패키지는 일반 의존성 패키지입니다. 웹브라우저에 동작할 때 필요하다 라고 표시해주는 것 입니다.

- 서버 연결

1."dev"

이렇게 필요한 패키지들을 설치하고 나서 package.json안에 "script"라는 항목이 있습니다. 여기에 있는 "test"은 필요가 없으니 지워주시고, "dev": "parcel index.html"를 작성해 줍니다. 이렇게 작성해주면 우리 프로젝트 내부에서 이 명령이 동작하게 설정된다는 의미를 가지고 있고, 로컬 환경에서 개발용으로 프로젝트를 확인할 수 있습니다.

2."build"

package.json안에 있는 "script"에 "build": "parcel build index.html"를 작성해 주면, 사용자가 실제로 보는 용도로 출력을 할 수 있습니다.

💡 npm run build를 하면 코드파일들을 난독화로 만들어 줍니다. 왜냐하면 사용자에게 보여주는 용도라서 웹브라우저만 읽으면 되기 때문입니다.

3. 로컬 개발 서버

이렇게 모든 세팅이 완료가 된다면, 터미널을 통해서 npm run dev를 통해 실시간으로 프로젝트를 개발하면서 볼 수 있는 로컬 개발 서버를 열 수 있습니다.

선택자 {display: flex;}

display에 flex를 설정해 주면 코드의 자식 요소가 가로 정렬로 바뀌게 됩니다. 정확히 말하자면 수평된 주축을 기점으로 시작점에서 끝점 방향으로 자식 요소들이 정렬하게 됩니다.

여기서 flex를 설정해준 코드는 flex container, 설정해준 코드의 자식 요소는 flex items로 불립니다.

- display : inline-flex

inline-flex는 flex container를 block요소 처럼 세로로 쌓이는게 아닌 inline 요소의 특징처럼 가로로 쌓이게 만들 수 있습니다. display:flex와의 차이점은 이러한 정렬 요소가 있습니다.

💡 flex container가 inline 요소처럼 정렬되는 것이지 그 안에 자식 요소인 flex items는 관계가 없다.

- flex container, flex items에 적용 가능한 속성

- flex-direction (flex container)

주 축을 설정해 줍니다. 기본 속성값은 row 입니다.

flex-direction 속성

💡 reverse로 시작점과 끝점이 반대로 바뀌면 flex items의 정렬 순서도 1, 2, 3이 아닌 3, 2, 1순으로 정렬이 된다.

- flex-wrap (flex container)

flex items의 줄 바꿈 여부를 결정해 줍니다. 기본 속성값은 nowrap 입니다. 그냥 display:flex를 적용하면 기본값인 nowrap 때문에 items들의 가로사이즈가 부모 사이즈를 초과해도 화면에 줄 바꿈 없이 구겨지면서 꽉 채워진다. 하지만 wrap으로 설정을 해주면 부모 사이즈에 items들이 다다랐을 때 아래로 줄 바꿈이 된다.

flex-wrap 속성

nowrap 적용 화면 (items가 구겨진다.)

wrap 적용 화면 (줄 바꿈이 되었다.)

- justify-content (flex container)

주 축의 정렬 방법입니다. 기본 속성값은 flex-start 입니다.

💡 주 축이 바뀌는게 아니기 때문에 itmes들의 순서는 바뀌지 않는다!

justify-content 속성

- align-content (flex container)

교차 축(수직)의 여러 줄 정렬 방법입니다. 기본 속성값은 stretch 입니다.

💡

1. stretch에서 items의 height값이 없다면 items들이 화면의 세로값을(height:auto) 꽉 채워서 출력이 됩니다.
2. align-content는 items가 flex-wrap:wrap을 통해서 두 줄 이상일 때 작동을 합니다. 그리고 flex container안에 빈 여백이 있어야 작동합니다.
3. 여러 줄을 한 번에 정렬 시키기 용이합니다.

align-content 속성

- align-items (flex container)

교차 축(수직)의 한 줄 정렬 방법입니다. 기본 속성값은 stretch 입니다.

💡 한 줄씩 정렬하는 방법이기 때문에 flex-wrap:wrap을 통하여 items가 여러 줄로 구성되었다면, 각 줄마다 시작점과 끝점이 존재하고 그 점을 기준으로 속성을 넣을 수 있습니다.

wrap 적용 후 align-items를 사용했을 때 시작점과 끝점이 한 줄마다 생기는 화면

align-items 속성

- order (flex items)

flex items의 정렬 순서를 정해줍니다. 기본 속성값은 0 입니다.

💡 HTML구조를 바꾸지 않고 items들의 순서를 그때그때 바꿀 수 있다는 장점이 있습니다.

order 속성

- flex-grow (flex items)

flex items의 증가 너비 비율을 설정해 줍니다. 기본 속성값은 0 입니다.

💡

1. flex-grow를 items들 중 한개에만 값을 주게 된다면 flex container를 차치하는 너비값에서 다른 items들의 너비값을 제외한 여백을 해당 비율로 채우게 됩니다.
2. 비율은 items안에 있는 내용들의 너비를 포함하지 않고 계산이 되기 때문에, 내용들의 너비를 무시하기 위해서 아래에 나올 flex-basis: 0 ;을 사용해줘야 한다.

첫 번째 items에만 flex-grow: 1 ;로 값을 할당한 화면.

flex-grow 속성

- flex-shrink (flex items)

flex items의 감소 너비 비율을 설정해 줍니다. 기본 속성값은 1 입니다.

💡 flex-shrink: 0 ;을 입력해 주면, 감소하는 비율이 없기 때문에 flex container가 줄어도 items의 너비는 줄지 않기 때문에 items가 구겨지지 않고 화면에 짤리는 듯이 보인다. 웹사이트 반응형을 개발할 때 유용한 코드가 될 것 같습니다.

flex-shrink 속성

- flex-basis (flex items)

flex-items의 공간 배분 전 기본 너비를 말합니다. 기본 속성갑은 auto 입니다.

💡 items의 비율을 일정하게 사용하기 위해서 flex-basis를 그냥 사용하게 되면 items에 들어있는 내용들, 즉 텍스트나 이미지 등의 너비 영향을 받아서 비율이 망가지게 된다. 이러한 현상에는 flex-basis의 값을 0 으로 설정해준다면 내용의 너비는 무시한 체 items가 각각 일정한 비율을 가질 수 있다.

flex-basis 속성

background

선택자 {background: }

background 태그는 태그에 배경을 만들어 주는 태그입니다. 사용자에게 보여주긴 하지만 css이기 때문에 이미지의 의미가 리더기에 읽히지는 않습니다.

정리 내용

background-image는 태그에 이미지를 불러와 배경으로 넣어주는 코드입니다. url( )을 사용하여 이미지가 있는 경로를 불러와 출력합니다.

선택자 {background-image: url(./images/logo.png);}

<br>

`bacground-size`는 background에 넣은 이미지의 사이즈를 조정해 줍니다.
이미지 사이즈는 태그의 `width` 값을 기준으로 크다면 이미지가 잘려서 보이고, 작다면 이미지가 반복되어 보이는 현상이 생깁니다.

속성 값은 단위를 사용하여 출력을 하거나 `cover`, `contain`이 있습니다.
`cover`는 태그의 width와 height중 <span style="text-decoration:underline;">더 넓은 값에</span> 맞춰 비율을 유지합니다.
`contain`은 태그의 width와 height중 <span style="text-decoration:underline;">더 짧은 값에</span> 맞춰 비율을 유지합니다.

>```css
선택자 {background-size:100px;}

background-repeat은 위에 설명한 background-size가 태그의 width 값보다 작을 때 이미지가 반복되어 보이는 현상을 고치기에 적절한 태그입니다. background-repeat의 속성값으로 아래와 같이 4개가 있습니다.

선택자 {background-repeat: no-repeat;}

<br>

`background-position`은 배경 이미지의 위치를 조정해주는 코드입니다.

>```css
선택자 {background-position:center;}

속성값으로 이미지가 위치할 방향을 적어주는 top, bottom, left, right, center가 있습니다.

방향에 대한 속성값은 2가지를 혼합하여 사용이 가능합니다. 예를 들어 아래의 코드는 오른쪽 위에 이미지를 배치시키는 속성값입니다.

선택자 {background-position:top right;}

또한 방향에 대한 속성값을 혼합한 방식처럼 x축과 y축의 값을 입력해줘서 원하는 곳에 이미지를 위치시킬 수 있습니다.

<br>

`background-attachment`는 스크롤을 했을 때 배경 이미지가 어떻게 보일지 설정을 해주는 코드입니다.
속성값은 `scroll`, `fixed` 가 있습니다.
아무 설정도 하지 않으면 기본값으로 `scroll`이 설정되어 있습니다.

`scroll`은 이미지가 스크롤을 했을 때 같이 스크롤이 되어 화면에 출력되는 방식입니다.
`fixed`는 스크롤을 했을 때 이미지는 고정되어 있는 방식입니다.
❕ `fixed`를 사용하여 웹을 표현하는 방식중에 _Parallax Scrolling_이라는 기법이 있습니다.
>```css
선택자 {background-attachment:fixed;}

vim

vim이란 git에서 사용이 가능한 에디터의 종류로 CLI(Command-Line Interface)방식으로
사용할 수 있다.

CLI

마우스가 사용 불가능하고 키보드만으로 출력하는 방식을 가지고 있는 환경이다.

vim 기본 사용법

vim에 들어가게 되면 기본적으로 normal mode인 상태이다. 이 상태에서는 입력이 불가능하기 때문에 mode를 바꿔줘야 한다.

i버튼을 누르게 되면 insert mode로 전환이 되는데, 이 insert mode가 되면 파일 안에 내용을 수정하거나 입력을 할 수 있다.

이제 vim에 입력을 할 수 있는데, 모든 입력을 끝내고 다시 git화면으로 돌아가고 싶다면, 다시 normal mode로 돌아가야 한다. 키보드에 있는 esc버튼을 눌러주면 normal mode로 전환이 된다. 왼쪽 하단에 아무것도 써있지 않아야 normal mode이다.

그리고 키보드에 있는 shift+;를 눌러주게 되면 command mode로 전환이 된다. 아까 insert mode가 써있는 부분에 :가 생기고 커서가 깜빡여야 command mode로 전환이 된 것이다.

이 command mode로 전환을 시켰다면, 2가지 방법을 사용하여 저장할 수 있고 다른 2가지 방법을 사용하여 vim에서 나갈 수 있다.

기본 명령어2

GIT

GIT이란 파일의 버전관리를 위해서 저장해두는 저장소를 의미합니다.

기본 설명

windows 사용자 기준 git bash를 사용하여 git을 키게 되면 처음 화면은 각자 컴퓨터의 사용자 디렉토리에 위치하게 됩니다. 여기서 $표시가 보이게 되는데 이 표시는 "현재 사용자의 명령을 받을 준비가 되었다." 라는 뜻 입니다. 그리고 다양한 명령어를 입력하고 Enter를 누르면 해당 명령어를 실행합니다.

기본 명령어

마크다운

마크다운이란 웹상에서 글을 쓸 수 있는 도구 중 하나입니다.
문법이 쉽고, 관리가 쉽다는 장점이 있습니다. 또한 지원 가능한 플랫폼과 프로그램이 다양하게 존재합니다.

마크다운 작성법

1. 제목

제목은 HTML의 H1 ~ H6 처럼 사용을 할 수 있습니다.

# 제목 (H1)
## 제목 (H2)
### 제목 (H3)
#### 제목 (H4)
##### 제목 (H5)
###### 제목 (H6)

출력화면 ⬇

제목 (H1)

제목 (H2)

제목 (H3)

제목 (H4)

제목 (H5)

제목 (H6)

2. 문장과 줄바꿈

문장은 HTML의 <p>태그와 마찬가지로 조건 없이 적을 수 있습니다. 하지만 여기서 엔터를 눌러도 줄바꿈이 되지 않을 수 있는데, 그때는 줄바꿈을 하고 싶은 위치에 띄어쓰기를 2번 하거나, HTML처럼 <br/>태그를 사용하면 줄바꿈을 할 수 있습니다.

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

출력화면 ⬇

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

3. 강조

강조에는 총 4가지 방식이 있습니다. 이 강조 방법은 서로 혼합을 하여 사용할 수도 있습니다.

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

출력화면 ⬇

이텔릭
두껍게
취소선
밑줄

4. 목록

목록에는 순서가 필요한 목록과 순서가 필요하지 않은 목록으로 나눠서 작성할 수 있습니다.

먼저 순서가 필요한 목록은 숫자 1. 을 사용하여 작성을 해주면 됩니다. 여기서 하위 뎁스를 표현하고 싶으면, 표현하고 싶은 부분 앞에 띄어쓰기 4번(들여쓰기 2번)을 해주시면 됩니다.

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

출력화면 ⬇

1. 순서가 필요한 목록
2. 순서가 필요한 목록
3. 순서가 필요한 목록
   1. 순서가 필요한 목록
   2. 순서가 필요한 목록
4. 순서가 필요한 목록

그리고 순서가 필요하지 않은 목록은 -를 사용하여 작성해주면 됩니다. 하위 뎁스를 표현하고 싶다면, 위에 내용과 마찬가지로 띄어쓰기 4번(들여쓰기 2번)을 해주시면 됩니다.

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

출력화면 ⬇

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

5. 링크

링크는 HTML에서 사용하는 것 처럼 <a>로 사용할 수 있는 방법과 [ ]( )를 사용할 수 있는 방법 2가지가 있습니다. 그리고 title과 같은 태그의 옵션도 사용할 수 있습니다. *target은 제외. <a>에서만 사용 가능합니다.

<a href="https://google.com">GOOGLE</a>
[GOOGLE](https://google.com)

<a href="https://naver.com" title="네이버로 이동!" target="_blank">GOOGLE</a> 
[NAVER](https://naver.com "네이버로 이동!")

[ ]( ) 이 방법은 [ ]안에 링크를 걸어줄 텍스트를 넣어주고, ( )안에 연결되는 링크를 적어주면 됩니다.

출력화면 ⬇

GOOGLE GOOGLE NAVER GOOGLE

6. 이미지

이미지는 ![ ]( )를 사용하여 출력할 수 있습니다. 그리고 이미지에 링크를 걸고 싶다면 위에 링크에서 사용한 방식으로 이미지를 감싸주면 됩니다.

![이미지 설명](이미지 링크)
[![이미지 설명](이미지 링크)](연결될 링크)

7. 인용문

인용문은 남의 말이나 글에서 직접 또는 간접으로 따온 문장으로 >를 사용하여 출력할 수 있습니다.

>출력화면 자체가 인용문 입니다.

출력화면 ⬇

출력화면 자체가 인용문 입니다.

그리고 인용문은 서로 중첩이 가능합니다.

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

출력화면 ⬇

중중첩된 인용문 1

중중첩된 인용문 2

중중첩된 인용문 3

8. 인라인 코드 강조, 블록 코드 강조

먼저 인라인 코드 강조 방법은 단어를 코드로 표현하고 싶을 때 사용할 수 있습니다. 사용법으론 ``(backtick)안에 출력할 내용을 넣어주면 됩니다.

`margin`

출력화면 ⬇

margin

블록 코드 강조 방법은 인라인 코드 강조 방법에서 사용한 ```(backtick)을 3번 연속으로 찍어주고 HTML, CSS 등을 써주면 됩니다. 텍스트만 블록 코드 강조 방법으로 출력하고 싶다면 plaintext를 사용해주면 됩니다.

출력화면 ⬇

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

li{
    positon:absolute;
    margin-left:40px;
}

텍스트만 블록 코드 강조 방법으로 출력하고 싶을 때 이렇게 출력합니다.

9. 표

표는 바로 예시를 보여드리겠습니다.

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

출력화면 ⬇

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

제일 위에 값은 | 를 사용하여 표의 분류를 나눠주고 그 안에 열의 개수만큼 --|--|-- 영역을 표시해주면서 | 를 사용해 행의 값들을 입력합니다.

*열의 개수를 나눠줄 때 : 을 사용하면 정렬방향을 정할 수 있습니다. :-- 왼쪽 정렬 :--: 가운데 정렬 --: 오른쪽 정렬

10. 원시 HTML

HTML에서 사용했던 코드들과 HTML코드 안에 style 코드를 넣어서 출력하는 방식이 사용 가능합니다.

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

출력화면 ⬇

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

11. 수평선

수평선을 출력할 수 있는 방법은 총 3가지가 있습니다.

---

***

___

출력화면 ⬇