6회차: 23/08/12 13:00~16:00 계획: YOLO 논문 분석 (4) 방향: 'A COMPREHENSIVE REVIEW OF YOLO: FROM YOLOV1 AND BEYOND' 논문 분석

결과

YOLOv7

C.-Y. Wang, A. Bochkovskiy, and H.-Y. M. Liao, “Yolov7: Trainable bag-of-freebies sets new state-of-the-art for real-time object detectors,” arXiv preprint arXiv:2207.02696, 2022

• Developments(Bag-of-Freesbies)

  • Modified RepVGG: RepVGG에서의 identity 연결이 residual 전달과 concatenate에 악영향을 끼친다고 판단해 이를 제거
  • Coarse Label Assignment for Auxiliary Head and Fine Label Assignment for the Lead Head: head를 lead head와 auxiliary head로 구분해 label assignment를 수행

• Architecture

  

  • E-ELAN(Extended Efficient Layer Aggregation Network)
    • 긴 gradient 경로를 제어해 모델이 더 효율적으로 학습할 수 있도록 하는 전략
    • 서로 다른 그룹의 feature를 결합해 gradient 경로를 파괴하지 않음
  • Model Scaling for Concatenation-Based Models: concatenation 기반의 모델인 YOLOv7의 depth와 width를 같은 비율로 조절해 최적의 모델 구조를 유지

YOLOv8

G. Jocher, A. Chaurasia, and J. Qiu, “YOLO by Ultralytics.” https://github.com/ultralytics/ultralytics, 2023

• YOLOv8-seg

  • Semantic Segmentation을 위한 모델 포함
  • CSPDarknet53-C2f module-Decoupled 구조
  • Semantic Segmentation 분야의 SOTA

• Architecture

  

  • C2f Module(Cross-Stage Partial Bottleneck with Two Convolutions)
    • CSPLayer를 수정한 backbone network
    • high-level feature를 contextual 정보와 결합
  • Anchor-Free
  • Decoupled Head
    • objectness, classification, regression를 각각 수행
    • 각 task 집중함으로써 정확도 향상
    • objectness score 계산을 위해 sigmoid function 사용
    • class probability 계산을 위해 softmax function 사용
    • bbox loss 계산을 위해 CIoU와 DFL loss를 사용
    • classification loss 계산을 위해 binary cross-entropy를 사용

      Conclusion

• Key Features of YOLO

  • Anchors
    • YOLOv1에서는 anchor를 도입하지 않음
    • YOLOv2~YOLOv5에서 anchor를 도입하면서 bbox 예측의 정확도를 향상시킴
    • YOLOX부터는 anchor-free를 채택해 이후 버전에서도 이 기조가 유지됨
  • Framework
    • 초기에는 Darknet 프레임워크에서 개발됨
    • Darknet에서 개발된 YOLOv3를 Pytorch에서 개발해 재배포를 시작으로 다른 버전들도 Pytorch를 사용해 개발
    • 새로운 프레임워크를 통해 성능 향상에 기여함
  • Backbone: 버전에 따른 backbone network의 변화
    • Darknet: convolutional layer와 max pooling layer로 구성
    • CSP(Cross-Stage Partial Connections)를 YOLOv4에 도입
    • Reparameterization(RepVGG)을 YOLOv6, YOLOv7에 도입
  • Performance
    • speed와 accuracy 간의 balance를 유지하면서 성능을 개선시킴

• Future

  • Incorporation of Latest Techniques
  • Benchmark Evolution
  • Proliferation of YOLO Models and Applications
  • Expansion into New Domains
  • Adaptiablility to Diverse Hardware

5회차: 23/08/05 13:00~16:00 계획: YOLO 논문 분석 (3) 방향: 'A COMPREHENSIVE REVIEW OF YOLO: FROM YOLOV1 AND BEYOND' 논문 분석

결과

YOLOv5

G. Jocher, “YOLOv5 by Ultralytics.” https://github.com/ultralytics/yolov5, 2020

• 오픈 소스 기반이며 Pytorch 환경에서 개발

• 자체 개발한 AutoAnchor 알고리즘, k-means clustering, GE 알고리즘을 활용해 anchor를 예측

• Albumentation 패키지를 적용해 다양한 데이터 증강 기법을 이용

  Mosaic, Copy Paste, Random Affine, MixUp, HSV augmentation, Random Horizontal Flip, etc.

• 여러 크기의 모델을 제공

  YOLOv5n(nano), YOLOv5s(small), YOLOv5m(medium), YOLOv5l(large), YOLOv5x(extra large)

• Classification, Instance Segmentation 가능

• Architecture

  

  Backbone	Neck	Head
  CSPDarknet53 + Stem Layer	SPPF, CSP-PAN	YOLOv3
  - stem layer를 적용한 CSPDarknet53을 backbone으로 사용
  - Stem Layer: kernel size가 큰 strided convolution layer를 이용해 메모리와 연산량을 줄임
  - SPPF(Spatial Pyramid Pooling Fast): SPP의 빠른 버전으로 이미지 크기에 상관 없이 동일한 크기의 feature를 추출
  - SiLU(Swish, Sigmoid Linear Unit) Activation( $x*σ(x)$) 사용

YOLOX

Z. Ge, S. Liu, F. Wang, Z. Li, and J. Sun, “Yolox: Exceeding yolo series in 2021,” arXiv preprint arXiv:2107.08430, 2021

YOLOv3(Ultralytics, Pytorch)를 기반으로 Pytorch 환경에서 개발

• Developments

  • Anchor-Free: YOLOv2부터 사용되어 오던 anchor를 사용하지 않음으로써 학습 과정을 간단히 함
  • Multi Positives
    • YOLOv3의 방식을 따르는 상태에서 anchor의 부재는 오직 하나의 positive sample만 예측하는데 이는 주변의 다른 sample을 무시하게 됨
    • 이를 막고자 예측한 sample의 중심 좌표를 기준으로 $3 × 3$ 구간 내의 픽셀에 다른 sample의 중심 좌표가 있다면 이를 채택
  • Decoupled Head: classification과 localization 과정 간의 충돌을 막고자, 이 두 task를 2개의 head로 분리해서 수행
  • Advanced Label Assignment(SimOTA)
    • OT(Optimal Transport) Problem: ground truth label assignment 수행 시 여러 object의 bbox가 겹칠 때 발생하는 문제
    • OT problem을 해결하기 위해 SimOTA 기법 도입
  • Strong Augmentations: MixUP, Mosaic 기법의 데이터 증강 도입

