ji-yeong.log

패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online. 챌린지 참여 후기

Tue, 08 Dec 2020 03:46:44 GMT

11월 29일, 패스트 캠퍼스에서 진행하였던 10월 100% 환급 챌린지 데일리 미션이 끝났다. 이제 최종 미션을 위해 이 글을 작성한다.

나는 프론트엔드 개발 올인원 패키지 with React Online. 강의를 통해 미션을 진행하였고,

그동안 커리큘럼 상 HTML & CSS 첫걸음 / 개요 파트 부터 CSS / 속성 - 전환 & 변환 초반 까지 들었다.

사실은 한달 간 모든 강의를 완강하고 싶었지만.. 아쉽게도 그렇게 하진 못하였다. 시간도 없고 점점 나태해졌기 때문이다 (ㅠㅠ)

그래도 한달 간 이 강의를 들으면서 또는 이 챌린지를 하게 됨으로써 얻게 된 장점을 여기에다가 적어보려 한다.

강의 소개

먼저 강의 소개를 하려고 한다.

강의의 구조를 요약하면 위 캡쳐 사진처럼 되어있다.

확실히 올인원 이라고 할 만큼 9개나 되는 강의 주제가 있었다.

여기서 나에게 필요한 것은 HTML/CSS, SASS, JavaScript, TypeScript, React, Webpack 이었다.

Git/Github는 이미 알고 있고, UX는 상세 커리큘럼을 보니 Vue.js 를 사용 해서 나중에 여유있을 때 듣는게 낫겠다는 생각이 들었다.

장점

HTML, CSS에 대해 심도있게 알게 되었다.

사실 3~4개의 HTML, CSS 파일을 작성해본 경험이 있어, HTML, CSS 정도야 적당히 알고 있으면 될 거란 오만한 생각을 했었다.

그러나 실제 강의를 들어보니 내가 몰랐던 태그와 선택자, 주의사항 등이 정말 많았었다.

이런 점을 꼼꼼하게 강사님께서 설명해 주셔서 좀 더 HTML, CSS에 가까이 다가가게 된 계기가 된 것 같다.

부지런 해졌다.

의지박약의 대명사를 하나 말한다면 내 이름을 말할 수 있을것이다...

그러나 이번 챌린지를 도전하면서 무조건 (제세공과금 22% 제외하고) 돈 다받아야지...받아야지... 하는 마음으로 하루에 강의 3클립씩 꾸준하게 듣고 필기하고 블로그에 28일 동안 기록하였다.

살면서 이렇게 꾸준하게 무언가를 한 경험이 있었나.. 왠지 자신감이 생기는 좋은 기회였다.

앞으로도 이런 기회를 적극 활용하여 부지런함을 계속 이어가야 겠다.

강의 퀄리티가 괜찮다.

사실 강사가 4분이셔서 강의 주제마다 중구난방이면 어쩌지 싶었다.

나는 HTML/CSS 파트 말고도 JavaScript, React 부분을 블로그에 기술하지 않고 따로 공부하였는데, 물론 목소리와 강의 스타일은 다르셨지만 크게 위화감이 느껴지지는 않았다.

오히려 강의 스타일이 각각 다르셔서 뭔가 더 지루하지 않게 학습한 유인이 된 거 같다.

언제 어디서든 노트북과 패드만 있으면 들을 수 있다.

온라인 강의의 특성이므로 다 똑같겠지만, 패스트 캠퍼트는 모바일 브라우저 환경에서도 잘 돌아간다.

덕분에 아이패드에는 강의를 틀어놓고, 노트북으로는 코딩하면서 들을 수 있다. 집안 곳곳에서 이 두개를 들고 다니며 강의를 들었다.

어디서든 들을 수 있다는 장점은 정말 큰 장점인거 같다.

앞으로 할일

1월 중순까지 남은 강의 완강하기

이건 몰랐던 사실이지만, 프론트엔드 개발 올인원 패키지 with React Online. 에는 유료 수강기간이 90일 주어진다.

이 이후에는 어떻게 될지는 경험을 안해봐서 모르겠지만;;

왠지 이 기간을 넘기면 안될 거 같다.

내가 강의를 결제한 시기는 10월 중순, 즉 1월 중순까지 남은 강의를 다 들어야 문제가 생기지 않을 거 같다.. 열심히 달려야겠다는 생각이 든다.

심화 강의 찾아보기

프론트엔드 개발 올인원 패키지 with React Online. 는 아무래도 강의 주제가 많다보니 기초적인 주제가 많은 것 같다.

완강하고 난 후에는 필요에 따라 각 주제에 맞는 심화된 강의나 서적을 찾아서 더 배우는 것도 중요할 것 같다.

글을 마치며

이번 챌린지는 나에게도 큰 의미가 된 거 같다.

뭔가 나도 할수 있구나..! 라는 인식을 심어준거 같아서 좋은 경험이 된 거 같다.

이것을 토대로, 앞으로도 꾸준히 공부하고 새로운 것을 배우는 자세를 들여야겠다.

마지막으로 강의 링크를 남기고 이 후기를 마치려고 한다.

프론트엔드 개발 올인원 패키지 with React Online.

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 28회차 미션

Sun, 29 Nov 2020 12:50:38 GMT

background-size

배경 이미지의 크기를 설정
속성 값
- auto : 배경 이미지가 원래의 크기로 표시됨 (기본값)
- 단위
  - px, em, % 등 단위로 지정
  - width height 형태로 입력 가능 (120px 320px)
  - width만 입력하면 비율에 맞게 지정됨 (120px)
- cover
  - 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐
  - 이미지가 잘릴 수 있음
- contain
  - 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐
  - 이미지가 잘리지 않음

