[패스트캠퍼스] 프론트엔드 강의 학습일지(HTML/CSS/JS 기본)

패스트캠퍼스/React&Redux

[패스트캠퍼스] 프론트엔드 강의 학습일지(HTML/CSS/JS 기본)

Rosie, Lee 2023. 4. 12. 22:48

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

https://fastcampus.co.kr/b2g_kdc_web

[중급] 프론트엔드 종합반 : HTML&CSS, JS, React | 패스트캠퍼스

패스트캠퍼스 온라인 강의를 국비지원으로 0원에 수강하세요!

fastcampus.co.kr

개요

프론트엔드란?

HTML, CSS, JS로 GUI(사용자에게 보이는 화면) 구현하는 것입니다.

웹앱의 동작 원리

브라우저 통신 > 프로토콜 접속 > 최초 요청(Request) > 서버 > 최초 응답(Response HTML) > 브라우저 화면에 응답받은 HTML 랜더링> 추가 필요한 파일 요청 > 추가 응답(CSS, JS, JPG 등)

웹 표준과 브라우저

웹표준은 웹에서 사용되는 표준 기술이나 규칙입니다.

표준화 제정 기구(W3C)에서 지정한 것이고, 권고안(REC)에 해당하는 기술로 사용합니다.

브라우저 공급업체(크롬, 사파리, 파이어폭스 등)에서도 웹표준에서 발표한 것을 바탕으로 제작합니다.

크로스 브라우징?

조금 다르게 구동되는 여러 브라우저(크롬, 사파리, 파이어폭스 등)에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술입니다.

뷰포트(viewport)

웹페이지가 출력되는 영역입니다.

웹에서 사용하는 이미지

비트맵(jpg, png)

JPG는 손실 압축(반복적으로 새롭게 저장하면 할수록 품질이 손실됨), 표현 색상은 24비트(1600만)
PNG는 8비트(256색상)와 24비트(1600만)비손실 압축으로 jpg보다 용량이 클 수 있다. 투명도(Alpha Channel) 가능, W3C 권장 포맷
GiF는 8비트 색상(256색상) 움짤, 애니메이션
WEBP는 구글이 개발한 포맷, 손실/비손실 압축 모두 지원, GIF 애니메이션 지원, 투명도(Alpha Channel) 지원

벡터(svg)

HTML/XML기반의 벡터 그래픽을 표현하는 포맷
해상도의 영향에서 자유롭고, CSS JS제어 가능, 파일 및 코드 삽입 가능

특수 문자 용어