• Architecture

  

  Decoupled Head가 적용되어 classification(Cls.과 localization(Reg. + IoU.) 과정을 분리

YOLOv6

C. Li, L. Li, H. Jiang, K. Weng, Y. Geng, L. Li, Z. Ke, Q. Li, M. Cheng, W. Nie, et al., “Yolov6: A single-stage object detection framework for industrial applications,” arXiv preprint arXiv:2209.02976, 2022

YOLOv6-N부터 YOLOv6-L6까지 여러 크기의 모델 존재

• Developments

  • A New Backbone Based on RepVGG

    • RepVGG: training과 inference 시에 구조가 바뀌는(re-parameterized) network

      

  • New Classification and Regression Loss

    • Varifocal Loss: 클래스 불균형 문재를 해결하기 위한 focal loss를 개선한 함수로서 focal loss의 가중치 조정 방식을 개선
    • SIoU/GIoU Regression Loss: 개선된 형태의 IoU 기반의 loss를 적용

  • Quantization: 양자화를 적용해 더 빠른 모델 제작

• Architecture

  

  Backbone	Neck	Head
  RepVGG blocks	PAN	Decoupled

4회차: 23/07/29 13:00~16:00 계획: YOLO 논문 분석 (2) 방향: 'A COMPREHENSIVE REVIEW OF YOLO: FROM YOLOV1 AND BEYOND' 논문 분석

결과

YOLOv3(YOLOv3-spp)

J. Redmon and A. Farhadi, “Yolov3: An incremental improvement,” arXiv preprint arXiv:1804.02767, 2018

• Developments

  • Bounding Box Prediction

    • 이전과 같이 $t_x$, $t_y$(bbox 중심 좌표), $t_w$, $t_h$(bbox의 너비와 높이)를 예측
    • $t_o$(confidence score) 대신에 objectness score를 도입 → logistic regression을 적용해 계산
      • ground truth와 가장 많이 겹치는 bbox에 대해 1, 나머지는 0
      • 각 ground truth에 anchor box를 오직 하나만 배정

  • Class Prediction: softmax 대신에 binary cross-entropy를 적용

    • binary cross-entropy는 multi-label classification을 수행하기 위해 독립적인 logistic classifier를 학습하기 위한 용도로 사용
    • 이로써 같은 bbox에 여러 label을 적용 가능 → e.g. person, man

  • New Backbone: Darknet-53을 backbone으로 사용

  • Spatial Pyramid Pooling(SPP): 여러 크기의 max pooling layer를 concatenate하는 SPP block을 적용 → receptive field를 늘림

  • Multi-scale Prediction

    • 다양한 크기의 feature를 추출해서 이에 대한 예측을 수행

    • network 중간에서 feature를 추출해 이를 upsample한 후 concatenate하는 방식

    • 다양한 크기의 객체를 detect하고, 적은 물체애 대한 정확도를 개선하는 데 도움

      

  • Bounding Box Priors: 이전과 같이 k-means clustering을 적용해 anchor box를 선정하되, 각 grid마다 3개를 선정

• Architecture

  • Darknet-53을 backbone으로 사용(53개의 conovlutional layer)

  • max pooling을 strided convolution으로 대체

  • residual network 추가

    

YOLOv4

A. Bochkovskiy, C.-Y. Wang, and H.-Y. M. Liao, “Yolov4: Optimal speed and accuracy of object detection,” arXiv preprint arXiv:2004.10934, 2020

• Developments

  • An Enhanced Architecture with Bag-of-Specials(BOS) Integration

    • Bag-of-Specials(BOS): 추론 시의 비용을 약간 증가시켜 정확도를 개선하는 기법

      e.g. receptive field 키우기, feature 결합, NMS

    • CSPNet: Darknet-53에 cross-stage partial connection과 Mish activation function을 결합한 네트워크를 backbone으로 활용

      • Cross-Stage Partial Connection: skip connection 중 하나로 CSP stage에서 두 부분으로 나눠 네트워크를 통과한 뒤에 특정 레이어에서 결합하는 것 → parameter를 효율적으로 사용
      • Mish Activation Function: sigmoid와 ReLU의 특성을 결합한 activation function

    • PANet(Path Aggregation Network)

      • FPN을 개선한 아키텍처로, FPN에서는 bottom-up pathway의 피라미드 구조를 통해 다양한 해상도에서의 feature를 추출
      • top-down pathway를 추가로 도입해 high-level feature를 low-level feature와 concatenate
      • attention module을 추가로 도입해 feature map간의 상호 의존성 강화

    • SPP: 추론 시간에 영향을 주지 않고, receptive field를 키움

  • Integrating Bag-of-Freesbies(BoF) for an Advanced Training Approach

    • Bag-of-Freesbies(BoF): 학습 방법만 변경해 학습 비용은 증가하지만 추론 시간에는 영향을 주지 않으면서 모델의 정확도를 개

      e.g. 데이터 증강

    • Mosaic Augmentation: 네 개의 이미지를 하나로 결합하는 증강법

    • DropBlock: dropout을 개선한 regularization 기법

    • Class Label Smoothing: one-hot encoding labeling을 개선

    • CIoU Loss: IoU에 ground truth bbox와 예측된 bbox의 중심 간의 거리를 반영하여 개선

    • CmBN(Cross mini Batch Normalization): 기존의 batch normalization을 개선한 regularization 기법

      • 객체 단위 정규화, 배치 크기를 동적으로 조절

  • Self-Adversarial Training(SAT): 모델을 robust하게 만들기 위해 기존 data에 노이즈 추가하거나 변형을 가해 학습시키는 것

  • Hyperparameter Optimization with Generic Algorithms

• Architecture

  CSPNet-PANet-SPP

  Backbone	Neck	Head
  CSPDarknet53	SPP, PAN	YOLOv3

  

3회차: 23/07/22 13:00~16:00 계획: YOLO 논문 분석 (1) 방향: 'A COMPREHENSIVE REVIEW OF YOLO: FROM YOLOV1 AND BEYOND' 논문 분석

결과

개요

YOLO 모델의 버전별 진화 과정(YOLOv1 ~ YOLOv8)을 분석한 논문입니다. 모델의 버전에 따라 도입된 네트워크 구조 및 학습 기법 등의 소개하고, YOLO 모델의 미래 연구 방향을 제시합니다.

real-time Object Detection의 포문을 연 YOLO는 수많은 Object Detection 알고리즘 중에서 speed와 accuracy 두 측면의 밸런스를 유지했다는 평가를 받습니다. YOLO 모델은 network design, loss function, anchor box, input resolution scaling 등의 변화를 적용해 진화를 거듭했습니다.

본문

YOLOv1

J. Redmon, S. Divvala, R. Girshick, and A. Farhadi, “You only look once: Unified, real-time object detection,” in Proceedings of the IEEE conference on computer vision and pattern recognition, 2016.

• You Only Look Once

  Objcet Detection을 네트워크를 한 번 지남으로써 수행할 수 있음 → 1-stage 프로세스

  • 이전까지의 모델(Fast R-CNN)에서는 Regional Proposal을 진행한 후 Classification을 진행하는 2-stage 프로세스를 활용
  • 1-stage 프로세스를 진행함으로써 더 빠른 detection을 가능 → real-time

• Process

  bounding box(이하 bbox)를 detect하는 과정을 동시에 진행

  1. input image를 $S × S$ 크기의 grid로 나눔
  2. 모든 grid에서 $B$개의 bbox와 모든 클래스의 confidece $C$를 각각 예측
     • $B$는 하나의 grid에서 detect하는 bbox의 개수
       • $P_c$(bbox의 confidence score)와 $b_x$, $b_y$(bbox의 중심 좌표), $b_h$, $b_w$(bbox의 높이와 너비)로 구성됨
     • $C$는 $c_1$, $c_2$, $...$, $c_n$($n$: 클래스 개수)으로 구성됨
     • output: $S × S × (B × 5 + C)$ 크기의 tensor
  3. NMS(Non-Maximum Suppression)을 적용해 중복된 bounding box 제거

• Architecture

  24개의 Conv layer와 2개의 FC layer로 구성

  • 모든 layer에서 leaky rectified linear unit activation 사용

  • $1 × 1$ Conv layer를 사용해 feature map과 parameter의 수를 줄임

    

    

• Loss Function

  localization, confidence, classification에 대한 loss의 합으로 구성

  detect한 bbox에 object가 없을 시에는 낮은 가중치를 부여

  

• Strengths and Limitations

  • Fast R-CNN과 비교했을 때 speed가 개선되어 real-time detect가 가능
  • 하지만 localization error는 더 높음
    • 하나의 grid에서 최대 2개의 객체만 탐지를 하게 해서 인접한 물체에 대한 예측 성능이 떨어짐
    • 학습 데이터와 종횡비가 다른 물체에 대해서는 예측 성능이 떨어짐
    • down-sampling layer을 이용해 추출된 feature의 품질이 떨어짐

Architecture

CNN 모델은 대체적으로 위와 같은 형태로 구성됨

• Backbone: feature 추출
• Neck: feature 정제 및 강화
• Head: 예측 수행

YOLOv2(YOLO9000)

J. Redmon and A. Farhadi, “Yolo9000: better, faster, stronger,” in Proceedings of the IEEE conference on computer vision and pattern recognition, 2017

• Developments

  • Batch Normalization: 모든 convolutional layer에 도입해 convergence 개선 및 overfitting 감소

  • High-Resolution Classifier: 더 큰 이미지($448 × 448$)을 이용해 finetune → 큰 이미지에 대한 성능 개선

  • Fully Convolutional: dense layer를 제거하고, fully convolutional하게 만듦

  • Use Anchor Boxes to Predict Bbox: 미리 정의된 shape의 anchor box를 각 grid마다 도입해 anchor box의 좌표와 class를 예측

    

  • Dimension Clusters: 적절한 shape의 anchor box를 선정하기 위해 k-mean clustering을 이용해 학습해 각 grid마다 5개의 achor box를 선정

  • Direct Location Prediction: YOLOv1에서와 유사하게 각 grid 별로 예측, 각 grid 내의 bbox마다 $t_x$, $t_y$(bbox 중심 좌표), $t_w$, $t_h$(bbox의 너비와 높이), $t_o$(confidence score)를 예측

    

  • Finner-Grained Features: passthrough layer를 사용해 주변 $26 × 26 × 512$ feature map을 $13 × 13 × 2048$ feature map으로 reorganize(인접한 feature를 쌓는 구조) → subsampling으로 인해 소실되는 feature를 보존

  • Multi-Scale Training: FC layer를 사용하지 않아 다양한 크기의 이미지를 input으로 사용 가능, 이를 활용해 다양한 크기의 이미지를 활용($320 × 320$ ~ $608 × 608$)해 학습을 진행 → 다양한 크기의 객체를 detect하는 데 도움

• Architecture

  • Darknet-19를 backbone으로 사용(19개의 convolutional layer와 5개의 pooling layer로 구성)

  • $1 × 1$ ~ $3 × 3$ convolutional layer를 사용해 parameter 수를 줄임

  • passthrough layer 도입

  • 마지막에는 1000개의 convolutional layer와 global average pooling layer, 그리고 softmax로 구성

    

    

2회차: 23/07/15 13:00~16:00 계획: YOLOv8 모델 학습 (Segmentation) 방향: YOLO 중 가장 최신 모델인 YOLOv8을 이용해 Segmentation 수행

결과

Segmentation

학습

from ultralytics import YOLO

# Load a model
model = YOLO('yolov8n-seg.yaml')  # build a new model from YAML

# Train the model
model.train(data='coco128-seg.yaml', epochs=100, imgsz=640)

• yolov8n 모델을 이용해 학습 진행
• 학습을 위해 coco 데이터셋을 활용
• train의 인자로 epochs, batch, imgsz 등을 설정할 수 있음

모델 구조

학습 결과

1회차: 23/07/07 20:00~23:00 계획: YOLOv8 모델 학습 (Object Detection) 방향: YOLO 중 가장 최신 모델인 YOLOv8을 이용해 Object Detection 수행

결과

YOLOv8

• Ultralytics 사에서 개발한 최신 버전의 YOLO 모델
  • [YOLOv8] https://github.com/ultralytics/ultralytics
• YOLOv5 모델을 기반으로 생성됨
• 세부적으로 모델 크기에 따라 YOLOv8n·YOLOv8s·YOLOv8m·YOLOv8l·YOLOv8x 총 5개 구성됨
• 이전 버전의 YOLO 모델보다 모델 크기가 적음
• 더욱 빨라진 모델로 real-time inference가 가능
• 하나의 모델로 Classification, Detection, Segmentation, Tracking, Pose Estimation이 모두 가능

Object Detection

설치

pip install ultralytics

pip install wandb

• 선택적으로 학습 로그를 확인하기 위해 wandb를 설치할 수 있음

학습

from ultralytics import YOLO

# Load a model
model = YOLO('yolov8n.yaml')  # build a new model from YAML

# Train the model
model.train(data='coco128.yaml', epochs=100, imgsz=640)

• yolov8n 모델을 이용해 학습 진행
• 학습을 위해 coco 데이터셋을 활용
• train의 인자로 epochs, batch, imgsz 등을 설정할 수 있음

모델 구조

학습 결과

구성원 :

1. 김현수
2. 박광욱
3. 박종경
4. 최원준
5. 정주헌

목표

• Computer Vision 관련 모델 학습
• Computer Vision 관련 모델 공부
• Computer Vision 관련 논문 리뷰

일정

1회차: 23.07.07 20:00 ~ 23:00 목표 : YOLOv8 모델 학습 (Object Detection)

2회차: 23.07.15 13:00 ~ 16:00 목표 : YOLOv8 모델 학습 (Segmentation)

3회차: 23.07.22 13:00 ~ 16:00 목표 :

4회차 : 23.07.29 13:00 ~ 16:00 목표 :

5회차: 23.08.05 13:00 ~ 16:00 목표 :

6회차: 23.08.12 13:00 ~ 16:00 목표 :

계획은 진행 상황에 따라 변경될 수 있습니다.

style 속성

<div style="...">
  ...
</div>

• 태그에 CSS를 적용하려면 style 속성을 사용
• 위와 같이 HTML의 태그에 직접 적용 가능하나, 주로 CSS 파일(.css) 별도로 만들어 적용

CSS 속성 및 CSS 속성값

• CSS 속성: CSS 속성값 형태로 작성

  <div style="color: #272928">
  ...
  </div>

  <!-- 속성이 여러 개 -->
  <div style="color: #272928; background-color: #eeeeee">
  ...
  </div>

• 속성이 여러 개이면 세미콜론(;)으로 구분

규칙

선택자 {
  속성: 속성값;
  속성: 속성값;
}

• CSS 속성을 각 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용할 것

선택자

태그 이름

/* h3 태그의 글자 크기를 24px로 설정 */
h3 {
  font-size: 24px;
}

• h1 , div 등의 태그에 해당하는 모든 요소에 스타일을 적용

아이디(id)

<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>

/* 아이디 이름이 hallasan인 태그에 글자색을 넣음 */
#hallasan {
  color: #f56513;
}

• 맨 앞에 #을 붙여서 #아이디_이름과 같은 문법으로 사용
• 아이디는 한 페이지 내에서 중복으로 쓸 수 없음

클래스(class)

<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>

/* 클래스 이름이 place인 모든 태그에 글자 크기와 굵기를 적용 */
.place {
  font-size: 16px;
  font-weight: 400;
}

• 아이디는 중복해서 쓸 수 없지만, 클래스는 가능
• 맨 앞에 .를 붙여 .클래스_이름 형태로 사용

기본 단위

색상

색상 코드

#FFFF00

• 색상을 16진수로 표현한 값

RGB

rgb(255, 255, 0)

• 빨강, 초록, 파랑 값을 10진수로 써서 색상을 나타냄
• 0~255의 정수

RGBA

rgba(255, 255, 0, 0.5)

• RGB에 알파 값을 추가
• 0~1의 소수
• 1에 가까울수록 불투명, 0에 가까울수록 투명

절대적 크기

픽셀(px)

• 크기의 절대적인 단위
• 화면을 표시하는 기준이 되는 크기

상대적 크기

퍼센트

<div id="parent">
  높이: 320px
  <div id="child">
    높이: 160px
  </div>
</div>

/* 부모 태그 height의 절반 값 */
#parent {
  height: 320px;
}

#child {
  height: 50%;
}

• %를 이용
• 부모 태그의 크기에 상대적으로 지정

em

• 부모 태그의 font-size 크기

  <div id="parent">
  크기: 16px
  <div id="child">
    크기: 64px
  </div>
  </div>

  #parent {
  font-size: 16px;
  }
  /* 16px * 4 = 64px */
  #child {
  font-size: 4em;
  }

rem

• root em
• <html> 태그의 font-size 크기

  <html>
  <body>
        크기: 18px
        <div id="other">
          크기: 32px
        </div>
  </body>
  </html>

  html {
  font-size: 16px;
  }
  

body { font-size: 18px; } /* 16px * 2 = 32px */ #other { font-size: 2rem; }

# 속성
## 텍스트
### 글자색
- `color` 속성
```html
<span class="red">빨강</span>
<span class="orange">주황</span>
<span class="yellow">노랑</span>

.red {
  color: #F23030;
}

.orange {
  color: #F28705;
}

.yellow {
  color: #F2CB05;
}

글꼴

• font-family 속성

  <html>
  <head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
  </head>
  <body>
  <p id="with-poppins">Poppins 있는 Noto Sans KR</p>
  <p id="without-poppins">Poppins 없는 Noto Sans KR</p>
  </body>
  </html>

  /* 영문은 Poppins 글꼴 적용, 한글은 Noto Sans KR 적용 */
  #with-poppins {
  font-family: Poppins, "Noto Sans KR", sans-serif;
  }
  

#without-poppins { font-family: "Noto Sans KR", sans-serif; }

- 우선적으로 적용할 글꼴 이름부터 쉼표(`,`)로 이어 차례대로 작성
- 웹 브라우저가 차례대로 확인하면서 적용 가능한 글꼴을 적용
- 글꼴 이름에 공백이 있으면 따옴표(`'`)로 감쌈

### 글짜 크기
```css
font-size: 16px

글짜 굵기

• font-weight 속성

  <span class="bold">굵게</span>
  <span class="regular">중간</span>
  <span class="light">얇게</span>

  .bold {
  font-weight: 600;
  }
  

.regular { font-weight: 400; }

.light { font-weight: 200; }

- `100` ~ `900`에서 `100` 단위로 올라감
- 중간값은 `400`

### 줄 높이
- `line-height` 속성
```html
<p class="loose">
  넓게<br>
  넓게<br>
  넓게
</p>
<p class="regular">
  보통<br>
  보통<br>
  보통
</p>
<p class="tight">
  좁게<br>
  좁게<br>
  좁게
</p>

.loose {
  font-size: 16px;
  line-height: 1.7; /* 16px * 1.7 = 27.2px */
}

.regular {
  font-size: 16px;
  line-height: 1.5; /* 16px * 1.5 = 24px */
}

.tight {
  font-size: 16px;
  line-height: 1; /* 16px * 1 = 16px */
}

• 줄과 줄 사이의 간격을 조절
• 단위 없이, 글자 크기에 상대적인 값

텍스트 꾸미기

• text-decoration 속성

  <a href="https://codeit.kr">
  링크
  </a>
  <br>
  <a class="none" href="https://codeit.kr">
  밑줄 없는 링크
  </a>
  <br>
  <span class="underline">
  밑줄
  </span>
  <br>
  <span class="line-through">
  취소선
  </span>

  .none {
  text-decoration: none;
  }
  

.underline { text-decoration: underline; }

.line-through { text-decoration: line-through; }

- `none` : `<a>` 태그에 기본으로 있는 밑줄을 제거
- `underline` : 밑줄
- `line-through` : 취소선

## 배경
### 배경색
- `background-color` 속성
```css
background-color: #272928

배경 이미지

• background-image 속성

  background-image: url('a.png')

• url(...)을 이용해 배경 이미지를 넣음

  background-image: /* 위에서부터 a, b, c가 깔림 */
  url('a.png'), /* 제일 위에 보이는 이미지 */
  url('b.png'),
  url('c.png');  

• 배경 이미지 여러 개를 넣을 수 있음

배경 위치

• background-position 속성

  background-position: top; /* 위 */
  background-position: right; /* 오른쪽 */
  background-position: bottom; /* 아래 */
  background-position: left; /* 왼쪽 */
  background-position: left top; /* 왼쪽 위 */
  background-position: center;

• 기본값은 left top

배경의 반복

• background-repeat 속성

  background-repeat: repeat; /* 반복하기 */
  background-repeat: no-repeat; /* 반복 안 함 */

• 기본값은 repeat

배경 크기

• background-size 속성

  background-size: 40px 30px; /* 가로 40px 세로 30px */
  background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
  background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */

• 직접 가로 및 세로 크기 지정 가능
• cover : 비율을 유지하면서 영역에 꽉 차게
• contain : 영역 안에서 최대한 크게

그라디언트

• linear-gradient()

  background-image: linear-gradient(#000000, #ffffff);

• 기본적으로 시작 색상, 종료 색상을 사용

  background-image:
  linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

• 방향 기본값은 180도(위에서 아래)
• 방향을 바꾸려면 맨 앞에 각도 넣기, 단위는 deg

그림자

• box-shadow 속성 ```css box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6); /* 가로: 5px 세로: 10px 흐린 정도(Blur): 15px 퍼지는 정도(Spread): 8px 색상: rgba(0, 0, 0, 0.6)
• / ```
• 가로, 세로, 흐린 정도(blur), 퍼지는 정도(spread), 색상 순서

불투명도

• opacity 속성

  opacity: 0; /* 투명 */
  opacity: 0.6;
  opacity: 1; /* 불투명 */

• 요소 전체의 불투명도를 조절
• 0 ~ 1의 소수 값, 단위 없음

너비

width: 560px

높이

height: 380px

Padding

• 안쪽 여백

  /* 상하좌우 8px */
  padding: 8px

  /* 상하 16px, 좌우 8px */
  padding: 16px 8px

  /* 상 16px, 좌우 8px, 하 24px */
  padding: 16px 8px 24px

  /* 상 16px, 우 8px, 좌 24px, 하 10px */
  padding: 16px 8px 24px 10px

• 숫자 순서는 0시부터 시계 방향

Margin

• 바깥쪽 여백

  /* 상하좌우 8px */
  margin: 8px

  /* 상하 16px, 좌우 8px */
  margin: 16px 8px

  /* 상하 16px, 좌우 자동 */
  width: 520px
  margin: 16px auto

• auto는 자동으로 채워주고, margin의 좌우에서만 동작
• 요소의 width 속성이 정해져있을 때만 auto 사용 가능

  /* 상 16px, 좌우 8px, 하 24px */
  margin: 16px 8px 24px

  /* 상 16px, 우 8px, 하 24px, 좌 10px */
  margin: 16px 8px 24px 10px

• 마찬가지로 순서는 시계 방향

박스 모델(Box Model)

• HTML/CSS에서 요소는 기본적으로 박스 형태
• Content, Padding, Border, Margin으로 구성
• 요소의 크기는 content를 포함해 border까지

border 속성

/* 굵기, 테두리 종류, 색상 */
border: 2px solid #ededed;

border-radius 속성

• 박스 모델의 모서리를 둥글게 만들 때 사용
• border 속성 없이도 사용 가능

  /* 16px만큼 둥글게 */
  border-radius: 16px

  /* 타원 형태 */
  border-radius: 16px

  /* 알약 형태 */
  border-radius: 9999px

box-sizing 속성

#box {
  margin: 20px;
  padding: 30px;
  width: 100px;    /* content 영역의 너비 */
}

• #box 요소의 너비 = 100 + 30 + 30 = 160(px)

  #box {
  margin: 20px;
  padding: 30px;
  width: 100px;    /* content 영역의 너비: 40 */
  box-sizing: border-box;
  }

• 직관적으로 크기를 지정
• box-sizing 속성을 border-box로 지정하면 #box 요소의 너비 = 100(px)
• 기본값: content-box

overflow 속성

• 박스의 크기를 지정했을 때 안에 있는 내용이 삐져나오는 현상
• overflow 속성을 통해 이를 방지

  /* 넘치는 것 감추기 */
  overflow: hidden;

  /* 넘치면 스크롤 */
  overflow: auto;

  /* 넘치든말든 스크롤 */
  overflow: scroll;

Margin 상쇄(Margin Collapsing)

• 일반적으로 서로 이웃한 태그의 세로 margin은 겹쳐서 나타남
• 부모-자식 관계 태그에서도 margin을 겹쳐서 적용
  • 다만, 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 margin을 겹치지 않음

    <div id="a">a</div>
    <div id="b">b</div>

    #a {
    margin: 30px;
    }
    #b {
    margin: 20px;
    }

• #b의 margin이 #a의 margin에 완전히 겹쳐 둘 사이의 margin은 30px

  <div id="a">
  a
  </div>
  <div id="b">
  <div id="c">
    c
  </div>
  b
  </div>

  #a {
  margin: 30px;
  }
  

#b { margin: 20px; }

#c { margin: 40px; }

```

• #b의 margin이 #c에 완젼히 겹쳐 둘 사이의 margin은 40px
• #a의 margin이 #b에 완전히 겹쳐 둘 사이의 margin은 40px

Display

• 웹 페이지의 레이아웃을 결정하는 CSS의 속성

블록(Block)

• block : 위에서 아래로 차례대로 배치되는 display 속성
• 크기를 지정 가능
• <h1> , <h2> , ... , <h6> , <p> , <div>

인라인(Inline)

• inline : 글을 쓰는 방향으로 줄이 바뀌는 display 속성
• 크기를 지정할 수 없음
  • 다만 이미지와 같이 외부 데이터를 보여주는 태그는 인라인이지만, 크기를 지정 가능
• <a> , <br> , <img> , <span>

인라인 블록(Inline-block)

• inline-block : 인라인처럼 배치되지만 블록처럼 크기를 갖는 display 속성

float 속성

• float : 요소를 페이지의 왼쪽 혹은 오른쪽에 삽화처럼 배치하고, 그 주변에 인라인 요소를 배치할 수 있는 display 속성

태그(Tag)

• HTML에서 꺾쇠(<, >)를 사용하는 문법
• 일반적으로 시작 태그와 종료 태그로 내용을 감쌈
• 시작 태그: <태그 이름>
• 종료 태그: </태그 이름>

  <!-- <p> 태그 -->
  <p>
  단락
  </p>

  <!-- <img> 태그 -->
  <img src="이미지의 주소 혹은 디렉토리">

속성

• 시작 태그에 속성 이름="속성 값" 형태로 사용하는 문법
• 태그의 속성을 결정

  <!-- <a> 태그의 href 속성 -->
  <a href="https://naver.com">네이버</a>

  <!-- <img> 태그의 src 속성 -->
  <img src="이미지의 주소 혹은 디렉토리">

HTML 파일의 기본 구조

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

• <!DOCTYPE html> : 문서 타입(Document Type)이 html
• 크게 <html> 태그로 감싸고 <head>와 <body> 태그로 나뉨
• <head> : 페이지에 대한 정보
• <body> : 페이지에 대한 내용
• VSCode에서 !를 입력하고 Enter를 누르면 HTML 코드가 자동으로 생성됨

태그 정리

사이트 이름

<head>
  <title>네이버</title>
  ...
</head>

• 웹 브라우저 탭에 보이는 제목을 설정
• 페이지 내용이 아니라, 페이지에 대한 정보이므로 <head> 태그에 넣음

인코딩 설정

<head>
  <meta charset="utf-8">
  ...
</head>

• UTF-8(한글 지원)을 사용하도록 지정
• <meta> 태그를 <head> 태그 안에 넣기

제목(Heading)

<h1>title</h1>
<h2>subtitle</h2>

• 제일 큰 것부터 작은 것까지 <h1> , <h1> , ... , <h6> 태그를 사용
• <title> 태그와 다르므로 유의

단락(Paragraph)

<p>
  Hello
  World
</p>
<p>
  Hi
</p>

• 단락은 <p> 태그로 감싸기
• 코드에서의 줄 바꿈은 화면에 반영되지 않고 붙어서 보임

줄 바꿈(Break Line)

<p>
  Hello<br>
  World
</p>

• 줄 바꿈이 필요할 때 사용
• 시작 태그 <br> 하나만 사용

링크

<a href="https://naver.com">
  네이버
</a>

• 링크는 <a> 태그를 사용
• href 속성으로 이동할 주소나 디렉토리를 기록

이미지

• <img> 태그를 사용
• src 속성으로 이미지 파일의 주소 혹은 디렉토리를 기록

  <img src="이미지의 주소 혹은 디렉토리">

영역 나누기

• <div> 태그로 여러 태그를 감쌈
• <span> 태그로 텍스트 일부만 감쌈
• 영역을 구분하는 이유는 CSS에서 스타일을 적용하기 위함

  <div>
  <h1>서시</h1>
  <h2>시인 <span>윤동주</span></h2>
  </div>
  <div>
  <p>
    죽는 날까지 하늘을 우러러<br>
    한 점 부끄럼이 없기를,<br>
    ...
    걸어가야겠다.
  </p>
  <p>
    오늘 밤에도 별이 바람에 스치운다.
  </p>
  </div>

꺾쇠 기호를 넣는 법

• HTML에서는 꺾쇠를 태그로 인식
• 꺾쇠를 글자로 입력하려면 <(less than), >(greater than) 사용

  <html>, <head>, <body>

6회차: 23/02/15 14:00~18:00 계획: CSS 기본 정리 (3) 목적: React 사용을 위함 방향: CSS의 기본 문법을 정리

결과

기본 문법

선택자

선택자 {
    선언;
    선언;
    선언;
}

• CSS에서 맨 앞에 적는 것
• 규칙을 어떤 요소에 적용할지 선택

선택자 목록

선택자1,
선택자2 {
    ...
}

• 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용

선택자 붙여쓰기

<h2 id="mongolia" class="large title">몽골 대자연으로 떠나는 여행</h2> 

아이디 + 클래스

#mongolia.title

클래스 + 클래스

.large.title

태그 + 아이디 + 클래스

h2#mongolia.large.title

• 여러 조건을 동시에 만족하는 요소를 선택할 때 선택자를 붙여서 쓸 수 있음

자식 결합자(Child Combinator)

<div class="article">
  <img src="tesla-y-2025.png">
  ...
</div>

.article > img {
  width: 100%;
}

• 오른쪽 꺾쇠(>)로 선택자를 이어 줌
• 코드가 많아지면 나중에 혼동될 수 있어 선호되지는 않음

자손 결합자(Descendant Combinator)

<div class="article">
    <p> 이번에 리뷰해 볼 차량은 테슬라 모델 W 입니다.
      <img src="tesla-w-2025.png">
  </p>
  ...
</div>

.article img {
  width: 100%;
}

• 스페이스(띄어쓰기)로 선택자를 이어 줌
• 코드가 많아지면 나중에 혼동될 수 있어 선호되지는 않음

가상 클래스(Pseudo-class)

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

• 요소의 상태를 선택할 때 사용하는 클래스
• 선택자 뒤에 콜론(:)을 붙여 사용
• :hover: 마우스를 올렸을 때 밑줄이 생김
• :active: 클릭한 상태
• :visited: 방문한 적이 있는 링크
• :focus: 포커싱 됐을 때

전체 선택자(Universal Selector)

* {
  box-sizing: border-box;
}

• *: 모든 요소를 선택

  .gallery > * {
  width: 120px;
  height: 90px;
  }

• .gallery의 모든 자식 요소를 선택

캐스케이드(Cascade)

• 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용
• 종속이라고도 함
• 우선순위가 높은 규칙일수록 우선적으로 속성을 적용
• 브라우저에서 기본으로 제공하는 스타일 시트(User Agent Stylesheet)는 작성된 코드보다 우선순위가 낮음
• 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높음
• 선택자는 명시도(선택자마다 우선순위를 매기기 위한 점수로 아이디 개수, 클래수 개수, 태그 개수로 구성됨) 점수를 비교해서 우선순위를 매김
• 가까운 조상에게서 물려받은 속성일수록 우선순위가 높음

5회차: 23/02/09 14:00~18:00 계획: CSS 기본 정리 (2) 목적: React 사용을 위함 방향: CSS의 기본 문법을 정리

결과

기본 문법

글자 색

  <span class="red">빨강</span>
  <span class="orange">주황</span>
  <span class="yellow">노랑</span>

  .red {
    color: #F23030;
  }

  .orange {
    color: #F28705;
  }

  .yellow {
    color: #F2CB05;
  }

글자 크기

  <span class="large">크게</span>
  <span class="medium">중간</span>
  <span class="small">작게</span>

  .large {
    font-size: 24px;
  }

  .medium {
    font-size:  16px; 
  }

  .small {
    font-size: 8px;
  }

글꼴

  <html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
  </head>
  <body>
    <p id="with-poppins">Poppins 있는 노토 산스 케이알</p>
    <p id="without-poppins">Poppins 없는 노토 산스 케이알</p>
  </body>
  </html>

  #with-poppins {
    font-family: Poppins, "Noto Sans KR", sans-serif;
  }

  #without-poppins {
    font-family: "Noto Sans KR", sans-serif;
  }

• font-family는 웹 브라우저가 font를 차례대로 확인하면서 적용 가능한 글꼴을 적용

글짜 굵기

  <span class="bold">굵게</span>
  <span class="regular">중간</span>
  <span class="light">얇게</span>

  .bold {
    font-weight: 600;
  }

  .regular {
    font-weight: 400; 
  }

  .light {
    font-weight: 200;
  }

줄 높이

  <p class="loose">
    넓게<br>
    넓게<br>
    넓게
  </p>
  <p class="regular">
    보통<br>
    보통<br>
    보통
  </p>
  <p class="tight">
    좁게<br>
    좁게<br>
    좁게
  </p>

  .loose {
    font-size: 16px;
    line-height: 1.7; /* 16px * 1.7 = 27.2px */
  }

  .regular {
    font-size: 16px;
    line-height: 1.5; /* 16px * 1.5 = 24px */
  }

  .tight {
    font-size: 16px;
    line-height: 1; /* 16px * 1 = 16px */
  }

• line height는 글짜 크기에 상대적(비례)으로 적용

텍스트 꾸미기

  <a href="https://naver.com">
    링크
  </a>
  <br>
  <a class="none" href="https://naver.com">
    밑줄 없는 링크
  </a>
  <br>
  <span class="underline">
    밑줄
  </span>
  <br>
  <span class="line-through">
    취소선
  </span>

.none {
    text-decoration: none;
  }

  .underline {
    text-decoration: underline;
  }

  .line-through {
    text-decoration: line-through;
  }

• 밑줄 -> underline
• 취소선 -> line-through

배경 이미지

background-image: url('flowers.png');

background-image:
  url('a.png'), /* 제일 위에 보이는 이미지 */
  url('b.png'),
  url('c.png');

• 배경 이미지는 여러 개 넣을 수 있음(위에서부터 쌓임)

배경 위치

background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
background-position: center;

• default 값은 left top

배경 반복

background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값) */
background-repeat: no-repeat; /* 반복 안 함 */

• default 값은 repeat

배경 크기

background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이지미 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */

그라디언트

 background-image: linear-gradient(#000000, #ffffff);

background-image:
  linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

• default 방향 각도는 180도(위에서 아래로)
• CSS Gradient Generator에서 Gradient 코드를 얻을 수 있음

그림자

box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
  가로: 5px
  세로: 10px
  흐린 정도(Blur): 15px
  퍼지는 정도(Spread): 8px
  색상: rgba(0, 0, 0, 0.6)
*/

불투명도

box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
  가로: 5px
  세로: 10px
  흐린 정도(Blur): 15px
  퍼지는 정도(Spread): 8px
  색상: rgba(0, 0, 0, 0.6)
*/v

Padding

• 영역 안쪽에 여백을 넣을 때 사용

  padding: 8px;

• 상하좌우 한 번에

  padding: 16px 8px;

• 상하, 좌우 각각

  padding: 16px 8px 24px;

• 상, 좌우, 하 각각

  padding: 16px 8px 24px 10px;

• 상, 하, 좌, 우 각각
• 순서는 0시부터 시계 방향으로

Margin

• 영역 바깥쪽에 여백을 넣을 때 사용
• 좌우 바깥 여백에는 auto를 적용하면 자동으로 채움(width 속성이 정해져 있어야 자동으로 채워짐)
• 순서는 Padding과 똑같이 0시부터 시계 방향으로

  margin: 8px;
  

margin: 16px 8px;

width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */ margin: 16px auto;

margin: 16px 8px 24px;

margin: 16px 8px 24px 10px; ```

4회차: 23/02/06 15:00 ~ 19:00 계획: CSS 기본 정리 (1) 목적: React 사용을 위함 방향: CSS의 기본 문법을 정리

결과

기본 문법

규칙

선택자 { 속성: 속성값; ...}

선택자

• 규칙에서 요소를 선택하는데 사용

  <h3>우도</h3>
  <h3 id="hallasan">한라산 국립공원</h3>
  <h3>성산 일출봉</h3>
  <h3>군산 오름</h3>

  h1 {
    font-size: 24px;
  }

• h1 태그의 글자 크기를 24px로 설정

  #hallasan {
  color: #f56513;
  }

• 'hallasan'이라는 id에 글자색을 적용

  .place {
  font-size: 16px;
  font-weight: 400;
  }

• 'place'라는 클래스에 글자 크기 및 굵기를 적용

색상

#ffff00
rgb(255, 255, 0)
rgba(255, 255, 0, 0.5)

1. 색상 코드
2. RGB
3. RGBA: 마지막 인자는 투명도

크기

픽셀(px)

• 절대적인 단위

퍼센트(%)

• 상대적인 단위

  <div id="parent">
  저는 높이가 320px입니다.
  <div id="child">
    저는 높이가 160px이에요!
  </div>
  </div>

  #parent {
  background-color: #A655ED;
  height: 320px;
  }
  

#child { background-color: #6942D6; height: 50%; }

- 부모 태그의 크기에 상대적으로 지정
- 여기서는 부모 태그 크기의 절반인 160px을 적용