div {
    background-size: 120px 320px;
}

div {
    background-size: 120px;
}

div {
    background-size: cover;
}

div {
    background-size: contain;
}

전환 & 변환

transitions

CSS 속성의 전환 효과를 지정
CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 처리함
속성 값
- transition-property : 전환 효과를 사용할 속성 이름
  - 기본값 : all
- transition-duration : 전환 효과의 지속시간 설정
  - 기본값 : 0s
- transition-timing-function : 타이밍 함수 지정
  - 기본값 : ease
- transition-delay : 전환 효과의 대기시간 설정
  - 기본값 : 0s

transition-property

전환 효과를 사용할 속성 이름을 설정
속성 값
- all : 모든 속성에 적용 (기본값)
- 속성이름 : 전환할 속성을 선택

transition-duration

전환 효과의 지속시간을 설정
속성 값
- 시간 : 전환 효과가 지속되는 시간
  - 기본값 : 0s (ms 단위도 가능)

div {
    width: 100px;
    height: 100px;
    background: tomato;
    transition-property: width, background;
    transition-duration: 1s;

    /* 단축 속성도 가능 */
    transition: width 1s, background 1s;
}

div:hover {
    width: 300px;
    background: blue;
}

transition-timing-function

타이밍 함수 (애니메이션 전환 효과를 계산하는 방법) 지정
속성 값
- ease : 빠르게 - 느리게 (기본값)
  - Cubic Bezier 값 : cubic-bezier(.25, .1, .25, 1)
- linear : 일정하게
  - Cubic Bezier 값 : cubic-bezier(0, 0, 1, 1)
- ease-in : 느리게 - 빠르게
  - Cubic Bezier 값 : cubic-bezier(.42, 0, 1, 1)
- ease-in-out : 느리게 - 빠르게 - 느리게
  - cubic-bezier(0, 0, .58, 1)
- cubic-bezier(n, n, n, n) : 자신만의 값을 정의 (0 ~ 1)
- steps(n) : n번 분할된 애니메이션

easing function

div {
    transition-timing-function: linear;

    /* 단축 속성도 가능 */
    transition: 1s linear;
}

transition-delay

전환 효과가 몇 초 뒤에 시작할지 대기시간을 설정
속성 값
- 시간 : 전환 효과의 대기시간을 설정
  - 기본값 : 0s

div {
    transition-delay: 2s;

    /* 단축 속성도 가능 */
    transition: 2s 2s /* 뒤에가 delay */
}

transform

요소의 변환 효과(변형)을 지정

transform: 변환함수1 변환함수2 변환함수3...;
transform: 원근법 이동 크기 회전 기울임;