` 벡틱, 그레이브
~ 틸드
! 엑스클러메이션, 느낌표
@ 앳, 골뱅이
# 샵, 넘버, 우물정
^ 캐럿
& 앰퍼샌드
= 이퀄, 동등
: 콜론, ; 세미콜론
/ 슬래시, | 버티컬바, \ 백슬래시 역슬래시
() 소괄호, {} 중괄호, [] 대괄호, <> 꺽쇠괄호

오픈소스 라이선스

오픈소스 라이선스를 사용하기 전에 라이선스 범위를 꼭!! 확인하고 작업해야 합니다.

개인/상업적 이용 가능한 라이선스: Apache License, MIT License, BSD License, Beerware...

VS Code

본 강의에서는 vs code로 사용합니다.

여기에서 https://code.visualstudio.com/ 설치합니다.

설치가 되면 왼쪽 메뉴에서 Extentions(확장기능)를 클릭하여 필요한 플러그인들을 설치합니다.

먼저 프로그램을 한글화로 바꿔주기 위해 설치합니다. Korean Language Pack for Visual Studio Code

Korean Language Pack for Visual Studio Code - Visual Studio Marketplace

Extension for Visual Studio Code - Language pack extension for Korean

marketplace.visualstudio.com

설치 완료 후 재시작해주면 아래 이미지와 같이 한글화 된 걸 확인할 수 있습니다.

정리된 코드로 만들기

확장 프로그램 설치로 코드를 좀 더 깔끔하게 작성합니다. Prettier

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

marketplace.visualstudio.com

Prettier 적용이 안될 때 설정할 사항들

1. vs code 설정에서 기본 포맷을 prettier로 지정해 준다. 기본은 null로 되어있다.

2. 저장 시 서식을 지정하도록 체크해 준다.

3. Prettier의 설정 값을 을 편한 방식으로 설정해 준다.

이 외에 아래 두 가지를 더 설치합니다.

태그를 동일한 쌍으로 이룰 수 있게 자동으로 변경해 주기 위함: Auto Rename Tag

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

marketplace.visualstudio.com

로컬 개발 서버 시작하기 위함: Live Server

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

marketplace.visualstudio.com

단축키

해당 코드를 줄 위 or 아래로 이동: option + Up or Down

해당 코드를 위 or 아래줄로 복사: option + shift + Up or Down

패널 이동: cmd + shift + [ or ]

편집기 분할: cmd + \

사이드바 제어: cmd + b

시작 1.

<meta> tag

웹페이지의 정보를 브라우저에 제공합니다.

name: 정보의 종류, content: 정보의 값

chartset: 문자 인코딩 방식

viewport는 모바일과 관련이 있습니다.

Favicon

'favorites + icon'을 줄여서 파비콘이라고 부릅니다. 웹사이트를 대표하는 아이콘입니다.

이미지 출력

웹표준을 위해 img 태그의 alt(alternate 대체 텍스트) 값 반드시 지정합니다.

HTML 개요

글자와 상자

요소가 화면에 출력되는 특성입니다.

인라인: 글자를 만들기 위한 요소들
- 대표적인 인라인 요소: <sapn>
- 수평으로 쌓인다.
- 콘텐츠 크기만큼 자동으로 줄어든다.
- 글자를 의미하기 때문에 width나 height 값을 지정해도 반응이 없다
- 또한 paggind, margin 위와 아래는 사용할 수 없고, 좌우만 된다.
- 인라인 요소 안에 블록 요소(ex: div)를 사용할 수 없다.
- 인라인 요소는 기본적으로 글자를 의미하기 때문에 코드에서의 줄 바꿈은 띄어쓰기로 표현할 수 있다.

<span>Hello<span>
<span>World<span>
// Hello World

<span>Hello<span><span>World<span>
/ HelloWorld

블록 요소: 상자(레이아웃)를 만들기 위한 요소들
- 대표적인 블록 요소: <div>
- 수직으로 쌓인다.
- 부모 요소 크기만큼 자동으로 늘어난다. (가로 너비는 최대한 늘어나려고 시도하고, 세로 너비는 줄어드려고 함)
- width, height, margin, pagdding 값 설정할 수 있다.
- 블록 요소 안에 또 다른 블록 요소나 인라인 요소를 넣을 수 있다.

HTML 핵심 정리

<div> : Division 특별한 의미가 없는 구분을 위한 요소
<h1> : Heading 제목을 의미하는 요소 (블록요소), 숫자가 적을수록 더 중요한 제목을 의미한다.
<p> : Paragraph 문장을 의미하는 요소 (글자이지만 문장이라서 블록요소이다)
<img> : image 이미지를 삽입하는 요소 (인라인 요소), 필수 속성(src, alt)을 꼭 넣어야 웹표준에 어긋나지 않는다.
<ul>: Unordered List 순서가 필요 없는 목록의 집합을 의미 (<ol> : Ordered List 순서가 필요한 목록)
- <li> : List Item 목록 내 각 항목
<a> : Anchor 닻을 의미, 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
<span> : 특별한 의미가 없는 구분을 위한 요소
<br/> : Break 줄 바꿈 요소
<input> : 사용자가 데이터를 입력하는 요소, 인라인이면서 블록 요소(inline-block)이다. 수평으로 쌓이지만, widht, height, padding, margin 지정이 가능하다.
<table> : 테이블 요소, 행(Row)과 열(Column)의 집합

전역 속성

<body> 태그 안에서 어떤 태그던 사용할 수 있는 속성이다.

<a href="https://www.naver.com" target="_black" title="네이버로 이동">네이버</a>
// 요소의 설명을 지정: 툴팁

<span style="스타일">스타일</span>
// 요소에 적용할 스타일(CSS)을 지정

<span class="클래스명">클래스</span>
// 요소를 지칭하는 중복 가능한 이름

<span id="아이디">아이디</span>
// 요소를 지칭하는 고유한 이름(중복안됨)

<span data-{이름}="데이터">데이터</span>
// 요소에 데이터를 지정

dataset을 사용하는 방법

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div data-fruit-name="apple">사과</div>
    <div data-fruit-name="banana">바나나</div>

    <script defer>
        const elements = document.querySelectorAll('div')
        elements.forEach(el => {
            console.log(el.dataset.fruitName);
            // 데이터 추출하는데, 표기법 개념에 따라 자바스크립트에서는 -(하이픈)을 사용하는 이름 지정을 허용하지 않기 때문에 하이픈 제거하고 그 뒤 알파벳을 대문자로 변환해서 사용
            // print: apple banana
        })
    </script>
</body>

</html>

script

HTML 구문 분석되기도 전에 script가 실행되었기 때문이다.

이럴 경우엔 HTML 구조가 준비된 후(문서 분석 이후)에 javascript를 해석하겠다는 의미인 defer를 사용하면 된다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="/main.js"></script>
</head>

<body>
</body>

</html>

CSS 개요

CSS 선언방식

내장
- css 내용이 길어지면 유지보수가 어려워지는 단점이 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>
    <div>TEST</div>
</body>

</html>

인라인

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="color: red;">TEST</div>
</body>

</html>

링크
- 병렬 방식으로 모든 CSS 파일을 한 번에 가져와서 연결해서 해석이 빠르게 끝나는 CSS부터 가지고 온다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
    <div>TEST</div>
</body>

</html>

@import
- 링크 방식으로 main.css를 연결해 주고.
- 그 CSS에 @import로 또 다른 CSS 문서를 가져와 연결하는 방식
- 직렬방식으로 main.css먼저 가지고 오고, import로 연결된 css를 가지고 와서 연결이 지연될 수 있다.

@import("./box.css");

div {
  color: red;
}

복합 선택자

일치 선택자

동시에 만족하는 요소
span.orange {} : span 태그이면서 orange 클래스명을 가진 것을 동시에 만족하는 요소

자식 선택자

ul > .orange {} : ul의 자식 중 orange 클래스명인 요소

하위 선택자

띄어쓰기로 구분
div .orange {}: div 하위(후손) 중 orange 클래스명인 요소

인접 형제 선택자

다음 형제 요소 하나를 선택
.orange + li {} : orange 클래스명의 다음 형제 요소 중 가장 인접한 li 요소

일반 형제 선택자

다음 형제 요소 모두 선택
.orange ~ li {} : orange 클래스명의 다음 형제 요소 중 모든 li 요소

가상 클래스

:hover 마우스 오버 시 동작
:actice 마우스로 클릭하고 있는 동안 동작
:focus 요소가 포커스 되면 동작
- 사용자에게 데이터를 입력받는 요소들에 가능함(Input, a, button, label, selerct 등)
- 이외의 요소에도 가능하게 하려면, tabindex 속성 사용하면 된다. tab키를 사용해서 focus 할 수 있는 순서를 지정하는 속성이다. 순서로 -1이 아닌 다른 값을 넣는 건 권장하지 않는다.
- https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex

tabindex - HTML: Hypertext Markup Language | MDN

tabindex 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다.

developer.mozilla.org

:first-child 형제 요소 중 첫째
:last-child 형제 요소 중 막내
:nth-child 형제 요소중 n번째
- ul *:nth-child(2) {} : ul 하위 요소 모두 선택하되, 2번째 요소를 선택
- ul *:nth-child(2n) {} : n을 0부터 시작(Zero-Based Numbering)하고 짝수번째 요소를 선택
- ul *:nth-child(2n+1) {} : n을 0부터 시작(Zero-Based Numbering)하고 홀수번째 요소를 선택
- ul *:nth-child(n+2) {} :2번째 요소 이후부터 선택
:not 해당 태그가 아닌 요소 선택(부정 선택자)
- ul *:not(span) : ul 하위 요소 모두 선택하되, span태그는 제외하고 선택

가상 요소 선택자

콜론이 두 개다. 한 개도 되지만 웹표준에 어긋난다.

꼭 content 속성과 함께 사용해야 한다.

::before 요소 내부 앞에 내용(content)을 삽입
::after 요소 내부 뒤에 내용(content)을 삽입

.box::before {
  content: "앞!";
}
.box::after {
  content: "뒤!";
}

속성 선택자

[disabled] {} : input요소 중 비활성화에 해당하는 요소
[type] {} : input을 모두 선택
- [type="password"] : password 타입인 input을 선택, "(따옴표) 생략 가능하다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [type] {
            background-color: orange;
        }
        [type="text"] {
            background-color: yellow;
        }
        [data-fruit-name] {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="password">
    <span data-fruit-name="banana">banana</span>
</body>

</html>

스타일 상속

부모 요소의 값을 자식에게 강제 상속 해주기 위해 inherit 값을 사용한다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        .child {
            width: 100px;
            height: inherit; /* 강제 상속 */
            /* background-color: inherit; */
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>    
</body>

</html>

선택자 우선순위

점수가 높은 선언이 우선
점수가 같으면, 마지막에 해석된 선언이 우선

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {color: red !important} /* important: 999999999점(무한대) */
        #color_yellow {color: yellow;} /* ID 선택자: 100점 */
        .color_green {color: green;} /* class 선택자: 10점 */
        div {color: skyblue} /* 태그 선택자: 1점 */
        * { color: navy;} /* 전체 선택자: 0점 */
        body {color: blueviolet;} /* body 태그 안의 모든 걸 상속한다는 건데, 상속은 게산 안 함 */

        /* 
            ::before 가상 요소 선택자: 1점 
            :hover 가상 클래스: 1점
            :not(.box): 부정 선택자는 점수 제외, .box라는 클래스만 점수 계산돼서 10점이임
        */
    </style>
</head>

<body>
    <div id="color_yellow" class="color_green" style="color: orange">Hello World!</div>
    <!-- 인라인 선언: 1000점 -->
</body>

</html>

CSS 속성

기본 값 기억하기

width, heigh = auto
max-width, max-height = none
min-width, min-height = 0 (단위는 없음)

단위

px: 화면에 출력할 수 있는 점
%: 상대적 백분율
em: 요소의 글꼴 크기(어떤 글꼴 크기가 10px이면 1em 또한 10px)
rem: 루트요소(html)의 글꼴 크기가 기준
vw: 뷰포트 가로 너비의 백분율
vh: 뷰포트 세로 너비의 백분율

Tip

브라우저는 폰트 사이즈가 지정되지 않으면 기본적으로 16px로 설정된다.

루트 기준의 폰트 사이즈가 기준이 되는 rem 단위를 사용해야 관리가 쉽다.

border

none(기본값), solid, dotted, dashed, double, groove...

border-box

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            padding: 20px;
            border: 1px solid red;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>Hello World!</div>
</body>

</html>

content-box: 기본값, 내용(content)으로 크기 계산하기 때문에, padding이나 border 값을 제외하고 사이즈가 설정된다.

box-sizing: 요소의 내용 + padding + border크기를 합쳐서 계산해서 원하는 width에 맞게 설정된다.

overflow

line-height

한 줄의 높이

normal: 기본값으로 브라우저의 기본 정의를 사용(1을 의미)
숫자: 배수로 지정 (line-height: 2 -> 폰트사이즈 x 2)
- 폰트사이즈가 변경되더라도 적용되기 때문에 배수로 사용하는 게 좋다.
단위 px, em, rem

font-family

font-family: 글꼴1, 글꼴2, ... 글꼴계열(serif, sans-serif);
- serif: 바탕체
- sans-serif: 고딕체
- monospace: 고정너비
- cursive: 필기
- fantasy: 장식
글꼴 지정 시 띄어쓰기나 특수문자가 포함된다면 큰 따옴표로 묶어야 한다.(ex: "맑은 고딕") 안 그러면 띄어쓰기를 브라우저에서 구분 기호로 인식해서 찾지 못한다.

Flex

flex item에 부여해 주는 속성들

order: 정렬 순서
- 기본값: 0
- 숫자가 작을수록 순서가 우선된다.
flex-grow: 증가 너비 비율
- 기본값: 0
- 숫자로 증가 비율을 설정한다.

flex-shrink: 감소 너비 비율
- 기본값: 1 (flex container 너비에 따라 감소 비율 적용)
- 숫자로 감소 비율 설정

위와 같이 100px x 100px 상자를 flex 상태로 하고, 컨테이너가 줄어들 때, 따로 flex-wrap: wrap; 처리(줄 바꿈)를 하지 않으면, 아이템들도 같이 줄어들면서 찌그러진다. 이건 기본적으로 flex-shrink값이 1로 지정되어 있기 때문이다. 컨테이너 사이즈에 따라 아이템들의 너비도 같이 줄어든다.

이러한 현상을 막고자 한다면, flex-shrink 값을 0으로 감소 비율을 설정해 주면 된다.

flex-basis: 공간 배분 전 기본 너비
- 기본값: auto로 요소의 content(내용) 너비
- 단위는 px, em. rem등

위 내용처럼 flex-basis가 설정되어 있으면, flex-grow에 설정된 비율이 flex-basis 설정된 부분을 제외하고 나머지 부분에 대한 비율로 설정된다. 이렇게 되면 계산하기 복잡하고, 1:1:2의 비율이 되지 않는 문제가 발생한다. 이 문제(요소 너비를 content(내용)에 맞게 가 아닌, flex-grow 값에 맞게 하려면)를 해결하기 위해선 flex-basis: 0; 으로 설정해 주면 된다.

전환

transition

transition - CSS: Cascading Style Sheets | MDN

transition CSS속성은 transition-property (en-US), transition-duration (en-US), transition-timing-function (en-US) 과 transition-delay를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있

developer.mozilla.org

  div {
    width: 100px;
    height: 100px;
    background-color: orange;
    transition: width 0.5s, background-color 2s; /* 속성마다 다르게 각각 부여해주려면 쉼표로 구분 */
  }
  div:active {
    width: 500px;
    background-color: yellow;
  }

타이밍 함수에 대한 참고 사이트

그래프 확인: https://easings.net/

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

easings.net

css 적용을 위한 mdn 설명 https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

<easing-function> - CSS: Cascading Style Sheets | MDN

The <easing-function> CSS data type denotes a mathematical function that describes the rate at which a numerical value changes.

developer.mozilla.org

시각적으로 쉽게 확인이 가능한 곳: https://greensock.com/docs/Easing

Docs

Documentation for GreenSock Animation Platform (GSAP)

greensock.com

transform

요소의 변환 효과

transform: rotate(45deg) scale(1.3); 45도로 회전, 1.3배 크기 크게 조정...
변환 함수
- 2D 변환 함수
  - translate(x,y) 이동(x축, y축) - 단위: px
    - 단위를 하나만 입력하면 안 되고, 사용하지 않는다면 0으로라도 지정해줘야 한다. 한 가지 축으로만 변환할 거라면 직관적인 사용을 위해 tarnslateX나translateY로 사용하는 게 좋다.
  - translateX(x) or translateY(y) 설정된 축으로 이동 - 단위: px
  - scale(x,y) 크기(x축, y축) - 단위: 배수(숫자)
    - 배수를 하나만 입력하면 x,y 둘 다 설정 된다
  - rotate(degree) 회전 각도 - 단위: deg
  - skewX(x) or skewY(y) 설정된 축을 기울임 - 단위: deg
- 3D 변환 함수
  - perspecctive(n) 원근법(거리) - 단위: px
    - 속성과 함수 차이
      - 속성: perspective: 600px; 은 관찰 대상의 부모에 적용된다.
      - 함수: transform: perspective(600px); 는 관찰 대상에 적용된다.
  - rotateX(x) or rotateY(y) or rotateZ(z) 설정된 축으로 회전 - 단위: deg
    - 원근법과 같이 써야 3D 효과를 나타낸다.
    - 원근법 함수는 제일 앞에! 작성해야 한다.
      - transform: perspective(500px) rotateX(45deg);
  - rotate3d(x,y,z,a) 회전 (x축,y축,z축, 각도) - 단위: deg

패스트캠퍼스 perspective 속성과 함수에 대한 설명 스크린샷(함수과 속성에 따라 기준점이 달라진다)

backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김 여부

기본값: visible
숨김처리: hidden

JS 선행

표기법

dash-case(kebab-case)(html, css)
- btn-red
snake_case(html, css)
- btn_red
camelCase(js)
- theQuickBrownFoxJumpsOverTheLazyDog
PascalCase(js)
- TheQuickBrownFoxJumpsOverTheLazyDog

데이터 종류

String
- 보간법은 백틱을 사용하고 ${데이터}로 사용하면 된다.
- ex: let name = `Hellow ${name}`;
Number
Boolean
Undefined
Null(의도적으로 비어있음을 의미합니다.)
Object
Array

변수

데이터를 저장하고 참조(사용)하는 데이터의 이름

let: 재사용, 재할당이 가능
const: 재할당 불가

예약어

특별한 의미가 있어서 변수로 사용할 수 없다

this
if
break... 등 많다... 사용하면서 에디터의 도움을 받아 확인하자

함수

특정 동작(기능)을 수행하는 일부 코드의 집합

// 기명 함수, 함수 선언
function helloFunc() {
	// 실행 코드
    console.log(123);
}

// 함수 호출
helloFunc(); // 123

// return으로 데이터를 반환(내보내기)할 수 있다.
function returnFunc() {
	return 123;
}
let a = returnFunc();
console.log(a); // 123


function sum(a, b) {
	return a + b;
}
let a = sum(1, 2);
let b = sum(7, 12);
console.log(a, b); // 3, 19


// 익명 함수, 함수 표현
let hello = function() {
	console.log('world');
}
hello(); // world


const hyemin = {
	name: 'hyemin',
    age: 33,
    getName : function () { // hyemin.getName은 함수가 할당된 객체 데이터의 속성(Property): 메소드라고 함
    	return this.name
    }
};
console.log(hyemin.getName()); // hyemin

조건문

let isShow = true;
let checked = false;

// 참일 경우 실행한다.
if(isShow) {
	consol.log('show!'); // show!
}

if(checked) {
	console.log('checked!'); // 조건에 부합하지 않아서 실행하지 않음
}

DOM API

DOM(Document Object Model): HTML을 의미 / API(Application Programming Interface) : 명령들

const boxEl = document.querySelector('.box');

box.addEventListeneer('click', function(){
	console.log('click');
    boxEl.classLst.add('active);
    boxEl.classList.remove('active);
})

const boxEls = document.querySelectorAll('.box'); // 모두 찾음
boxEls.forEach(function (box, index) { // 찾은 요소들 반복
	box.classList.add(`order-${index + 1}`);
    console.log(index, box);
});

const boxEl = document.querySelector('.box');

// Getter, 값을 얻는 용도
console.log(boxEl.textContent);

// Setter, 값을 지정하는 용도
boxEl.textContent = 'hyemin!!!!';
console.log(boxEl.textContent); // hyemin!!!!

메소드 체이닝

const a = 'helllo~';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse: 배열을 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse().join(''); // 메소드 체이닝...
console.log(b); // ~olleH