##### em
- 부모 태그의 font-size 크기
```html
<div id="parent">
  저는 16px입니다.
  <div id="child">
    저는 64px이에요!
  </div>
</div>

#parent {
  font-size: 16px;
}

#child {
  font-size: 4em;
}

• 4em = 16px * 4 = 64px

rem

• root의 em
• 최상위 태그인 <html> 태그의 font-size 크기

  <html>
  <body>
        저는 18px 입니다.
        <div id="other">
      저는 32px이에요!
        </div>
  </body>
  </html>

  html {
  font-size: 16px;
  }
  

body { font-size: 18px; }

#other { font-size: 2rem; }

- 2rem = 16px * 2 = 32px

3회차: 23/02/02 16:00 ~ 20:00 계획: HTML 기본 정리 목적: React 사용을 위함 방향: HTML의 기본 문법을 정리하고 간단한 웹페이지를 만들어보기

결과

기본 문법

태그(Tag)

• HTML에서 꺾쇠(<>)를 사용하는 문법
• 시작 태그<tag name>, 종료 태그</tag name> 형태로 내용을 감쌈
• e.g.

  <p>
  paragraph
  </p>

  <img src="img address or directory">

속성

• 시작 태그에 속성 이름="속성 값" 형태로 사용
• 태그의 속성을 지정
• e.g.

  <a href="https://naver.com">네이버</a>

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>

</body>
</html>

• (!를 입력하고 enter 치면 위와 같은 기본 코드가 생성됨)
• <!DOCTYPE html>: document type
• <html>: html 태그
• <head>: head 태그, 페이지의 정보를 담음(웹페이지 상에는 그 내용이 거의 드러나지 않음)
• <body>: body 태그, 페이지의 내용이 들어감
• meta charset="UTF-8: 한글을 지원하는 UTF-8 인코딩을 사용하도록 설정

사이트 이름

<head>
  <title>Title</title>
  ...
</head>

• head 안에 작성
• head의 내용 중 표면에 드러나는 정보

제목

<body>
  <h1>1st_head</h1>
  <h2>2nd_head</h2>
  ...
</body>

• 제목 내용을 작성
• <h1>부터 <h6>까지 글씨 크기 순으로 있음

단락(Paragraph)

<body>
  <p>
    paragraph
    ...<br>
    ...
  </p>
  ...
</body>

• 단락을 나타냄
• 코드에서의 줄 바꿈은 기본적으로 웹페이지에 반영되지 않음
• 줄 바꿈(Break Line)은 <br>로

링크

<a href="https://naver.com">네이버</a>

• 이동할 주소 설정
• 태그 안의 내용은 하이퍼링크 처리 됨

이미지

<img src="img web address or directory">

• 이미지의 웹 주소 혹은 디렉토리를 통해 설정

영역 나누기

<div>
  <h1>서시</h1>
  <h2>시인 <span>윤동주</span></h2>
</div>
<div>
  <p>
    죽는 날까지 하늘을 우러러<br>
    한 점 부끄럼이 없기를,<br>
    잎새에 이는 바람에도<br>
    나는 괴로워했다.<br>
    별을 노래하는 마음으로<br>
    모든 죽어가는 것을 사랑해야지<br>
    그리고 나한테 주어진 길을<br>
    걸어가야겠다.
  </p>
  <p>
    오늘 밤에도 별이 바람에 스치운다.
  </p>

• 기본적으로 <div> 태그 사용
• 부분적으로 텍스트 일부를 감쌀 때는 <span> 태그 사용
• 영역을 나눠놓으면 CSS로 스타일링 할 때 용이

Newsletter 웹페이지 만들어보기

코드

• CSS를 HTML 파일과 같이 적용

• 다음 글에서 CSS에 대해 정리하고, 따로 CSS 파일을 만든 웹페이지를 만들어볼 예정

  <!DOCTYPE html>
  <html>
  <head>
    <title>Weekly News</title>
    <meta charset="utf-8">
    <meta name="description" content="금요일에 만나는 뉴스">
    <meta property="og:title" content="Weekly News">
    <meta property="og:url" content="https://weekly-newsletter.netlify.app/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="">
    <meta property="og:description" content="유닉스 명령어, 추천 시스템, 그리고 HTML 코드 꿀팁들을 공유합니다.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HQ9HBSCZ3H"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
  
      gtag('config', 'G-HQ9HBSCZ3H');
    </script>
  </head>
  <body style="color: #737373; font-family: 'Poppins', 'Noto Sans KR', sans-serif; margin: 0">
    <div style="background-color: #7542e0; text-align: center; padding: 20px">
      <h1 style="color: #ffffff; font-weight: 300">Weekly <span style="font-weight: 700">News</span></h1>
      <p style="color: #c1b7ff">금요일에 만나는 뉴스</p>      
    </div>
    <div style="padding: 40px 20px">
      <div style="width: 560px; margin: 0 auto">
        <img src="thumbnail-unix.png" style="width: 100%">
        <h2 style="color: #2e2e2e; font-size: 20px">생산성을 높여줄 유닉스 커멘드 꿀팁</h2>
        <p>
          생각만 하면 모든 게 이루어진다! 꿈 같은 이야기죠? 하지만 
          유닉스 커멘드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 
          대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 
          뚝딱하거든요.
        </p>
        <p>
          유닉스 커멘드를 사용할 때 알아두면 좋은, 작업 효율성을 
          UP!UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 
          살펴보세요!
        </p>
        <a href="https://naver.com">자세히 보기</a>
      </div>
    </div>
    <div style="background-color: #fbfbff; padding: 40px 20px">
      <div style="width: 560px; margin: 0 auto">
        <img src="thumbnail-machine-learning.png" style="width: 100%">
        <h2 style="color: #2e2e2e; font-size: 20px">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>
          넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 
          시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 
          프로그램을 의미합니다.
        </p>
        <p>
          내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다.
          (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 
          영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 
          화면에 보여주기 때문이죠.
        </p>
        <a href="https://naver.com">자세히 보기</a>
      </div>
    </div>
    <div style="padding: 40px 20px">
      <div style="width: 560px; margin: 0 auto">
        <img src="thumbnail-emmet.png" style="width: 100%">
        <h2 style="color: #2e2e2e; font-size: 20px">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <p>
          HTML 파일을 작성하려면 DOCTYPE, &lt;html&gt;, &lt;head&gt;, &lt;body&gt; ... 적어야 할 것이 참 
          많습니다. 이럴 때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 
          !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 
          수 있답니다!
        </p>
        <p>
          이건 Emmet이라고 부르는 문법의 일부인데요. Emmet은 개미라는 
          뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 
          개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 
          수 있으니까 한 번 살펴보시는 것도 좋을 거 같네요.
        </p>
        <a href="https://naver.com">자세히 보기</a>
      </div>
    </div>
    <div style="background-color: #fbfbff; text-align: center; padding: 40px 20px">
      <div style="width: 560px; margin: 0 auto">
        <h2 style="color: #2e2e2e; font-size: 20px">퀴즈</h2>
        <p style="background-color: #f6f1ff; color: #7844e8; padding: 16px; margin: 32px">
          머신 러닝에서 유저에게 유저가 좋아하거나<br>
          구매할만할 상품을 추천해 주는 프로그램을<br>
          □□ □□□(이)라고 부른다.
        </p>
        <p>
          빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>
          선착순 200분께 굿즈를 보내드려요.
        </p>
      </div>
    </div>
    <div style="background-color:#46415a; color: #ffffff; text-align: center; padding: 40px 20px">
      <p>Weekly <span style="font-weight: 700">News</span></p>
      <p>Weekly News를 아직 구독하지 않으셨다면? <a href="subscribe.html" style="color: #ffffff">구독 신청하기</a></p>
      <p>수신 거부 Unsubscribe</p>
    </div>
  </body>
  </html>

결과

Weekly Newsletter

2회차: 23/01/30 16:00 ~ 20:00 계획: Javascript 기본 문법 정리 (2) 목적: React 사용을 위함 방향: 기존의 프로그래밍 언어의 개념(e.g. 변수, 함수, 조건문, 반복문 등)이 Javascript에서는 어떻게 사용되는지 코드로 간단하게 확인

결과

객체

let ironman = {         // Property(속성)
  name: 'Tony',         // key - value
  age: 35,
  'born year': 1988,
  isMan: true,
  movie: {              // nested
    title: 'Avengers',
    isHero: true
  }
}
console.log(ironman);
console.log(typeof ironman);
console.log(ironman.name);
console.log(ironman['born year']);
console.log(ironman.movie.title);
console.log(ironman.machine);       // undefined
ironman.name = 'Stark';             // property 변경
ironman.weapon = 'missile';         // property 추가
delete ironman.isMan;               // property 삭제
console.log('name' in ironman);     // key 값 존재 확인

메소드

/**
 * 메소드
 */
let greetings = {
  sayHello: function(name) {
    console.log(`Hello! ${name}!`);
  },
  sayBye: function() {
    console.log('Bye!');
  }
}
greetings.sayHello('Mark');
greetings['sayHello']('Mark');
let triangle = {
  width: 15,
  height: 40,
  getArea: function() {
    return triangle.width * triangle.height / 2;
  }
}

FOR IN

for (let key in ironman) {
  console.log(key);
}
for (let key in triangle) {
  console.log(key);
}

• key에 접근
• key값이 int일 때는 오름차순으로 접근

DATE

let myDate = new Date();
console.log(myDate);
console.log(new Date());
console.log(new Date(1000));                    // millisec
console.log(new Date('2017-02-10'));
console.log(new Date('2017-02-10T19:11:14'));
console.log(new Date(2018, 4));                 // year, month까지 필수
console.log(new Date(2018, 4, 18, 19, 11, 16)); // 4 -> May
console.log(myDate.getTime());
myDate = new Date(2018, 3, 24, 19, 10, 11);
console.log(myDate.getFullYear());
console.log(myDate.getMonth());             // 0 ~ 11
console.log(myDate.getDate());
console.log(myDate.getDay());               // 0 ~ 6
console.log(myDate.getHours());
console.log(myDate.getMinutes());
console.log(myDate.getSeconds());
myDate.setFullYear(2002);
myDate.setMonth(6);
myDate.setDate(20);
myDate.setHours(11);
myDate.setMinutes(20);
myDate.setSeconds(30);
// 사용자 브라우저에 설정된 국가의 표기에 맞춘 날짜와 시간
myDate = new Date();
console.log(myDate.toLocaleDateString());
console.log(myDate.toLocaleTimeString());
console.log(myDate.toLocaleString());
// 현재 시간 (getTime)
console.log(Date.now());
// 연산 가능
console.log(typeof myDate);
console.log(String(myDate));
console.log(Number(myDate));
console.log(new Date(2017, 4, 19) - new Date(2017,4, 18));  // millisec

• time stamp: 1970.01.01 00:00:00으로부터 얼마나 지났는지(milisecond)

배열

let arr = [1, 2, 3, 4];
console.log(arr[0]);
console.log(typeof(arr));   // type : object
console.log(arr.length);
console.log(arr['length']);
console.log(arr[4]);    // Undefined
arr[4] = 5;   // 추가 -> 중간을 비우고 추가할 수도 있음
console.log(arr[4]);
arr[4] = 6;   // 수정
console.log(arr[4]);
delete arr[4];    // 삭제 -> 완벽한 삭제는 아님 -> empty 존재
console.log(arr);
arr = [[1, 2], [3, 4]];   // 2차원 배열
console.log(arr);

SPLICE

arr.splice(4);
console.log(arr);
arr.splice(1);
console.log(arr);
arr = [1, 2, 3, 4];
arr.splice(1, 2);   // 1번 인덱스부터 2개 삭제
console.log(arr);
arr = [1, 2, 3, 4];
arr.splice(1, 2, 5);    // 1번 인덱스부터 2개 삭제하고 5로 대체
console.log(arr);
arr = [1, 2, 3, 4];
arr.splice(1, 0, 5);    // 원하는 위치에 추가
console.log(arr);
arr = [1, 2, 3, 4];   // 홀수인 것만 삭제
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 1) {
    arr.splice(i, 1);
    i--;
  }
}
console.log(arr);

• splice(start, count, item) 형태
• 완벽한 삭제

SHIFT

arr = [1, 2, 3, 4];
arr.shift();
console.log(arr);

• 배열의 첫 요소를 삭제

POP

arr = [1, 2, 3, 4];
arr.pop();
console.log(arr);

• 배열의 마지막 요소를 삭제

UNSHIFT

arr = [1, 2, 3, 4];
arr.unshift(0);
console.log(arr);

• 첫 요소로 값을 추가

PUSH

arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr);

• 마지막 요소로 값을 추가

INDEXOF, LASTINDEXOF

arr = [1, 2, 3, 4, 3];
console.log(arr.indexOf(3));
console.log(arr.lastIndexOf(3));
console.log(arr.indexOf(5));    // 없으면 -1

• index 리턴

INCLUDES

arr = [1, 2, 3, 4];
console.log(arr.includes(3));
console.log(arr.includes(0));

• 특정 값이 있는지 확인
• true or false 리턴

REVERSE

arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr);

• 배열 뒤집기

FOR OF

arr = [1, 2, 3, 4];
for (let item of arr) {
  console.log(item);
}
for (let s of "abcd") {   // string에도 적용 가능
  console.log(s);
}

• 요소 자체에 접근(for in 과의 차이)
• 파이썬에서의 for item in lst 느낌

지수 및 진수 표기법

console.log(25e5);    // 25 * 10^5
console.log(-6.1e8);    // -6.1 * 10^8
console.log(16e-5);   // 16 * e^(-5)
console.log(0xFF);
console.log(0o377);
console.log(0b11111111);    // 255

• aen 형태 -> a * 10^n
• 0x...(16), 0o...(8), 0b...(2)

toFixed(n)

console.log(0.3591.toFixed(3));   // 0.359
console.log(0.3591.toFixed(5));   // 0.35910
console.log(typeof(0.3591.toFixed(3)));   // string 형태로
console.log(typeof(Number(0.3591.toFixed(3))));   // 형 변환 필요
console.log(typeof(+0.3591.toFixed(3)));   // +로 대체 가능

• 소수점 아래 n자리수까지 표기
• 숫자도 객체로 취급
• 초과하면 0으로 채움
• 주의: 리턴값은 string

toString(n)

let n = 255;
console.log(n.toString(2));
console.log(typeof(n));
console.log(255..toString(2));
console.log((255).toString(2));

• 이름에서 유추할 수 있듯이 문자열로 변환하는 것 외에
• 십진수를 n진법 수의 string 형을 리턴하기도 함

MATH

console.log(Math.abs(-10));   // 10
console.log(Math.max(1, 2, 3));   // 3
console.log(Math.min(1, 2, 3));   // 1
console.log(Math.pow(2, 3));    // 2 ^ 3 = 8
console.log(Math.sqrt(25));   // 제곱 -> 5
console.log(Math.round(2.5));   // 반올림 -> 3
console.log(Math.floor(2.9));   // 버림 -> 2
console.log(Math.ceil(2.1));    // 올림 -> 3
console.log(Math.random());   // 0 ~ 1 중 난수

문자열 관련 메소드

let s = " abcDEfabc  ";
console.log(s.length);
console.log(s[3]);
console.log(s.charAt(3));
console.log(s.indexOf('a'));
console.log(s.indexOf('g'));
console.log(s.lastIndexOf('a'));
console.log(s.indexOf("abc"));    // 1
console.log(s.toLowerCase());
console.log(s.toUpperCase());
console.log(s.trim());
console.log(s.slice(1));
console.log(s.slice(2, 4));

• length
• charAt: index로 접근
• indexOf, lastIndexOf: 없으면 -1
• toUpperCase, toLowerCase
• trim: 공백 제거 (파이썬의 strip 느낌)
• slice(start, end) -> slicing

기본형(Primitive Type)

let x = 1;
let y = x;
console.log(x, y);
y = 2;
console.log(x, y);

• 변수에 값을 저장
• Number, String, Boolean

참조형(Reference Type)

let car_1 = {
  name : 'abc'
}
let car_2 = car_1
console.log(car_1, car_2);
car_2.engine = 'def';
console.log(car_1, car_2);

• 변수에 주소를 저장
• Object, Array

Reference Type Copy

let arr1 = [1, 2, 3];
let arr2 = arr1.slice();    // copy
arr2.push(4);
console.log(arr1, arr2);
let obj1 = {
  name : "Jake"
};
let obj2 = Object.assign({}, obj1);   // copy
obj2.age = 25;
console.log(obj1, obj2);

• Object.assign 이용

1회차: 23/01/28 14:00 ~ 18:00 계획: Javascript 기본 문법 정리 (1) 목적: React 사용을 위함 방향: 기존의 프로그래밍 언어의 개념(e.g. 변수, 함수, 조건문, 반복문 등)이 Javascript에서는 어떻게 사용되는지 코드로 간단하게 확인

결과

Javascript 기본 문법 정리

출력

console.log("Hello");

변수 선언

let a;
let b = 1;
console.log(a);
console.log(b);

• 기본적으로는 let이지만 실전에서는 const를 변수로 많이 사용

함수 선언

function add(a, b) {
  return a + b;
}
console.log(add(1, 2));

비교 연산

console.log(3 === 3);
console.log(3 !== 3);
console.log('abcd' === 'abcd');

AND, OR, NOT

console.log(true && false);
console.log(false || true);
console.log(!true);

typeof 연산자

console.log(typeof 123);
console.log(typeof 1.23);
console.log(typeof "abc");
console.log(typeof true);
console.log(typeof add);
console.log(typeof 1 - 2);
console.log(typeof (1 - 2));

• 우선순위가 높은 연산자

형 변환

console.log(Number('10') + Number('2'));
console.log(String(10) + String(2));
console.log(Number(true));
console.log(Boolean("abc"));
console.log(Boolean(3));
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(NaN));              // 0, '', NaN -> falsy
console.log(Boolean(typeof false));

산술연산자에 대한 형 변환

console.log(4 + '2');      // + -> 문자열 연결을 우선시
console.log(4 + true);
console.log(4 - true);
console.log(4 * false);
console.log(4 / '2');
console.log('4' ** true);
console.log(4 % 'two');    // NaN과의 연산 -> NaN

관계연산자에 대한 형 변환

console.log(2 < '3');
console.log(2 > true);
console.log('2' <= false);
console.log('two' >= 1);    // NaN -> 비교가 불가능할 때 false

비교연산자에 대한 형 변환

console.log(1 === '1');   // === -> 일치 -> type까지 고려
console.log(1 === true);
console.log(1 == '1');    // == -> 동등 -> type 달라도 형 변환 통해 같다면
console.log(1 == true);

템플릿 문자열

let year = 2018;
let month = 3;
let day = 11;
console.log(`생년월일은 ${year}년 ${month}월 ${day}일입니다.`)
let num = 3;
function getTwice(num) {
  return 2 * num;
}
console.log(`${num}의 두 배는 ${getTwice(num)}입니다`);

• ``, ${} 활용

NULL & UNDEFINED

let c;
console.log(c);                   // undefined -> 처음부터 없음
c = null;
console.log(c);                   // null -> 의도적으로 없음
console.log(null == undefined);
console.log(null === undefined);
function square(x) {
  console.log(` 결과는 ${x * x}`);
}
console.log(square(2));           // 함수에 return 문이 없을 때도 undefined

Optional Parameter

function introduce(name, age, nationality='한국') {
  console.log(`제 이름은 ${name}입니다.`);
  console.log(`나이는 ${age}살이고,`);
  console.log(`국적은 ${nationality}입니다.`);
}
introduce("Mark", 24, "미국");
introduce("철수", 25);

• 함수의 parameter 중 맨 뒤에 선언

상수

const PI = 3.14;
// const PI;      error
// PI = 3;        error
const MY_NUMBER = 3;
const f = {
  name : "Jake"
};
f.age = 25;   // 이렇게는 변할 수 있음
console.log(f);
let g = [1, 2, 3];
const h = g;
g.splice(2, 1, 4);    // 이렇게도 변할 수 있음
console.log(h);

• 상수의 변수명은 대문자로 표기
• 실전에서는 const로 변수를 (소문자로) 쓰는 것을 권장

IF

let t = 0;
if (t <= 0) {
  console.log("물이 업니다.");
} else if (t > 100) {
  console.log("물이 끓습니다.");
} else {
  console.log("물이 얼지도 끓지도 없습니다.");
}

• 조건 비교는 === 이용

SWITCH

let choice = 1;
switch (choice) {
  case 1:
    console.log("토끼를 선택한 당신, ...");
    break;
  case 2:
    console.log("고양이를 선택한 당신, ...");
    break;
  case 3:
    console.log("코알라를 선택한 당신, ...");
    break;
  case 4:
    console.log("강아지를 선택한 당신, ...");
    break;
  default:    // else 느낌
    console.log("1~4의 숫자를 선택해주세요.");
}

FOR

for (let i = 0; i < 5; i++) {
  console.log(`${i} abc`);
}

WHILE

let i = 0;
while (i < 5) {
  console.log(`${i} abc`);
  i++;
}

BREAK

i = 1;
while (i < 5) {
  if (i === 3) {
    break;
  }
  console.log(i);
  i++;
}

• 반복문(for, while)을 끝냄

CONTINUE

i = 1;
while (i < 5) {
  if (i === 2) {
    i++;
    continue;
    // console.log(i)    unreachable
  }
  console.log(i);
  i++;
}

• 반복문에서 특정 부분을 건너 뜀

구성원 :

1. 김현수
2. 박광욱
3. 박종경
4. 최원준

목표

Frontend 정복 HTML, CSS, JavaScript 언어를 공부해서 React까지 남는 시간에는 코테 연습

일정

1회차: 23.01.21 13:00 ~ 16:00 목표 : HTML, CSS 공부

2회차: 23.01.28 13:00 ~ 16:00 목표 : JavaScript 공부 (1)

3회차: 23.01.31 13:00 ~ 16:00 목표 : JavaScript 공부 (2)

4회차 : 23.02.03 13:00 ~ 16:00 목표 : React 공부 (1)

5회차: 23.02.07 13:00 ~ 16:00 목표 : React 공부 (2)

6회차: 23.02.10 13:00 ~ 16:00 목표 : 전체 마무리 및 프로젝트 결과물 소개

계획은 진행 상황에 따라 변경될 수 있습니다.

6회차: 8/4 14:00 ~ 17:00 계획: 딥러닝 교재 Chapter6 학습, (시간이 남을 시 파이썬 복습)

결과

6-1. 군집 알고리즘

개념정리

비지도 학습

• 머신러닝의 한 종류로 훈련 데이터에 타깃이 없음
• 타깃이 없으므로 외부 도움 없이 스스로 유용한 무언가를 학습 필요
• e.g. 군집, 차원 축소

히스토그램

• 구간별로 값이 발생한 빈도를 그래프로 표시
• x축: 값의 구간(계급), y축: 발생 빈도(도수)

군집

• 비슷한 샘플끼리 하나의 그룹으로 모으는 대표적인 비지도 학습 작업
• 클러스터: 군집 알고리즘으로 모은 샘플

실습

Practice 6-1

6-2. k-평균

개념정리

k-평균

• 랜덤하게 클러스터 중심을 정하고 클러스터를 만든 후 클러스터 중심을 이동해 다시 클러스터를 만드는 식으로 반복해서 최적의 클러스터를 구성하는 알고리즘

클러스터 중심

• k-평균 알고리즘이 만든 클러스터에 속한 샘플의 특성 평균값
• 센트로이드(centroid)
• 가장 가까운 클러스터 중심을 샘플의 또 다른 특성으로 사용하거나 새로운 샘플에 대한 예측으로 활용 가능

엘보우 방법

• 최적의 클러스터 개수를 정하는 방법
• 이너셔: 클러스터 중심과 샘플 사이 거리의 제곱 합
• 클러스터 개수에 따라 이너셔 감소가 꺾이는 지점이 적절한 클러스터 개수 k가 될 수 있음

패키지 및 함수

skiti-learn 패키지

KMeans

• k-평균 알고리즘 클래스
• n_cluster: 클러스터 개수를 지정, 기본값은 8
• n_init: 이너셔를 기준으로 가장 좋은 결과를 선택하기 위한 반복 횟수, 기본값은 10
• max_iter: k-평균 알고리즘의 한 번 실행에서 최적의 센트로이드를 찾기 위해 반복할 수 있는 최대 횟수, 기본값은 200

실습

Practice 6-2

6-3. 주성분 분석

개념정리

차원 축소

• 원본 데이터의 특성을 적은 수의 새 특성으로 변환하는 비지도 학습의 한 종류
• 공간을 줄이고 시각화 하기 쉬움
• 알고리즘의 성능을 높일 수 있음

주성분 분석

• 차원 축소 알고리즘의 하나로 데이터에서 가장 분산이 큰 방향(주성분)을 찾는 방법
• 원본 데이터를 주성분에 투영해 새로운 특성을 만들 수 있음
• 일반적으로 주성분은 원본 데이터에 있는 특성 개수보다 작음

설명된 분산

• 주성분 분석에서 주성분이 얼마나 원본 데이터의 분산을 잘 나타내는지 기록한 것
• 사이킷런의 PCA 클래스는 주성분 개수나 설명된 분산의 비율을 지정해 주성분 분석을 수행

패키지 및 함수

skiti-learn 패키지

PCA

• 주성분 분석을 수행하는 클래스
• n_components: 주성분의 개수를 저장, 기본값은 None으로 샘플 개수와 특성 개수 중에 작은 것의 값을 사용
• random_state: 넘파이 난수 시드 값을 지정
• components_: 훈련 세트에서 찾은 주성분이 저장됨
• explained_variance_: 설명된 분산이 저장됨
• explained_variance_ratio_: 설명된 분산의 비율이 저장됨
• inverse_transform(): transform() 메서드로 차원을 축소시킨 데이터를 다시 원본 차원으로 복원

실습

Practice 6-3

5회차: 8/3 14:00 ~ 17:00 계획: 딥러닝 교재 Chapter5 학습, (시간이 남을 시 파이썬 복습)

결과

5-1. 결정 트리

개념정리

결정 트리

• '예/아니오'에 대한 질문을 이어나가면서 정답을 찾아 학습하는 알고리즘
• 비교적 예측 과정을 이해하기 쉽고 성능도 뛰어남

불순도

• 결정 트리가 최적의 질문을 찾기 위한 기준
• 사이킷런에는 지니 불순도와 엔트로피 불순도가 있음

정보 이득

• 부모 노드와 자식 노드의 불순도 차이
• 결정 트리 알고리즘은 정보 이득이 최대화되도록 학습

가지치기

• 결정 트리가 제한 없이 성장해 훈련 세트에 과대적합되는 것을 막기 위해 결정 트리의 성장을 제한하는 방법

특성 중요도

• 결정 트리에 사용된 특성이 불순도를 감소하는데 기여한 정도를 나타내는 값

패키지 및 함수

pandas 패키지

info()

• 데이터프레임의 요약된 정보를 출력
• 인덱스와 컬러 타입을 출력하고 null이 아닌 값의 개수, 메모리 사용량을 제공
• verbose 매개변수의 기본값 True를 False로 바꾸면 각 열에 대한 정보를 출력하지 않음

describe()

• 데이터프레임 열의 통계 값을 제공
• 수치형일 경우 최소, 최대, 평균, 표준편차와 사분위값 등이 출력됨
• 문자열 같은 객체 타입의 열은 가장 자주 등장하는 값과 횟수 등이 출력됨
• percentiles 매개변수에서 백분위수를 지정, 기본값은 [0.25, 0.5, 0.75]

scikit-learn 패키지

DecisionTreeClassifier

• 결정 트리 분류 클래스
• criterion: 불순도를 지정, 기본값은 'gini'(지니 불순도), 'entropy'(엔트로피 불순도) 사용 가능
• splitter: 노드를 분할하는 전략을 선택, 기본값은 'best'로 정보 이득이 최대가 되도록 분할, 'random'이면 임의로 노드를 분할
• max_depth: 트리가 성장할 최대 깊이를 지정, 기본값은 None으로 리프 노드가 순수하거나 min_samples_split보다 샘플 개수가 적을 때까지 성장
• min_samples_split: 노드를 나누기 위한 최소 샘플 개수, 기본값은 2
• max_features: 최적의 분할을 위해 탐색할 특성의 개수를 지정, 기본값은 None으로 모든 특성을 사용

plot_tree()

• 결정 트리 모델을 시각화, 첫 매개변수로 결정 트리 모델 객체를 전달
• max_depth: 나타낼 트리의 깊이를 지정, 기본값은 None으로 모든 노드를 출력
• feature_names: 특성의 이름을 지정
• filled: True로 지정하면 타깃값에 따라 노드 안에 색을 채움

실습

Practice 5-1

5-2. 교차 검증과 그리드 서치

개념정리

검증 세트

• 하이퍼파라미터 튜닝을 위해 모델을 평가할 때 테스트 세트를 사용하지 않기 위해 훈련 세트에서 다시 떼어 낸 데이터 세트

교차 검증

• 훈련 세트를 여러 폴드로 나눈 다음 한 폴드가 검증 세트의 역할을 하고 나머지 폴드에서는 모델을 훈련해서 모든 폴드에 대해 검증 점수를 얻어 평균하는 방법

그리드 서치

• 하이퍼파라미터 탐색을 자동화해 주는 도구
• 탐색할 매개변수를 나열하면 교차 검증을 수행해 가장 좋은 점수의 매개변수 조합을 선택
• 마지막으로 매개변수 조합으로 최종 모델을 훈련

랜덤 서치

• 연속된 매개변수 값을 탐색할 때 유용
• 탐색할 값을 직접 나열하는 것이 아니고 탐색 값을 샘플링할 수 있는 확률 분포 객체를 전달
• 지정된 횟수만큼 샘플링해 교차 검증을 수행하므로 시스템 자원이 허락하는 만큼 탐색량을 조절 가능

패키지 및 함수

skiti-learn 패키지

cross_validate()

• 교차 검증을 수행하는 함수
• 첫 매개변수에 교차 검증을 수행할 모델 객체를 전달
• 두 번째 매개변수에는 특성, 세 번째 매개변수에는 타깃 데이터를 전달
• scoring 매개변수에 검증에 사용할 평가 지표를 지정 가능, 분류 모델은 정확도를 의미하는 'accuracy', 회귀 모델은 결정계수를 의미하는 'r2'
• cv 매개변수에 교차 검증 폴드 수나 스플리터 객체를 지정 가능, 기본값은 5, 회귀일 때는 KFold 클래스를 사용하고 분류일 때는 StratifiedKFold 클래스를 사용해 5-폴드 교차 검증을 수행
• n_jobs: 교차 검증을 수행할 때 사용할 CPU 코어 수를 지정, 기본값은 1로 하나의 코어 사용, -1로 지정하면 시스템에 있는 모든 코어를 사용
• return_train_score: Tru로 지정하면 훈련 세트의 점수도 반환, 기본값은 False

GridSearchCV

• 교차 검증으로 하이퍼파라미터 탐색을 수행
• 최상의 모델을 찾은 후 훈련 세트 전체를 사용해 최종 모델을 훈련
• 첫 번째 매개변수로 그리드 서치를 수행할 모델 객체를 전달
• 두 번째 매개변수에는 탐색할 모델의 매개변수와 값을 전달
• 나머지 매개변수는 cross_validate() 함수와 동일

RandomizedSearchCV

• 교차 검증으로 랜덤한 하이퍼파라미터 탐색을 수행, 최상의 모델을 찾은 후 훈련 세트 전체를 사용해 최종 모델을 훈련
• 첫 번째 매개변수로 그리드 서치를 수행할 모델 객체를 전달
• 두 번째 매개변수에는 탐색할 모델의 매개변수와 확률 분포 객체를 전달
• 나머지 매개변수는 cross_validate() 함수와 동일

실습

Practice 5-2

5-3. 트리의 앙상블

개념정리

앙상블 학습

• 더 좋은 예측 결과를 만들기 위해 여러 개의 모델을 훈련하는 머신러닝 알고리즘

랜덤 포레스트

• 대표적인 결정 트리 기반의 앙상블 학습법
• 부트스트랩 샘플을 사용하고 랜덤하게 일부 특성을 선택해 트리를 만듦

엑스트라 트리

• 랜덤 포레스트와 비슷하게 결정 트리를 사용해 앙상블 모델을 만들지만 부트스트랩 샘플을 사용하지 않음
• 대신 랜덤하게 노드를 분할해 과대적합을 감소시킴

그레이디언트 부스팅

• 랜덤 포레스트나 엑스트라 트리와 달리 결정 트리를 연속적으로 추가해 손실 함수를 최소화하는 앙상블 방법
• 훈련 속도가 느리지만 더 좋은 성능을 기대 가능

히스토그램 기반 그레이디언트 부스팅

• 그레이디언트 부스팅의 속도를 개선하여 안정적인 결과와 높은 성능을 도출

패키지 및 함수

skiti-learn 패키지

RandomForestClassifier

• 랜덤 포레스트 분류 클래스
• n_estimators: 앙상블을 구성할 트리의 개수를 지정, 기본값은 100
• criterion: 불순도를 지정, 기본값은 'gini'(지니 불순도), 'entropy'(엔트로피 불순도) 선택 가능
• max_depth: 트리가 성장할 최대 깊이, 기본값은 None으로 리프 노드가 순수하거나 min_samples_split보다 샘플 개수가 적을 때까지 성장
• min_samples_split: 노드를 나누기 위한 최소 샘플 개수, 기본값은 2
• max_features: 최적의 분할을 위해 탐색할 특성의 개수를 지정, 기본값은 'auto'로 특성 개수의 제곱근
• bootstrap: 부트스트랩 샘플을 사용할지 지정, 기본값은 True
• oob_score: OOB 샘플을 사용해 훈련한 모델을 평가할지 지정, 기본값은 False
• n_jobs: 병렬 실행에 사용할 CPU 코어 수를 지정, 기본값은 1로 하나의 코어를 사용, -1이면 시스템에 있는 모든 코어를 사용

ExtraTreesClassifier

• 엑스트라 트리 분류 클래스
• bootstrap: 부트스트랩 샘플을 사용할지 지정, 기본값은 False
• 나머지 매개변수는 RandomForestClassifier와 동일

GradientBoostingClassifier

• 그레이디언트 부스팅 분류 클래스
• loss 매개변수는 손실 함수를 지정, 기본값은 로지스틱 손실 함수를 의미하는 'deviance'
• learning_rate: 트리가 앙상블에 기여하는 정도를 조절, 기본값은 0.1
• subsmaple: 사용할 훈련 세트의 샘플 비율을 지정, 기본값은 1.0
• max_depth: 개별 회귀 트리의 최대 깊이, 기본값은 3

HistGradientBoostingClassifier

• 히스토그램 기반 그레이디언트 부스팅 분류 클래스
• learning_rate: 학습률(감쇠율), 기본값은 0.1이며 1.0이면 감쇠가 전혀 없음
• max_iter: 부스팅 단계를 수행하는 트리의 개수, 기본값은 100
• max_bins: 입력 데이터를 나눌 구간의 개수, 기본값은 255(최댓값), 여기에 1개의 구간이 누락된 값을 위해 추가됨

실습

Practice 5-3

4회차: 7/27 14:00 ~ 17:00 계획: 딥러닝 교재 Chapter4 학습, (시간이 남을 시 파이썬 복습)

결과

4-1. 로지스틱 회귀

개념정리

로지스틱 회귀

• 선형 방정식을 사용한 분류 알고리즘
• 시그모이드 함수나 소프트맥스 함수를 사용하여 클래스 확률을 출력

다중 분류

• 타깃 클래스가 2개 이상인 분류 문제
• 로지스틱 회귀는 다중 분류를 위해 소프트맥스 함수를 사용해 클래스를 예측

시그모이드 함수

• 선형 방정식의 출력을 0과 1 사이의 값으로 압축해 이진 분류를 위해 사용

소프트맥스 함수

• 다중 분류에서 여러 선형 방정식의 출력 결과를 정규화해 합이 1이 되도록 만듦

패키지 및 함수

skiti-learn 패키지

LogisticRegression

• 로지스틱 회귀를 위한 클래스
• solver 매개변수에서 사용할 알고리즘을 선택, 기본 값은 '1bfgs', 'sag'(확률적 평균 경사 하강법) 및 'saga'('sag' 개선 버전) 존재
• penalty 매개변수에서 규제 방식을 선택, L1 규제(라쏘 방식) 및 L2 규제(릿지 방식) 존재, 기본값은 L2 규제를 의미하는 'l2'
• C 매개변수에서 규제의 강도를 제어, 기본값이 1.0, 값이 작을수록 규제가 강해짐

predict_proba()

• 예측 확률을 반환
• 이진 분류 경우에는 샘플마다 음성 클래스와 양성 클래스에 대한 확률을 반환
• 다중 분류 경우에는 샘플마다 모든 클래스에 대한 확률을 반환

decision_function()

• 모델이 학습한 선형 방정식의 출력을 반환
• 이진 분류 경우에는 클래스의 확률이 0보다 크면 양성 클래스, 작거나 같으면 음성 클래스로 예측
• 다중 분류 경우에는 각 클래스마다 선형 방정식을 계산, 가장 큰 값의 클래스가 예측 클래스가 됨

실습

Practice 4-1

3-2. 확률적 경사 하강법

개념정리

확률적 경사 하강법

• 훈련 세트에서 샘플 하나씩 꺼내 손실 함수의 경사를 따라 최적의 모델을 찾는 알고리즘
• 샘플을 하나씩 사용하지 않고 여러 개를 사용하면 미니배치 경사 하강법이 됨
• 한 번에 전체 샘플을 사용하면 배치 경사 하강법이 됨

손실 함수

• 확률적 경사 하강법이 최적화할 대상
• 이진 분류에는 로지스틱 회귀 손실 함수를 사용
• 다중 분류에는 크로스엔트로피 손실 함수를 사용
• 회귀 문제에는 평균 제곱 오차 손실 함수를 사용

에포크

• 확률적 경사 하강법에서 전체 샘플을 모두 사용하는 한 번 반복
• 일반적으로 경사 하강법 알고리즘은 수십에서 수백 번의 에포크를 반복

패키지 및 함수

skiti-learn 패키지

SGDClassifier

• 확률적 경사 하강법을 사용한 분류 모델을 만듦
• loss 매개변수는 확률적 경사 하강법으로 최적화할 손실 함수를 지정, 기본 값은 서포트 벡터 머신을 위한 'hinge' 손실 함수, 로지스틱 회귀를 위해선 'log'로 지정
• penalty 매개변수에서 규제의 종류를 지정, 이는 LogisticRegression에서와 같은 방법, 규제 강도는 alpha 매개변수에서 지정하며 기본값은 0.0001
• max_iter 매개변수는 에포크 횟수를 지정, 기본값은 1000
• tol 매개변수는 반복을 멈출 조건, n_iter_no_change 매개변수에서 지정한 에포크 동안 손실이 tol만큼 줄어들지 않으면 알고리즘이 중단됨, tol 매개변수의 기본값은 0.001이고 n_iter_no_change 매개변수의 기본값은 5

SGDRegressor

• 확률적 경사 하강법을 사용한 회귀 모델을 만듦
• loss 매개변수에서 손실 함수를 지정, 기본값은 제곱 오차를 나타내는 'squared_loss'
• SGDClassifier와 매개변수가 같음

실습

Practice 4-2

3회차: 7/20 14:00 ~ 17:00 계획: 딥러닝 교재 Chapter3 학습, (시간이 남을 시 파이썬 복습)

결과

3-1. k-최근접 이웃 회귀

개념정리

회귀

• 임의의 수치를 예측하는 문제
• 타깃값도 임의의 수치가 됨

k-최근접 이웃 회귀

• k-최근접 알고리즘을 사용해 회귀 문제를 품
• 가장 가까운 이웃 샘플을 차ㅡㅈ고 이 샘플들의 타깃값을 평균하여 예측으로 삼음

결정계수($R^2$)

• 회귀 문제의 성능 측정 도구
• 1에 가까울수록 좋고, 0에 가깝다면 성능이 나쁨

과대적합

• 모델의 훈련 세트 성능이 테스트 세트 성능보다 훨씬 높을 때 발생
• 모델이 훈련 세트에 너무 집착홰서 데이터에 내재된 거시적인 패턴을 감지하지 못 함

과소적합

• 훈련 세트와 테스트 세트 성능이 모두 동일하게 낮거나 테스트 세트 성능이 오히려 더 높을 때 발생
• 더 복잡한 모델을 사용해 훈련 세트에 잘 맞는 모델을 만들어야 함

패키지 및 함수

skiti-learn 패키지

KNeighborsRegressor

• k-최근접 이웃 회귀 모델을 만드는 사이킷런 클래스
• n_neighbors 매개변수로 이웃의 개수를 지정, 기본값은 5
• 다른 매개변수는 kNeighborsClassifier 클래스와 거의 동일

mean_absolute_error()

• 회귀 모델의 평균 절댓값 오차를 계산
• 첫 번째 매개변수는 타깃, 두 번째는 예측값을 전달

mean_squared_error()

• 타깃과 예측을 뺀 값을 제곱한 다음 전체 샘플에 대해 평균한 값을 반환

실습

Practice 3-1

3-2. 선형 회귀

개념정리

선형 회귀

• 특성과 타깃 사이의 관계를 가장 잘 나타내는 선형 방정식을 찾음
• 특성이 하나라면 직선 방정식이 됨
• 선형 회귀에서 찾은 특성과 타깃 사이의 관계는 선형 방정식의 계수 또는 가중치에 저장됨
• 머신 러닝에서 가중치는 방정식의 기울기와 절편을 모두 의미하는 경우가 많음

모델 파라미터

• 선형 회귀가 찾은 가중치처럼 머신러닝 모델이 특성에서 학습한 파라미터

다항 회귀

• 다항식을 사용해 특성과 타깃 사이의 관계를 나타냄
• 함수가 비선형일 수 있지만 여전히 선형 회귀로 표현 가능

패키지 및 함수

skiti-learn 패키지

Linear Regression

• 사이킷런의 선형 회귀 클래스
• fit_intercept 매개변수를 False로 지정하면 절편을 학습하지 않음, 기본값은 True
• 학습된 모델의 coef_ 속성은 특성에 대한 계수를 포함한 배열, 배열의 크기는 특성의 개수와 같음
• intercept_ 속성에는 절편이 저장되어 있음

실습

Practice 3-2

3-3. 특성 공학과 규제

개념정리

다중 회귀

• 여러 개의 특성을 사용하는 회귀 모델
• 특성이 많으면 선형 모델은 강력한 성능을 발휘

특성 공학

• 주어진 특성을 조합해 새로운 특성을 만드는 일련의 작업 과정

릿지

• 규제가 있는 선형 회귀 모델
• 선형 모델의 계수를 작게 만들어 과대적합을 완화
• 효과가 좋아 널리 사용되는 규제 방법

라쏘

• 또 다른 규제가 있는 선형 회귀 모델
• 릿지와 달리 계수 값을 아예 0으로 만들 수도 있음

하이퍼파라미터

• 머신러닝 알고리즘이 학습하지 않는 파라미터
• 사람이 사전에 지정해야 함
• e.g. 릿지와 라쏘의 규제 강도 alpha 파라미터

패키지 및 함수

pandas 패키지

read_csv()

• CSV 파일을 로컬 컴퓨터나 인터넷에서 읽어 판다스 데이터프레임으로 변환하는 함수
• 매개변수: sep(CSV 파일의 구분자를 지정, 기본값 ','), header(데이터프레임의 열 이름으로 사용할 CSV 파일의 행 번호를 지정, 기본적으로 첫 번째 행을 열 이름으로 사용), skiprows(파일에서 읽기 전에 건너뛸 행의 개수를 지정), nrows(파일에서 읽을 행의 개수를 지정)

skiti-learn 패키지

PolynomialFeatures

• 주어진 특성을 조합해 새로운 특성을 만듦
• degree는 최고 차수를 지정하며, 기본값은 2
• interaction_only가 True이면 거듭제곱의 항은 제외되고 특성 간의 곱셈 항만 추가됨, 기본값은 False
• include_bias가 False이면 절편을 위한 특성을 추가하지 않음, 기본값은 True

Ridge

• 규제가 있는 회귀 알고리즘인 릿지 회귀 모델을 훈련
• alpha 매개변수로 규제의 강도를 조절, 값이 클수록 규제가 세짐, 기본값은 1
• solver 매개변수에 최적의 모델을 찾기 위한 방법을 지정 가능
• 기본값은 'auto'이며 데이터에 따라 자동으로 선택됨
• 'sag' 및 'saga'는 확률적 평균 경사 하강법 알고리즘으로 특성과 샘플 수가 많을 때 유용
• random_state는 solver가 'sag'나 'saga'일 때 넘파이 난수 시드값을 지정 가능

Lasso

• 규제가 있는 회귀 알고리즘인 라쏘 회귀 모델을 훈련
• 좌표 하강법(좌표축을 따라 최적화를 수행)을 사용
• alpha와 random_state 매개변수는 Ridge 클래스와 동일
• max_iter는 알고리즘의 수행 반복 횟수를 지정, 기본값은 1000

실습

Practice 3-3