div {
    transform: rotate(20deg) translate(10px, 0);
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 27회차 미션

Sat, 28 Nov 2020 09:13:09 GMT

background-repeat

배경 이미지의 반복을 설정
속성 값
- repeat : 배경 이미지를 수직, 수평으로 반복 (기본값)
- repeat-x : 배경 이미지를 수평으로 반복
- repeat-y : 배경 이미지를 수직으로 반복
- no-repeat : 반복 없음

div {
    background-image: url(/image.jpg);
    background-repeat: no-repeat; /* 반복 수행 X */
}

background-position

배경 이미지의 위치를 설정
속성 값
- % : 왼쪽 상단 모서리는 0%, 0%, 오른쪽 하단 모서리는 100%, 100% (기본값 : 0%, 0%)
- 방향 : 뱡향을 입력하여 위치 설정
  - top, bottom, left, right, center
- 단위 : px, em, cm 등 단위로 지정

사용법

값이 방향일 경우

background-position: 방향1 방향2;
/* 순서를 바꿔도 된다 */
background-position: 방향2 방향1;
/* center 일 경우 한번만 써도 됨 */
background-position: center;

값이 단위 (%, px 등) 일 경우

background-position: x축 y축;

동시에 사용

/* 순서를 바꾸면 안됨 */
background-position: 50px bottom 
background-position: left 50px

background-attachment

요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정
속성 값
- scroll : 배경 이미지가 요소를 따라서 같이 스크롤 됨 (기본값)
- fixed : 배경 이미지가 뷰포트(Viewport)에 고정되여, 요소와 같이 스크롤되지 않음
- local : 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

background-attachment: fixed

background-attachment: local

.container {
    width: 400px;
    height: 500px;
    background-image: url("...");
    background-attachment: local;
}

.for-scroll {
    height: 200px;
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 26회차 미션

Fri, 27 Nov 2020 07:17:35 GMT

배경

background

요소의 배경을 설정
속성 값
- background-color : 배경 색상
  - 기본값 : transparent
- background-image : 하나 이상의 배경 이미지
  - 기본값 : none
- background-repeat : 배경 이미지의 반복
  - 기본값 : repeat
- background-position : 배경 이미지의 위치
  - 기본값 : 0 0
- background-attachment : 배경 이미지의 스크롤 여부 (특성)
  - 기본값 : scroll

사용법

background: 색상 이미지경로 반복 위치 스크롤특성;

/* 색상 이미지경로 반복 위치 스크롤특성 */
.box1 {
    background: red url("../img/image.jpg") no-repeat left top scroll;
}

/* 이미지경로 반복 위치 */
.box2 {
    background: url("../img/image.jpg") no-repeat right 100px;
}

/* 색상 */
.box3 {
    background: red;
}

background-color

요소의 배경 색상을 지정
속성 값
- 색상 : 요소의 배경 색상
- transparent : 투명 (기본값)

div {
    background-color: tomato;
}

/* 단축 속성으로도 사용 가능 */

div {
    background: tomato;
}

background-image

요소의 배경에 하나 이상의 이미지를 삽입
속성 값
- none : 이미지 없음 (기본값)
- url('경로') : 이미지 경로 (URL)

사용법

background-image: url("경로");

.box {
    background-image: url("../img/image.jpg");
    width: 120px;
    height: 80px;
}

배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있음

box1 {
    /* 개별 속성 */
    background-image: url("../image1.jpg"),
        url("../image2.jpg"),
        ulr("..image3.jpg");
}

box2 {
    /* 단축 속성 */
    background: url("../image1.jpg") no-repeat,
        url("../image2.jpg") no-repeat 100px 50px,
        url("../image3.jpg") repeat-x
}

하나 이상의 배경 이미지를 삽입할 경우 , 로 구분, 먼저 작성된 이미지가 더 위에 쌓임

이런 '다중 배경 이미지'는 IE8 이하 버전에서 사용 불가능

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 25회차 미션

Thu, 26 Nov 2020 09:52:07 GMT

fixed

브라우저(뷰 포트) 기준으로 배치
absolute 도 할 수 있으나, 명시적으로 fixed 를 선언해 주는 것이 좋음

div {
    position: fixed;
}

sticky

스크롤 영역 기준으로 배치
top, left, right, bottom 중 하나의 값을 입력해야작동함
IE 지원 불가

div {
    position: sticky;
    top: 0
}

position 특징 - 요소 쌓임 순서 (Stack order)

요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지 (더 위에 쌓이는지)를 결정 (Z축)

static을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)

div1 {
    position: relative;
}

div2 {
    /* position: static; */
}

position 이 모두 존재한다면, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

div1 {
    position: relative;
    z-index: 10
}

div2 {
    position: relative;
    z-index: 9
}

div3 {
    position: relative;
    z-index: 8
}

position 속성의 값이 있고, z-index 속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일수록 위에 쌓임 (나중에 작성한 코드 (요소))

div1 {
    position: relative;
    z-index: 100
}

div2 {
    position: relative;
    z-index: 100
}

div3 {
    position: relative;
    z-index: 100
}

position > z-index > HTML마지막코드

position 특징 - display 수정

absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block 으로 수정됨
- flex, inline-flex 같은 경우, 속성 효과 없음

span {
    display: relative;
    width: 300px;
    height: 300px;
    /* 변화 없음 */
}

span {
    display: absolute;
    width: 300px;
    height: 300px;
    /* 변화 있음, width: 300px, height: 300px */
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 24회차 미션

Wed, 25 Nov 2020 11:26:34 GMT

position

요소의 위치 지정 방법의 유형(기준)을 설정
속성 값
- static : 유형(기준) 없음 / 배치 불가능 (기본값)
- relative : 요소 자신을 기준으로 배치
- absolute : 위치 상 부모 요소를 기준으로 배치
- fixed : 브라우저 (뷰포트) 를 기준으로 배치
- sticky : 스크롤 영역 기준으로 배치

top

요소의 position 기준에 맞는 '위쪽'에서의 거리 (위치)를 설정
auto : 브라우저가 계산 (기본값 : auto)
단위 : px, em, cm 등 단위로 지정 (기본값 0)
% : 부모 (위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정 (음수 값 허용)

bottom

요소의 position 기준에 맞는 '아래쪽' 에서의 거리(위치)를 설정
auto : 브라우저가 계산 (기본값 : auto)
단위 : px, em, cm 등 단위로 지정 (기본값 0)
% : 부모 (위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정 (음수 값 허용)

left

요소의 position 기준에 맞는 '왼쪽' 에서의 거리(위치)를 설정
auto : 브라우저가 계산 (기본값 : auto)
단위 : px, em, cm 등 단위로 지정 (기본값 0)
% : 부모 (위치 상의 부모(조상)) 요소의 가로 너비의 비율로 지정 (음수 값 허용)

right

요소의 position 기준에 맞는 '오른쪽' 에서의 거리(위치)를 설정
auto : 브라우저가 계산 (기본값 : auto)
단위 : px, em, cm 등 단위로 지정 (기본값 0)
% : 부모 (위치 상의 부모(조상)) 요소의 가로 너비의 비율로 지정 (음수 값 허용)

position 속성 값 - relative

요소 자기 자신을 기준으로 배치
- 주변에 있는 형제 요소에 영향을 받으므로 조심해서 사용해야 함
실제로는 원래 있었던 위치에 있으며, 이동한 요소는 홀로그램이라고 생각하면 됨

div {
    position: relative;
    top: 20px; /* 자신의 위치에서 위에서 20px */
    left: 50px; /* 자신의 위치에서 왼쪽에서 50px */
}

position 속성값 - absolute

위치 상 부모 요소를 기준으로 배치
- HTML의 부모요소 (구조 상 부모요소) 와 상관이 없고, 기준이 될 부모요소에 position 속성을 추가해줘야 자식 요소의 absolute가 인식을 하고, 이를 기준으로 움직이게 됨.
- 만약, 기준이 될 부모요소에 position을 정하지 않았다면, body, html 쪽으로 점점 올라가서 window(뷰포트)를 기준으로 삼게 되고, 위치가 화면에서 고정이 된다.
주로 요소를 배치할 때 absolute를 사용하는 것을 권장함.

.parent {
    position: relative /* 꼭 기준을 설정하려면 position을 써야함 (static 제외) */
}

.child {
    position: absolute; /* 공중에 붕 뜬다. */
    top: 50px; /* 부모 요소에서 위쪽에서 50px 배치 */
    left: 50px; /* 부모 요소에서 왼쪽에서 50px 배치*/
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 23회차 미션

Tue, 24 Nov 2020 12:35:37 GMT

띄움(정렬), 위치

float

요소를 자우 방향으로 띄움 (수평 정렬)
속성 값
- none : 요소 띄움 없음 (none)
- left : 왼쪽으로 띄움
- right : 오른쪽으로 띄움

div {
    float: right;
}

요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다.

수평정렬

각 요소에 float 속성이 있으면 차례로 정렬됨
- left 이면 왼쪽부터 (1, 2, 3)
- right 이면 오른쪽부터 (3, 2, 1)
다음 요소부터는 정렬을 해제해주어야 다음 요소와 float 속성의 태그들이 겹치지 않는다!

float 해제

float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이른 방지하기 위해 속성을 해제해야 함

해제 방법

형제 요소에서 해제

float 속성이 추가된 요소의 다음 형제 요소에 clear 추가

div {
    clear: both;
}

문제점 : 다음 형제 요소가 무조건 있어야 함

부모 요소에서 해제 1

float 속성이 추가된 요소의 부모요소에 overflow 속성 추가

부모요소 {
    overflow: hidden or auto;
}

관련 없는 속성을 사용하는 것이므로 편법

부모 요소에서 해제 3 (추천)

float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix 클래스를 추가

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

.child {
    float: left;
}

float 요소가 있는 요소에는 float 요소가 없는 형제요소가 들어오면 안된다.

display 수정

float 속성이 추가된 요소는 display 속성의 값이 대부분 block 으로 수정됨

clear

float 속성이 적용되지 않도록 지정 (해제)
속성 값
- none : 요소 띄움 허용 (기본값)
- left : 왼쪽 띄움 해제
- right: 오른쪽 띄움 해제
- both : 양쪽 띄움 해제

div {
    clear: both;
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 22회차 미션

Mon, 23 Nov 2020 11:13:07 GMT

text-decoration

문자의 장식(line)을 지정 (선에 대한 장식)
속성 값
- none : 선 없음 (기본값)
- underline : 밑줄을 지정
- overline : 윗줄을 지정
- line-through : 중앙 선 (가로지르는) 을 지정

p {
    text-decoration: none
}

p {
    text-decoration: underline
}

p {
    text-decoration: overline
}

p {
    text-decoration: line-through
}

text-indent

(첫번째 줄의) 들여쓰기를 지정
음수 값 사용 가능
- 사용 시 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기) 됨

p {
    text-indent: 50px;
}

p {
    text-indent: -10px;
}

글자를 화면 밖으로 밀어내는 용도로도 쓰인다.
ex ) css background 속성으로 이미지를 넣을 때 대체 텍스트를 넣어야 하는데, 화면에는 보이지 않게 하려는 경우

letter-spacing

문자의 자간(글자 사이 간격) 을 지정
속성 값
- normal : 단어 사이의 일반 가격 (기본값, 0과 같음, 폰트마다 다를 수 있다.)
- 단위 : px, em, cm 등 단위로 지정

p {
    letter-spacing: 0; /* 변하지 않는다 */
}

p {
    letter-spacing: 10px; /* 변한다 */
}

p {
    letter-spacing: -10px /* 글자 간격 사이가 줄어든다 */
}

word-spacing

단어 사이 (띄어쓰기) 의 간격을 지정
속성 값
- normal : 단어 사이의 일반 간격 (기본값, 0과 같음, 폰트마다 다름)
- 단위 : px, em, cm 등 단위로 지정

p {
    word-spacing: 0; /* 변하지 않는다 */
}

p {
    word-spacing: 30px; /* 변한다 */
}

p {
    word-spacing: -10px; /* 단어 간격이 좁아진다 */
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 21회차 미션

Sun, 22 Nov 2020 11:28:38 GMT

font-size

글자의 크기를 지정
속성 값
- 단위 : px, em, cm 등 단위로 지정 (기본값 : 16px)
- % : 부모(상위) 요소의 비율로 지정
- 이외 ...

p {
    font-size: 35px;
}

line-height

줄 높이 (간격)을 지정
속성 값
- normal : 브라우저의 기본 정의를 사용(1~1.4) (기본값)
- 숫자 : 요소 자체 글꼴 크기의 배수로 지정
- 단위 : px, em, cm 등 단위로 지정
- % : 요소 자체 글꼴 크기의 비율로 지정

p {
    line-height: 32px;
}

font-family

글꼴 (서체)를 지정
속성 값
- 글꼴이름 : 글꼴 (서체, 후보) ahrfhrdmf wlwjd
- serif, sans-serit, monospace, cursive, fantasy : 글꼴 계열 이름을 지정

font-family : [글꼴 후보, 글꼴 후보...], 글꼴 계열;

.box {
    font-family: Arial, "open Sans", "돋움", dotum, sans-serif;
}

글꼴 계열은 필수로 입력해야 함

글꼴 계열

serif : 바탕체 계열
sans-serif : 고딕체 개열
monospace : 고정너비(가로폭이 동등한) 글꼴 계열
cursive : 필기체 계열
fantasy : 장식(재미있는 문자 표현을 포함하는) 글꼴 계열

문자(Text) 관련 속성

color

문자의 색상을 지정
속성 값
- 색상 : 문자의 색상을 지정
  - 기본값 : rgb(0, 0, 0)

색상 표현

색상 이름 : 브라우저에서 제공하는 색상의 이름 (red, blue)
Hex 색상코드 : 16진수 색상 (#000000)
RGB : 빛의 삼원색 (rgb(255, 255, 255))
RGBA : 빛의 삼원색, 투명도 (rgba(255, 0, 0, .5))
HSL : 색상, 채도, 명도
HSLA : 색상, 채도, 명도, 투명도 (hsla(120, 100%, 50%, .3))

text-align

문자 정렬 방식을 지정
속성 값
- left: 왼쪽 정렬
- right: 오른쪽 정렬
- center : 가운데 정렬
- justify: 양쪽 맞춤 (2줄 이상)

p {
    text-align: center;
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션

Sat, 21 Nov 2020 10:48:25 GMT

overflow

요소의 크기 이상으로 내용 (자식요소)이 넘쳤을 때, 내용의 보여짐을 제어
속성 값
- visible : 넘친 부분을 자르지 않고, 그래도 보여줌 (기본값)
- hidden : 넘친 부분을 잘라내고, 보이지 않도록 함
- scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 (무조건 스크롤바를 생성)
- auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함

div {
    overflow: hidden;
}

opacity

요소의 투명도를 지정
속성 값
- 숫자 : 0 부터 1 사이의 소수점 숫자
  - 기본값 : 1
사용법

opacity: 투명도;

div {
    opacity: 0.5; /* 50% */
}

div {
    opacity: 1; /* 100% */
}

div {
    opacity: .75; /* 75% */
}

글꼴, 문자

font

글자 관련 속성들을 지정
속성 값
- font-style : 글자 기울기 지정
  - 기본값 : normal
- font-weight : 글짜 두께 지정
  - 기본값 : normal
- font-size : 글자 크기 지정
  - 기본값 : medium (16px)
- line-height : 줄 높이 지정 (normal)
- font-family : 글꼴 (서체) 지정

사용법

font: 기울기 두께 크기 / 줄높이 글꼴;

.box {
    font: italic bold 20px / 1.5 "Arial", sans-serif;
}

단축 속성을 사용하려면 font-size 와 font-family는 필수로 입력해야 함

font-style

글자 스타일 (기울기) 지정
속성 값
- normal : 스타일 없음 (기본값)
- italic : 이텔릭체 (활자)
- oblique : 기울어진 글자

p {
    font-style: italic;
}

font-weight

글자의 두께 (가중치)를 지정
속성 값
- normal : 기본 글자 두께, 400과 동일 (기본값)
- bold: 글자 두껍게, 700과 동일
- border : 부모 (상위) 요소보다 더 두껍게 (bold 보다 두껍다는 개념 X)
- lighter : 부모 (상위) 요소보다 더 얇게
- 숫자 : 100 ~ 900 까지의 100 단위의 숫자 9개

p {
    font-weight: 100;
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 19회차 미션

Fri, 20 Nov 2020 13:56:01 GMT

`border`

요소의 '테두리 선'을 지정
속성 값
- border-width : 선의 두께 (넓이)
  - 기본값 : medium
- border-style : 선의 종류
  - 기본값 : none
- border-color : 선의 색상
  - 기본값 : black

`border-width`

선의 두께(너비)를 지정
속성 값
- medium : 중간 두께 (기본값)
- thin : 얇은 두께
- thick : 두꺼운 두께
- 단위 : px, em,cm 등 단위로 지정

border-width: 위 우 아래 좌;
border-width: 위 [좌, 우] 아래;
border-width: [위, 아래] [좌 우];
border-width: [위 아래 좌 우];

`border-style`

속성 값
- none : 선 없음 (기본 값)
- hidden : 선 없음과 동일 (table 요소에서만 사용)
- solid : 실선 (일반 선)
- dotted : 점선
- dashed : 파선
- double : 두 줄선
- groove : 홈이 파여있는 모양 (선)
- ridge : 솟은 모양 (선, groove의 반대)
- inset : 요소 전체가 들어간 모양 (선)
- outset : 요소 전체가 나온 모양 (선)

border-style: 위 우 아래 좌;
border-style: 위 [좌, 우] 아래;
border-style: [위, 아래] [좌 우];
border-style: [위 아래 좌 우];

`border-color`

선의 색상을 지정
속성 값
- 색상 : 선의 색상을 지정
  - 기본값 : black
- transparent : 투명한 선 (요소의 배경색이 보임)

`box-sizing`

요소의 크기 계산 기준을 지정
속성 값
- content-box : 너비만으로 요소의 크기를 계산 (기본값)
- border-box : 너비에 안쪽 여백과 테두리선을 포함하여 요소의 크기를 계산

`display`

요소의 박스 타입 (유형)을 설정
속성 값
- block : 블록 요소
- inline : 인라인 요소
- inline-block : 인라인 블록 요소
- 기타 : table, table-cell, flex 등
- none : 요소의 박스 타입 X (요소가 사라짐)

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션

Thu, 19 Nov 2020 07:49:24 GMT

`margin`

요소의 '외부 (바깥) 여백' 을 지정
음수 값 사용 가능
속성 값
- 단위 : px, em, cm 등 단위로 지정
- 기본값 : 0
- auto : 브라우저가 너비를 계산
- % : 부모 요소의 너비(width)에 대한 비율로 지정

.parent {
    width: 400px;
    height: 200px;
}

.child {
    width: 100px;
    height: 100px;
    margin: 50% /* 200px margin */
}

사용법

margin : 위 우 아래 좌;
margin : 위 [좌, 우] 아래;
margin : [위, 아래] [좌, 우];
margin: [위, 아래, 좌, 우]

.box {
    margin: 10px 20px 30px 40px;
    margin: 10px 20px 40px;
    margin: 10px 40px;
    margin: 10px;
}

margin-top

요소의 '외부(바깥) 위쪽 여백' 을 지정

margin-right

요소의 '외부(바깥) 오른쪽 여백' 을 지정

margin-bottom

요소의 '외부(바깥) 밑쪽 여백' 을 지정

margin-left

요소의 '외부(바깥) 왼쪽 여백' 을 지정

마진 중복 (병합, Collapse)

마진의 특정 값들이 '중복' 되어 합쳐지는 현상

형제 요소들의 margin-top과 margin-bottom이 만났을 때
부모 요소의 margin-top과 자식 요소의 margin-bottom이 만났을 때
부모 요소의 margin-bottom과 자식 요소의 margin-top이 만났을 때

오류가 아니므로 현상을 우회하거나 응용할 수 있다.

.parent {

}

.child {
    width: 100px;
    height: 100px;
    margin: 20px; /* 마진 중복 - 세로로 쌓일 때 아래위 여백은 겹침 */
}

.parent {
    width: 300px;
    height: 200px;
}

.child {
    width: 100px;
    height: 100px;
    margin-top: 50px; /* 마진 중복 - 부모 요소와 자식요소가 같이 움직임 */
}

마진 중복 계산법

둘 다 양수
- 더 큰 값으로 중복
- ex ) A margin 30px, B margin 10px; => 30px;
둘 다 음수
- 더 작은 값으로 중복
- ex ) A margin -30px, B margin -10px; => -30px;
각각 양수와 음수
- 음수 - 양수
- ex ) A margin -30px, B margin 10px; => -20px;

`padding`

요소의 '내부 (안) 여백'을 지정
속성 값
- 단위 : px, em, cm 등 단위로 지정
- 기본값 : 0
- % : 부모 요소의 너비에 대한 비율로 지정

사용법

padding : 위 우 아래 좌;
padding : 위 [좌, 우] 아래;
padding : [위, 아래] [좌, 우];
padding: [위, 아래, 좌, 우]

.box {
    padding: 10px 20px 30px 40px;
    padding: 10px 20px 40px;
    padding: 10px 40px;
    padding: 10px;
}

padding-top

요소의 '내부(안) 위 여백' 을 지정

padding-right

요소의 '내부(안) 오른쪽 여백' 을 지정

padding-bottom

요소의 '내부(안) 밑 여백' 을 지정

padding-left

요소의 '내부(안) 왼쪽 여백' 을 지정

크기 증가

추가된 padding 값만큼 요소의 크기가 커지는 현상


    Hello World!

div {
    width: 100px; /* 140px */
    height: 100px; /* 140px */
    padding: 20px;
}

크기가 커지지 않도록 직접 계산

/* 100 x 100 (px) 크기의 요소 만들기 */
.box {
    width: 60px; /* 40px */
    height: 80px; /* 80px */
    background: red;
    padding: 10px 20px;
}

크기가 커지지 않도록 자동 계산

/* 100 x 100 (px) 크기의 요소 만들기 */
.box {
    width: 100px; 
    height: 100px; 
    background: red;
    padding: 10px 20px;
    box-sizing: border-box; /* 자동 계산 */
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 17회차 미션

Wed, 18 Nov 2020 08:44:33 GMT

vw (view width), vh (view height)

백분율 (%)

.container {
    width: 50vw;
    height: 50vh;
    background: red;
}

vmin, vmax

vmax : 더 긴 뷰포트 넒이를 단위로 사용
vmin : 더 짧은 뷰포트 넓이를 단위로 사용

.container {
    width: 50vmax;
    height: 300px;
    background: red;
}

박스 모델

`width`

요소의 너비를 지정
속성 값
- 값 : auto
  - 의미 : 브라우저가 너비를 계산
- 기본값 : auto (block : 100% / inline : 0px)
- 단위 : px, em, cm 등 단위로 지정

`height`

요소의 높이를 지정
속성 값
- 값 : auto
  - 의미 : 브라우저가 너비를 계산
- 기본값 : auto (block : 0px / inline : 0px)
- 단위 : px, em, cm 등 단위로 지정

div {
    width: auto; /* 100% */
    height: auto; /* 0 */
    background: tomato;
}

span {
    width: auto; /* 0 */
    height: auto; /* 0 */
}

`max-width`

요소의 최대 가로너비를 지정
속성 값
- 단위 : px, em, % 등 단위로 지정
- 기본값 : none

`min-width`

요소의 최소 가로너비를 지정
속성 값
- 단위 : px, em, % 등 단위로 지정
- 기본값 : 0

`max-height`

요소의 최대 세로너비를 지정
속성 값
- 단위 : px, em, % 등 단위로 지정
- 기본값 : none

`min-height`

요소의 최소 세로너비를 지정
속성 값
- 단위 : px, em, % 등 단위로 지정
- 기본값 : none

.parent {
    width: 200px;
    heigth: 200px;
}

.child {
    min-width: 400px; /* 400px 이하로 줄지 않는다 */
    max-width: 600px; /* 600px 이상으로 늘어나지 않는다 */
    height: 100px
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 16회차 미션

Tue, 17 Nov 2020 10:49:34 GMT

우선순위


    Hello World!

div {
    color: red !important /* important */
}

#color_yellow {
    color: yellow; /* 아이디 선택자 */
}

.color_green {
    color: green; /* 클래스 선택자 */
}

div {
    color: blue; /* 태그 선택자 */
}

* {
    color: darkblue; /* 전체 선택자 */
}

body {
    color: violet; /* 상속 */
}

우선순위 결정

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

명시도 점수가 높은 선언이 우선 (명시도)
점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선 (선언 순서)
명시도는 '상속' 규칙보다 우선 (중요도)
important! 가 적용된 선언 방식이 다른 모든 방식보다 중요 (중요도)

1. 가장 중요 (`important!`)

모든 선언을 무시하고 가장 우선
점수 : 무한 pt

div {
    color: red !important;
}

2. 인라인 선언 방식

인라인 선언 (HTML style 속성 사용)
점수: 1000pt


    Hello World!

3. 아이디 (ID Selector)

아이디 선택자
점수: 100 pt

#container {
    color: red;
}

4. 클래스 (Class Selector)

클래스 선택자
점수: 10 pt

.container {
    color: red;
}

5. 태그 (Tag Selector)

태그 선택자
점수 : 1 pt

span {
    color: red;
}

6. 전체 (Universal Selector)

전체 선택자
점수 : 0 pt

* {
    color: red;
}

7. 상속(CSS Inheritance)

상속 받은 속성은 항상 우선하지 않음
점수: 계산하지 않음

body {
    color: red;
}

단위

px

고정된 단위, 사이즈
가장 넓게 사용됨

.container {
    width: 300px;
}

%

부모 요소의 영향을 받는 단위

.parent {
    width: 600px;
}

.child {
    width: 50%; /* 300px */
}

em

현재 자기 자신의 폰트 사이즈에 영향을 받음

.container {
    width: 60em; /* 600px */
    font-size: 10px
}

rem (root em)

html에 지정되어 있는 폰트 사이즈에 영향을 받음

html {
    font-size: 10px;
}

.container {
    width: 20rem; /* 200px */
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 15회차 미션

Mon, 16 Nov 2020 12:41:11 GMT

속성 선택자 (Attribute Selectors)

[attr]

특정한 속성을 포함한 요소 선택

[disabled] {
    color: red;
}

[attr=value]

속성 attr 을 포함하여 속성값이 value인 값을 선택

[type=password] {
    color: red;
}

[attr^=value]

속성 attr 을 포함하며 속성 값이 value 로 시작하는 요소 선택

[class^="btn-"] {
    color: red;
}

[attr$=value]

속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택

[class$="success"] {    
    color: red;
}

상속 (Inheritance)

.ecosystem {
    color: red
}

상속되는 속성들 (properties)

font
- font-size
- font-weight
- font-style
- fonr-family

color
text-align
text-indent
text-decoration
letter-spacing
opacity

등등...

강제 상속

.parent {
    position: absolute;
}
.child {
    position: inherit; /* 강제 상속 받아 absolute와 동일 */
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 14회차 미션

Sun, 15 Nov 2020 02:04:31 GMT

nth-of-type

태그 이름과 동일한 타입인 형제 요소 중 태그이름과 n 번째 요소라면 선택
n 키워드 사용 시 0 부터 해석 (Zero-base)

/* fruits 태그의 자식 요소 중 첫 번째 p 태그 */
.fruits p:nth-of-type(1) {
    color: red;
}


    딸기
    사과
 
    망고
    오렌지

부정 선택자 (Negation Selector)

.fruits li:not(.strawbarry) {
    color: red;
}


    오렌지
 
    딸기
    망고
 
    사과

가상 요소 선택자 (Pseudo-Elements Selectors)

before

특정 요소 내부의 앞에 내용(content)를 삽입
주의 : content 속성을 꼭 작성해야 함

ul > li::before {
    content: "숫자";
}



    숫자1
    숫자2
    숫자3
    숫자4
    숫자5
    숫자6

이미지도 삽입 가능

x ul > li::before {    
    content: url(images/logo);
}

after

특정 요소 내부의 뒤에 내용(content)를 삽입

x ul > li::after {    
    content: "숫자";
}



    1숫자
    2숫자
    3숫자
    4숫자
    5숫자
    6숫자

이미지도 삽입 가능

x ul > li::after {    
    content: url(images/logo);
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션

Sat, 14 Nov 2020 03:20:49 GMT

first-child

E가 (같은 부모를 공유하는) 형제 요소 중 첫 번째 요소라면 선택

.fruits li:first-child {
    color: red;
}


    딸기
 
    사과
    오렌지

last-child

형제 요소 중 마지막을 선택

.fruits li:last-child {
    color: red;
}


    딸기 
    사과
    오렌지

nth-child

형제 요소 중 n번째 요소라면 선택(n 키워드 사용 시 0부터 해석(Zero-base))

.fruits li:nth-child(2){   
    color: red;
}


    딸기 
    사과
 
    오렌지

짝수 번째 요소만 선택

.fruits li:nth-child(2n){   
    color: red;
}


    딸기 
    사과
 
    오렌지
    망고

3번째 요소부터 이후 요소들을 선택

.fruits li:nth-child(n+3){   
    color: red;
}


    딸기 
    사과
 
    오렌지
 
    망고

주의사항

.fruits의 첫번째 자식 요소가
태그가 아니기 때문에 선택되지 않음

.fruits p:nth-child(1) {
    color: red;
}



    딸기
    사과
    망고
    오렌지

.fruits의 모든 하위 요소의
를 찾음

.fruits div:nth-child(1)


    딸기
 
    바나나
        사과

.fruits < div:nth-child(1)


    딸기
 
    바나나
        사과

.fruits < :nth-child(1)


    딸기
 
    바나나
        사과 
    
    포도

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션

Thu, 12 Nov 2020 23:48:01 GMT

CSS

기본문법

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

선택자(Selector)의 역할

속성과 값을 지정할 대상을 검색

HELLO
 
HELLO

div {
    color: red;
}

속성(Property)과 값(Value)의 역할

검색된 대상에 지정될 CSS 명령 세트

HELLO

div {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

`/* Comment */`

문서 내 수정사항이나 설명 등을 작성 (주석)

header {
    color: #FF0000; /* Color red */
}

CSS 기본 선언 방식

인라인(in-line) 방식

HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식
사용 빈도를 떠나서, 직접 입력하는 방식은 피해야 함

HELLO

내장(embedded) 방식

HTML




    HELLO

링크(link) 방식

HTML 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식

/* common.css */
div {
    color: red;
}

@import 방식

CSS @import 를 이용하여 외부 문서를 불러와 CSS를 적용하는 방식
직렬 호출 방식 (1번 css 파일 -> 2번 css 파일 ...)

/* common1.css */
@import url('./common2.css')

/* common2.css */
div {
    color: red;
}

기본 선택자 (Selector)

1. 전체 선택자 (Universal Selector)

요소 내부의 모든 요소를 선택

* {
    color: red;
}



    
        사과
        딸기
    
    과일 이름들

2. 태그 선택자 (Type Selector)

태그 이름이 E 인 요소 선택

li {
    color: red;
}

3. 클래스 선택자 (Class Selector)

HTML class="E" 요소 선택

.apple {
    color: red;
}

4. 아이디 선택자 (ID Selector)

HTML id="E" 요소 선택

#apple {
    color: red;
}

복합 선택자

일치 선택자 (Basic Combinator)

선택자들을 붙여 정의하면 선택자 둘을 동시에 만족하는 HTML 요소를 찾음

span.apple {
    color: red;
}

자식 선택자 (Child Combinator)

E의 자식 요소 F 를 선택

ul > .apple {      /* ul 태그 안 apple 클래스 요소 찾기 */
    color: red;
}

후손(하위) 선택자(Descendant Combinator)

E의 후손(하위) 요소 F를 선택
'띄어쓰기'가 선택자의 기호로 사용

div .apple {    /* div 태그를 찾아서 후손인 apple 클래스를 찾아주세요 */
    color: red
}

인접 형제 선택자 (Adjacent Sibling Combinator)

E의 다음 (next) 형제 요소 F 하나만 선택

.apple + li {
    color: red;
}

일반 형제 선택자 (General Sibling Combinator)

E의 다음 (next) 형제 요소 F 모두 선택

.apple ~ li {
    color: red;
}

가상클래스 선택자(Pseudo-Classes selectors)

HOVER

E 에 마우스(포인터)가 올라가 있는 동안에만 E를 선택

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  transition: 0.4s;
}

.box:hover {
  width: 200px;
}

ACTIVE

E를 마우스로 클릭하는 동안에만 E 선택

.box {
  width: 100px;
  height: 100px;
  background: tomato;
}

.box:active {
  width: 200px;
  background: yellowgreen;
}

FOCUS

E가 포커스 된 동안에만 E 선택
대화형 콘텐츠에서만 사용 가능

input {
  width: 100px;
  outline: none;
  border: 1px solid lightgray;
  padding: 5px 10px;
}

input:focus {
  border-color: red;
  width: 200px;
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션

Thu, 12 Nov 2020 00:23:49 GMT

`style`

요소에 적용할 CSS를 선언


    안녕하세요

`title`

요소의 정보(설명)을 지정
마우스 hover 시 요소의 내용이 나타남


    제목

`lang`

요소의 언어를 지정


    이 단락은 한글입니다.

`data-*`

사용자 정의 데이터 속성을 지정
JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용

Seo

const $me = document.getElementById('me');
console.log($me.dataset.myName); // Seo
console.log($me.dataset.myAge); // 23

`draggable`

요소가 Drag and Drop API 를 사용 가능한지 여부를 지정
기본값 : auto (브라우저가 판단하게 둠)

드래그 앤 드롭 가능

`hidden`

요소를 숨길 때 사용


    숨겨진 태그

`tabindex`

Tab 키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정
기본값 : 0
값의 순서에 따라 tabindex가 적용
BUT 1 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용 추천 X
tablndex="-1" 이면 Tab 포커스에서 제외 (클릭 포커스는 가능)
대화형 콘텐츠 (, 등) 는 기본적으로 코드 순서대로 탭 순서가 지정
비대화형 콘텐츠는 tabindex="0" 을 넣어 사용 가능

기타

절대 경로와 상대 경로

상대 경로

특정한 명령이 발생된 곳(파일 위치)에서 찾음
상대적으로 경로가 달라질 수 있기 때문에 상대 경로
./ : 현재 폴더에서 탐색 (생략 가능)
../ : 상위 폴더에서 탐색

절대 경로

경로가 달라지지 않기 때문에 절대 경로
http (https) : 도메인 주소
/ (//) : 도메인 주소 생략

주석 (Comment)

단축키 : ctrl + /


GOOGLE

특수기호 (Entities)

Hello     World!

HTML Entity List

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션

Wed, 11 Nov 2020 10:03:07 GMT

: 선택 메뉴 (드롭 다운)

: 선택가능한 옵션을 그룹화

: 선택가능한 옵션

: 자동 완성 기능

) 나 자동완성 () 에서 사용될 옵션
선택적 빈 태그로 사용 가능

속성

`disabled` : 옵션을 비활성화 (Boolean)

`label` : 표시될 옵션의 제목 (생략 시 태그 안 Text가 적용됨)

`value` : 양식으로 제출될 값 (생략 시 태그 안 Text가 적용됨)

`selected` : 옵션이 선택되었음을 표시 (Boolean)

`display: "block";`

에 미리 정의된 옵션을 지정하여 자동완성 기능을 제공하는 데 사용
의 list 속성과 의 id 속성으로 연결
을 포함하여 정의된 옵션을 지정

작업의 완료 진행률을 표시 (로딩 바)
속성
- max : 작업의 총량 (Number)
- value : 작업의 진행량 (Number) (max 생략 시, 0~1 사이 값이어야 함, 보통 자바스크립트를 넣음)

전역 속성 (Globar Attributes)

모든 HTML 요소에서 공통적으로 사용 가능한 속성

`class`

공백으로 구분된, 요소의 별칭을 지정
css 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근

`id`

문서에서 고유한 식별자(idenifier, ID) 를 정의
css 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근
값 중복 불가능

...

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM