[패스트캠퍼스] react 강의 학습일지 - 3주차

React&Redux로 시작하는 웹프로그래밍_3주차

HTML/CSS/JS로 만드는 스타벅스 웹사이트

1_JavaScript 

개요

• 표기법
• [HTML, CSS에서 사용] dash-case(kebab-case) 예: the-brown-fox
• [HTML, CSS에서 사용] snake_case 예: the_brown_fox
• [JS 에서 많이 사용] camelCase 예: theBrownFox
• [JS 에서 사용] PascalCase 예: TheBrownFox (맨앞도 대문자)

• Zero-based Numbering
• 특수한 경우를 제외하고 0부터 숫자를 시작한다.
• 주석(Comments) 
• 단축키: Ctrl+/

// 한 줄 메모

/* 한 줄 메모

/** 

* 여러 줄 메모

* 주르륵

*/

 

데이터종류 

• 데이터 타입
• String (문자 데이터)
• 따옴표를 사용
• 예: let myName = "Jenny"; ("" 대괄호 또는 ''소괄호)
• let hello = `Hello ${myName}?!` (보관법) 
• console.log(hello); // Hello Jenny?!

• Number (숫자 데이터)
• 정수 및 부동소수점 숫자를 나타냅니다.
• 예: let number = 123; //정수
• 예: let opacity = 1.57; //부동소수점
• Boolean (불린 데이터)
• //true, false 두 가지 값밖에 없는 논리 데이터
• 예: let checked = true; //참
• 예: let isShow = false; //거짓
• Undefined
• //값이 할당되지 않은 상태
• let undef;
• let obj = { abc: 123 }; //객체데이터라고 함. abc는 속성, 123은 값
• console.log(undef); //undefined
• console.log(obj.abc); //123
• console.log(obj.xyz) //undefined
• Null
• //어떤 값이 의도적으로 비어있음을 의미
• let empty = null;
• console.log(empty); //null
• Object (객체 데이터)
• //여러 데이터를 Key:Value 형태로 저장합니다. { }
• let user = {
•   // Key: Value,
•   name: 'Jenny',
•   age: 20,
•   isValid: true
• };
• console.log(user.name); //Jenny
• console.log(user.age); //20
• console.log(user.isValid); //true
• Array (배열 데이터)
• //여러 데이터를 순차적으로 저장 [ ]
• let fruits = ['Apple', 'Banana', 'Cherry'];
• console.log(fruits[0]); //'Apple'
• console.log(fruits[1]); //'Banana'
• console.log(fruits[2]); //'Cherry'

변수, 예약어

• 변수
• 데이터를 저장하고 참조(사용)하는 데이터의 이름
• var(잘 안씀), let, const
• 재사용이 가능
• 변수 선언
• 값(데이터)의 재할당 가능 : 변수 let
• 값(데이터)의 재할당 불가 : 변수 const (재할당시, TypeError가 뜸)
• 예약어 (Reserved Word)
• 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

함수 (function)

• 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) 
• 함수 선언
• function helloFunc() { //실행코드 console.log(1234);}
• 함수 호출
• helloFunc(); //1234
• 반환
• return을 사용해서 함수 밖으로 값을 내보내라. 
• function returnFunc() { return 123; }
• let a = returnFunc();
• console.log(a); //123
• 
  
  

조건문 

• 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 if, else

DOM API

Documnet Object Model,  (도큐멘트=Html, 오브젝트모델= Div, span, input)

Application programming interface (웹사이트가 동작하도록하는 프로그래밍 언어, 명령들)

자바스크립트에서 HTML을 제어하는 명령들

메소드 체이닝 

BEM (block element modifier)

- HTML클래스 속성의 작명법

방법1. 요소__일부분 : underscore(lodash)기호로 요소의 일부분을 표시 

방법2. 요소--상태 : Hyphen(Dash)기호로 요소의 상태를 표시

#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의

[패스트캠퍼스] react 강의 학습일지 - 2주차

 

React&Redux로 시작하는 웹프로그래밍_2주차

HTML/CSS/JS로 만드는 스타벅스 웹사이트

CSS 속성 (Properties)

• 속성에는 기본값, 즉 요소에 이미 들어가 있는 속성의 값이 있다.
• 개요
• 박스모델
• HTML요소는 기본적으로 가로, 세로넓이를 갖고있는 사각형임
• 박스모델은 HTML요소 하나의 박스의 모양을 제어하는 속성들
• 글꼴, 문자
• 특정한 글꼴/크기/두께 등..을 제어하는 속성
• 배경
• 요소의 배경에 배경색/배경을 삽입하는 속성
• 배치
• 특정 요소를 원하는 위치에 배치하는 속성
• 플렉스(정렬)
• 기본적으로 요소들은 위아래로 수직으로 쌓이지만 수평정렬을 할때 사용
• 전환
• 요소의 전상태와 후상태 중간을 애니메이션 처리해주는 속성
• 변환
• 요소를 회전하거나 이동시키거나 크기를 조절해주는, 요소의 2D또는 3D변화를 주는 속성
• 띄움
• 요소를 공중으로 띄운다. (예: 박스주변으로 문자가 흐르게 하는 구조)
• 애니메이션
• 요소에 전환보다 복잡한 효과를 줄때 사용
• 그리드
• 엑셀처럼 행과 열을 갖은 2차원의 레이아웃을 만들때 사용
• 다단
• 문서작업을 할때 하나의 페이지에서 문단을 여러개로 나눌때 사용
• 필터
• 다양한 필터를 제공함. (예: 이미지 블러처리, 흑백효과, 이미지 색상 반전 등)
• 너비(width, height)
• 기본값 auto / 단위 / none 등이 있는데, auto란 브라우저가 너비를 계산해서 출력하는 값이고, 단위란 px, em, vw등 단위로 지정하는 값이다.
• [width, height] 요소의 가로/세로 너비 (기본값: auto)
• 예: <span> 대표적인 인라인 요소로, 포함한 콘텐츠 크기만큼 자동으로 가로,세로 너비가 줄어듦, 인라인 요소는 글자를 제어하는 요소이기 때문에 가로,세로 너비를 100px로 주어도 변화가 없음!
• 예: <div> 대표적인 블록 요소로, width 너비는 부모 요소의 크기만큼 자동으로 늘어나지만, height는 포함한 콘텐츠 크기만큼 자동으로 줄어듦
• [max-width, max-height] 요소가 커질 수 있는 최대 가로/세로 너비 (기본값: none)
• [min-width, min-height] 요소가 작아질 수 있는 최대 가로/세로 너비 (기본값: 0)
• CSS 단위
• [px] 픽셀/ 화면에 출력하는 하나의 점, 절대 단위 (디바이스와 화면의 확대/축소에 따라 달라져 상대적일 수도 있음)
• [%] 상대적 백분율 (특정한 기준의 요소에 대해 백분율로 나타냄) 
• [em] 요소의 글꼴 크기 = 1em (즉, 글꼴이 10px이면 1em = 10px) 상대적
• [rem] 루트 요소, 최상위 요소(html)의 글꼴 크기 (16px)
• [vw] 뷰포트 가로 너비의 백분율 (예: 1vw란, 뷰포트의 1/100 크기라는 뜻, 50vw는 뷰포트의 절반을 사용해라)
• [vh] 뷰포트 세로 너비의 백분율
• 외부 여백(margin)
• 요소의 외부 여백(공간)을 지정하는 단축 속성 (기본값: 0, auto, 단위)
• 0은 외부 여백 없음
• auto는 브라우저가 여백을 계산함. 가/세로 너비가 있는 요소의 가운데 정렬에 활용
• % (사용빈도 적음) 부모 요소의 가로 너비에 대한 비율로 지정
• 값을 지정할수 있으며, 기본값은 0이고 음수를 사용 가능
• 단축속성
• margin-top
• margin-right
• margin-bottom
• margin-left
• 예: margin: 0; (top, right, bottom, left)
• 예: margin: 10px 20px; (10px: top, bottom / 20px: left, right)
• 예: margin: 10px 20px 30px; (10px: top / 20px: left, right / 30px: bottom)
• 예: margin: 10px 20px 30px 40px; (10px: top / 20px: right / 30px: bottom, 40px: left)
• 내부 여백(padding)
• 요소의 내부 여백(공간)을 지정하는 단축 속성 ( 기본값: 0, 단위, %)
• 특징: 요소의 자체 크기가 커짐
• 0: 내부 여백없음
• %: 부모 요소의 가로 너비에 대한 비율로 지정
• 테두리 선(border)과
• 요소의 테두리 선을 지정하는 단축 속성
• 예: border: 4px solid black; (검은색 실선 4px 두께의 선이 들어감)
• 특징: 요소의 자체 크기가 커짐
• 기본값: border: medium none black 
• border-width(선-두께): 요소 테두리 선의 두께 (기본값: medium) 단위 px, em, %등 단위로 지정하는것을 권장
• border-width는 단축 속성
• boder-style(선-종류): 요소 테두리 선의 종류 (기본값: none 선의 종류가 없어서 출력되지 않음), none, solid, dashed 를 많이 사용
• border-color(선-색상): 요소 테두리 선의 색상을 지정하는 단축 속성 (기본값: black) black, 색상, transparent 가 많이 쓰임
• 요소 테두리 선을 지정하는 기타 속성들
• border-방향
• border-방향-속성
• border-top: 두께 종류 색상;
• border-top-width: 두께;
• border-top-style: 종류;
• border-top-color: 색상;
• border-right 
• ...
• 색상 표현
• CSS 전체에서 사용 가능한 개념
• 색을 사용하는 모든 속성에 적용 가능한 색상 표현 방법
• 색상이름: 브라우저에서 제공하는 색상 이름 (권장하지않음)
• 예: red, tomato, royalblue
• Hex 색상코드: 16진수 색상 (Hexadecimal colors) (권장) 
• 예: #000, #FFFFFF
• RGB: 색의 삼원색
• 예: rgb(255, 255, 255)
• RGBA: 색의 삼원색+투명도
• 예: rgba(0, 0, 0, 0.5)
• 투명도: 0~1 사이에 소수점값 입력 (0: 투명, 1: 불투명)
• 모서리 둥글게(border-radius)
• 요소의 모서리를 반지름사이즈만큼 둥글게 깎음 (기본값: 0, 단위)
• 기본값 0은 둥글게 없음
• 특정한 모서리만 깎을 수 있음
• 예: border-radius: 0 10px 0 0; (1 2 3 4 시계 방향, 1은 왼쪽상단)
• 크기 계산(box-sizing)
• 요소의 크기 계산 기준을 지정 (기본값: content-box)
• content-box: 요소의 내용(content)으로 크기 계산
• border-box: 요소의 내용+padding+border로 크기 계산
• 요소의 크기를 키우는 속성(예: padding, border)들로 인한 크기변화가 없게 만들어주는 속성
• 넘침 제어(overflow)
• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여지는 것을 제어하는 단축 속성
• 기본적으로 부모에 overflow를 명시함.
• [visible] (기본값) 넘친 내용을 그대로 보여짐
• [hidden] 넘친 영역을 화면에 보이지 않게 숨겨라
• [auto] 넘친 부분만 스크롤바를 생성해서 보여줘라
• [scroll] 넘치던 안넘치던 스크롤바 (x축/y축 모두) 생성해서 보여줘라
• 요소의 크기 이상으로 내용이 넘쳤을때 보여짐을 제어하는 개별 속성들
• [overflow-x] : x축으로 넘치는 부분만 체크
• [overflow-y] : y축으로 넘치는 부분만 체크
• 출력 특성(display)
• 요소의 화면 출력 즉, 보여짐 특성
• [block] 상자(레이아웃)요소, 각 요소에 이미 지정되어 있는 값
• [lnline] 글자요소, 각 요소에 이미 지정되어 있는 값
• [inline-block] 글자+상자 요소, 각 요소에 이미 지정되어 있는 값
• [flex] 플렉스 박스 (1차원 레이아웃), 따로 지정해서 사용하는 값
• [grid] 그리드 (2차원 레이아웃), 따로 지정해서 사용하는 값
• [none] 보여짐 특성없음, 화면에서 사라짐, 따로 지정해서 사용하는 값
• [기타]: table, table-row, table-cell 등..
• 투명도 (opacity)
• 요소의 투명도를 결정
• [1] (기본값) 불투명 
• [0~1] 0부터 1사이의 소수점 투명도 지정
• 예: opacity: 0.07;
• 글꼴 (font)
•  [font-style] 글자의 기울기
• normal (기본값) 기울기 없음
• italic / oblique 기울어진 글자
• [font-weight] 글자의 두께(가중치)
• normal, 400 기본 두께 (기본 값)
• bold, 700 두껍게
• 100~900 100단위의 숫자9개, normal과 bold이외 두께
• bolder 상위(부모)요소보다 더 두껍게 (잘 안씀)
• lighter 상위(부모)요소보다 더 얇게 (잘 안씀)
• [font-size] 글자의 크기
• 16px 기본 크기
• 단위 px, em, rem등 단위로 지정
• [line-height] 한 줄의 높이, 행간과 유사
• normal 브라우저의 기본 정의를 사용 (기본값)
• [숫자] 요소의 글꼴 크기의 배수로 지정 (예: line-height: 2; // 2배)
• 단위 px, em, rem등의 단위로 지정
• [font-family] 글꼴(서체) 지정
• font-family: 글꼴1, "글꼴2", ... 글꼴계열;
• 띄어쓰기 등 특수 문자가 포함된 글꼴 이름은 큰 따옴표 안에 명시
• 글꼴계열은 필수로 넣어야함.
• 문자
• [color] 글자의 색상
• rgb(0, 0, 0)검정색
• 색상: 기타 지정 가능한 색상
• [text-align] 문자의 정렬 방식
• left, right, center, justify..
• [text-decoration] 문자의 장식(선)
• none, underline, line-through, overline..
• [text-indent] 문자 첫줄의 들여쓰기
• 0(기본값) 들어쓰기 없음
• 단위 px, em, rem등의 단위로 지정
• 배경 (background)
• 배경의 색상이나 이미지 추가할때 사용하는 속성
• [background-color] 요소의 배경색상
• transparent (기본값) 투명함
• 색상
• [background-image] 요소의 배경 이미지 삽입
• none (기본값) 이미지 없음
• url("경로") 이미지 경로
• [background-repeat] 요소의 배경 이미지 반복
• repeat (기본값) 이미지를 수직, 수평으로 반복, 바둑판식
• repeat-x 수평 반복
• repeat-y 수직 반복
• no-repeat 반복 없음
• [background-position] 요소의 배경 이미지 위치
• 방향 top, bottom, left, right, center 방향
• 예: background-position: top right;
• 단위 px, em, rem등 단위로 지정 (x, y축의 값)
• 0% 0% (기본값) 0%~100% 사이값 (중요도 x)
• [background-size] 요소의 배경 이미지 크기
• auto (기본값) 이미지의 실제 크기
• 단위 px, em, rem등 단위로 지정
• cover 비율을 유지, 요소의 더 넓은 너비에 맞춤
• contain 비율을 유지, 요소의 더 짧은 너비에 맞춤
• [background-attachment] 요소의 배경 이미지 스크롤 특성
• scroll (기본값) 이미지가 요소를 따라서 같이 스크롤
• fixed 이미지가 뷰포트에 고정, 스크롤 x
• Parallax (페럴렉스)에 활용
• local 요소 내 스크롤 시 이미지가 같이 스크롤(중요도 x)
• 배치 
• [position] 요소의 위치 지정할때의 기준, 음수 사용 가능
• 요소의 위치를 지정할때는 기준을 먼저 설정해야한다.
• [static] (기본값) 기준 없음 (배치를 할수 없는 상태)
• [relative] 요소 자신을 기준 (기존 위치가 시각적으로만 안보이는것일 뿐 실제 존재하고 있음// 거의 사용되지 않음)
• [absolute] 위치 상 부모 요소를 기준
• 위치상 부[모 요소로 지정한 후 사용해야 요소가 정상적으로 배치가 됨 (코드 position: relative;)
• [fixed] 뷰포트(브라우저)를 기준
• [sticky] 스크롤 영역 기준 (중요도 x)
• 요소의 각 방향별 거리지정 속성: top, bottom, left, right, z-index(쌓인 순서)
• auto (기본값)브라우저가 계산
• 단위 px, em, rem
• 요소 쌓임 순서(statck order)
• 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
• 1. 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외)
• 2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
• 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
• [z-index] 요소 쌓임 순서를 지정
• auto (기본값) 부모 요소와 동일한 쌓임 정도 (0이라고 생각하면됨)
• 숫자 숫자가 높을 수록 위에 쌓임 (음수 -1정도까지 쓸수 있음)
• 요소의 display가 변경됨
• position속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨. 
• 플렉스(정렬) 
• 기본 정렬은 수직 (위->아래)정렬이며, 수평(왼->오)정렬로 변경할때, 부모요소에 display:flex를 사용.
• flex로 지정하면, flex container(부모)과 flex items(자식요소)가 생성된다. 두 요소에 적용하는 속성이 다르다.
• x축: 주축, main-axis, y축: 교차 축, cross-axis
• 플렉스(정렬) Container
• display
• flex container의 화면출력(보여짐)특성
• [flex] 블록요소와 같이 flex container 정의
• 예:display: flex;
• inline-flex 인라인 요소와 같이 flex container 정의
• flex-flow, flex-direction, flex-wrap
• [flex-direction] 주 축(Main-axis)을 설정 (예: 표(table))
• [row] (기본값) 행 축 (좌->우)
• [row-reverse] 행 축 (우->좌)
• [column] 열 축 (위->아래) (중요도x)
• [column-reverse] 열 축 (아래 -> 위) (중요도x)
• [flex-wrap] flex items 묶음(줄 바꿈) 여부
• [nowrap] (기본값) 묶음(줄 바꿈) 없음
• [wrap] 여러줄로 묶음
• [wrap-reverse] wrap의 반대 방향으로 묶음
• justify-content
• 주 축의 정렬 방법/ 수평정렬시
• [flex-start](기본값) flex items를 시작점으로 정렬 (수평정렬시 왼쪽정렬)
• [flex-end] flex items를 끝점으로 정렬 (수평정렬시 오른쪽정렬)
• [center] flex items를 가운데 정렬
• [space-between](중요도x) 각 flex item 사이를 균등하게 정렬
• [space-around](중요도x) 각 flex item의 외부 여백을 균등하게 정렬
• align-content 
• 교차 축의 '여러 줄' 정렬 방법 / 수직정렬시
• 조건: flex-wrap:wrap; 이여야 하고 items가 2줄 이상이여야 하고 정렬이 가능한 여백이 있어야 작동함
• [stretch](기본값) flex items를 시작점으로 정렬
• [flex-start] flex items를 시작점으로 정렬
• [flex-end] flex items를 끝점으로 정렬
• [center] flex items를 가운데 정렬
• [space-between](중요도x) 각 flex item 사이를 균등하게 정렬
• [space-around](중요도x) 각 flex item의 외부 여백을 균등하게 정렬
• align-items (활용도 높음)
• 교차 축의 '한 줄' 정렬 방법
• [stretch](기본값) flex items를 교차 축으로 늘림
• [flex-start] flex items를 시작점으로 정렬
• [flex-end] flex items를 끝점으로 정렬
• [center] flex items를 가운데 정렬
• [baseline] flex items를 각 줄의 문자 기준선에 정렬 (중요도x)
• 플렉스(정렬) Items
• order
• flex item의 순서, 이 순서를 임의로 변경 가능함
• [0] (기본값) 순서 없음
• [숫자] 숫자가 작을 수록 먼저, 음수 가능
• flex, flex-grow, flex-shrink, flex-basis
• [flex-grow]
• flex item의 증가 너비 비율 (빈 공간을 나눠 그 비율로 나눔)
• [0] (기본값) 증가 비율 없음
• [숫자] 증가 비율
• [flex-shrink]
• flex item의 감소 너비 비율
• [1] flex container 너비에 따라 감소 비율 적용
• [숫자] 감소 비율
• [flex-basis] 
• flex item의 공간 배분 전 기본 너비
• [auto](기본값) 요소의 content너비
• [단위] px, em, rem등 단위로 지정
• align-self
• 전환효과
• transition 요소의 전환(시작과 끝)효과를 지정하는 단축속성
• 포멧: transition 속성명 지속시간 타이밍함수 대기시간;
• transition-property 속성명
• 전환 효과를 사용할 속성의 이름을 지정
• [all] (기본값) 모든 속성에 적용
• [속성이름] 전환 효과를 사용할 속성 이름 명시
• transition-duration 지속시간(필수)
• 전환 효과의 지속시간을 지정
• [0s] 전환 효과 없음
• [시간] 지속시간(s)을 지정
• transition-timing-function 타이밍함수
• 전환 효과의 타이밍(Easing)함수를 지정
• Easing functions (Easing 함수 치트시트 , tweenmax easing , Easing functions mdn 검색 또는 웹사이트 참고)
• [ease] (기본값) 느리게-빠르게-느리게 (cubic-bezier(0.25, 0.1, 0.25, 1))
• [linear] 일정하게 (cubic-bezier(0, 0, 1, 1))
• [ease-in] 빠르게-느리게 (cubic-bezier(0.42, 0, 1, 1))
• [ease-out] 느리게-빠르게 (cubic-bezier(0, 0, 0.58, 1))
• [ease-in-out] 느리게-빠르게-느리게 (cubic-bezier(0.42, 0, 0.58, 1))
• [cubic-bezier(n,n,n,n) 자신만의 값을 정의 (0~1) (중요도x)
• steps(n) n번 분할된 애니메이션 (중요도x)
• transition-delay 대기시간;
• 전환 효과가 몇초뒤에 시작할지 대기시간을 지정
• [0s] 대기시간 없음
• [시간] 대기시간(s)을 지정
• 단축속성
• transition: 1s .5s; (1초 지속시간, .5초 대기시간)
• 변환
• transform: 변환함수1 변환함수2 ...;
• transform: 원근법 이동 크기 회전 기울임
• 2D 변환 함수
• 단위: px
• translate(x,y) 이동(x축, y축)
• translateX(x) 이동(x축)
• translateY(y) 이동(y축)
• 단위: 없음
• scale(x,y) 크기(x축, y축)
• scaleX(x) 크기(x축) (중요도x)
• scaleY(y) 크기(y축) (중요도x)
• 단위:deg
• rotate(degree) 회전(각도)
• skew(x,y) 기울임(x축, y축) (중요도x)
• skewX(x) 기울임(x축)
• skewY(y) 기울임(y축)
• matrix(n,n,n,n,n,n) 2차원 변환효과 (중요도x)
• 3D 변환 함수
• 단위: px
• translateZ(z) 이동(z축) (중요도x)
• translate3d(x,y,z) 이동(x축, y축, z축) (중요도x)
• perspective(n) 원근법(거리), 단위 px
• 단위: 없음(배수)
• scaleZ(z) 크기(z축) (중요도x)
• scale3d(x, y, z) 크기(x축, y축, z축) (중요도x)
• 단위:deg
• rotateX(x) 회전(x축)
• rotateY(y) 회전(y축)
• rotateZ(z) 회전(z축) (중요도x)
• rotate3d(x,y,z,a) 회전(x축, y축, z축, 각도) (중요도x)
• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3차원 변환효과 (중요도x) - 실제 브라우저가 쓰는 방법
• 단축속성
• transform: perspective(500px) rotateX(45deg); 원근법 함수는 제일 앞에 작성해야함
• perspective
• 하위 요소를 관찰하는 원근 거리를 지정하는 속성
• 단위: px등 단위로 지정
• perspective 속성과 함수의 차이점
• [속성] perspective:500px; , 관찰 대상의 부모에 적용, 기준점 설정: perspective-origin
• [함수] transform: perspective(500px);, 관찰 대상에 적용, transform-origin
• backface-visibility
• 3D변환으로 회전된 요소의 뒷면 숨김 여부
• [visible] (기본값) 뒷면 보임
• [hidden] 뒷면 숨김
  

#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의

[패스트캠퍼스] react 강의 학습일지 - 1주차

React&Redux로 시작하는 웹프로그래밍_1주차

HTML/CSS/JS로 만드는 스타벅스 웹사이트

1_개요

• HTML,CSS 그리고 JS
• HTML = 구조, CSS = 스타일, JS = 동적부분 담당
• HTML과 CSS는 '레이아웃 중심' 사고 // JS는 '데이터 중심' 사고

• 웹앱의 동작원리
• 웹 표준과 브라우저
• 웹표준 기술(WEB STANDARD) = W3C
• 크로스 브라우징 (CROSS BROWSING) : 다양한 브라우저에서 사용자들에게 동일한 화면과 동작을 줄 수 있도록 제작하는 기술, 방법. 다양한 브라우저들의 다른 웹표준 해석으로 인한 문제점들을 '크로스 브라우징 이슈'라고 함.
• 브라우저의 구조
• 창 > 탭, 주소창, 뷰포트(VIEWPORT)
• 렌더링(RENDERING)이란, 브라우저의 뷰포트에 웹사이트를 출력하는 동작을 뜻함
• 웹에서 사용하는 이미지
• PIXEL / VECTOR
• JPG, GIF, WEBP (하위 호환성을 체크할 것)
• Material-Design (벡터이미지): 고품질 디지털 경험을 구축할 수 있도록 구글에서 만든 디자인 시스템
• 특수 기호

• 오픈소스 라이선스
• 오픈소스도 라이센스(저작권) 체크하기 
• 개인적/상업적 이용가능한 라이센스
• apache license 
• MIT license
• BSD license
• Beer ware

2_VScode

• 설치 및 실행
• Visual Studio Code 설치하기 (IDE 아님!)
• 파일 생성과 삭제
• 프로젝트 (폴더) > 파일
• 폴더(프로젝트) 만들기 : 내컴 원하는 위치에 폴더 생성하기
• 파일명은 소문자로 작성하기
• 한글화
• 정리된 코드 만들기(Beautify)
• 코드를 보기 쉽게 정렬할때 사용하는 플러그인
• 설치
• 바로가기 키 등록하기 
• 커멘드 복사하기 (Feature Contributions > Commands)
• File> Preferences > keyboard shortcuts (or Shift + Ctrl + p > shortcuts)
  
  
  
  
• 단축키 삽입할 커멘드를 더블클릭 (파일없는걸로!) 후 단축키 삽입하기
• 태그 이름을 한 번에 변경(Auto Rename Tag
• 브라우저에 출력(Live Server)
• 단축키 & 공백2로 만들기
• 단축키
  
• 공백 2로 만들기
• 프로젝트 관리
• 프로젝트
• 루트 파일 - index.html
• css 폴더 - main.css
• js 폴더 - main.js
• images 폴더 - logo.png

3_무작정시작하기

• Doctype(DTD)
• <!DOCTYPE html> : 문서의 HTML 버전을 지정하는 테그
• HTML, HEAD, BODY
• <html> : 문서의 전체 범위
• <head> : 문서의 정보를 나타내는 범위
• 웹페이지에 보이지않는 정보(제목, 설명, 파일위치, css 등..)의 테그가 가 담김
• <body> : 문서의 구조를 나타내는 범위
• 웹페이지에 보여지는 구조(헤더, 푸터, 내비, 메뉴, 버튼, 이미지 등..) 를 나타내는 테그가 담김
• CSS,JS 연결하기
• css 연결 코드 : <link rel="stylesheet" href="./main.css">
• js 연결 코드 : <script src="./main.js"></script>
• js 연결확인하기: 크롬에서 F12 (개발자 도구)누른후 console에서 확인하기
• 정보를 의미하는 태그 살펴보기 (<head>안의 태그)
• <title> : HTML문서의 제목 (웹 브라우저 탭에 표시)
• <link> : 외부 문서를 연결할때 사용 (대부분 css파일)
• <style> : html문서에 css를 직접 작성하는 경우
• <script> : 외부에 있는 js파일을 가져올때 또는 js를 html 문서에 직접 작성하는 경우
• <meta> : html문서의 여러 메타 정보(제작자, 키워드 등)를 검색엔진이나 브라우저에 제공
• <meta charset="UTP-8" /> 문자인코딩 방식
• <meta name="viewport" content=".."> viewport는 모바일에만 해당.
• 화면에 이미지 출력하기
• <img src="주소" alt="대체 문자">
• 상태 경로와 절대 경로
• 상대경로 
• 주변 ./ : 생략가능
• 작성하는 파일의 같은 단의 파일들을 갖고올때 사용
• 상위 ../ : 상위폴더
• 작성하는 파일의 상위 단의 파일들을 갖고올때 사용
• 절대경로
• http (https) : 원격
• / (//) : 최상위 경로(root)
• 개발서버 (라이브 서버 플러그인)
• http://localhost:5500
• 페이지를 나누고 연결(링크)하기
• 라우터 기능 (추후 공부할 예정)
• 모든 파일 공백 크기 설정
• VS code 환경설정 변경하기
• Setting
• 개발자 도구 사용하기
• 크롬 -> F12
• Codepen.io
• 코드를 테스트 할 때 유용한 웹사이트
• 브라우저 스타일 초기화
• 브라우저마다 스타일이 다르기에 완전 초기화 하여 사용하는것을 추천
• Codepen.io에서 초기화 하기
  
  
  
• reset.css cdn을 이용하기
• jsdelivr.com에서 제공하는 링크를 활용하는것을 추천
• reset.css 는 원본, reset.min.css 용량압축버전을 사용 권장
• Copy HTML하여 index.html에 넣어주는데, 이때 내가 사용하는 main.css 상단에 넣어주어야한다.
• <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

  <link rel="stylesheet" href="main.css">
• Emmet
• 코드를 자동완성해주는 기능
• 사용법: 태그명 + tab
• Emmet은 CSS선택자를 활용해 사용하는 기능
• *: 곱하기
• {} : 내용 삽입
• $ : 순서대로 숫자를 입력

4_HTML

• 기본 문법
• 요소 : <태그>내용</태그>
• 부모와 자식 관계의 이해
• <태그><태그><태그>내용</태그></태그></태그>
• <상위요소>,<부모요소>,<자식요소>
• 빈 태그
• HTML5 : <태그 /> 또는 <태그> 모두 허용
• 필수 속성과 값을 모두 입력해주어야 요소로써의 역할을 함.
• 글자와 상자
• 인라인 (inline) : 글자를 만들기 위한 요소들, 
• 특징1: 요소가 수평(왼쪽에서 오른쪽)으로 쌓이고 요소를 엔터쳐 한줄 내리면 띄어쓰기가 사이에 삽입됨, 안내리면 붙어나옴!
• 특징2: 자신이 포함한 콘텐츠(글자) 크기만큼 자동으로 줄어드는 성질이 있음
• 특징3: 글자는 위/아래 여백사용불가, 좌/우 여백은 가능
• 특징4: 인라인요소 안에 블록요소는 넣을 수 없다 (예외 있긴 함)
• <Span>대표적 인라인 요소, 콘텐츠 영역을 설정하는 용도 (아무것도 안보임)
• 블록 (block)요소 : 상자(레이아웃)를 만들기 위한 요소들
• 특징1: 요소가 수직(위에서 아래로) 쌓임
• 특징2: 부모요소의 크기만큼 자동으로 늘어남 (가로너비만!) 
• 특징3: 여백은 모두 추가 가능
• 특징4: 블록요소 안에는 블록요소, 인라인요소 모두 넣을 수 있다.
• <div> 대표적 블록 요소, 콘텐츠 영역을 구분하는 용도 (아무것도 보이지 않음)
• 핵심 요소(element) 정리
• <div>: 블록요소, (division) 특별한 의미가 없고 구분(영역)을 위한 요소이다.
• <h1~6>: 블록요소, (heading) 제목(목차)를 의미하는 요소, 숫자가 작을수록 더 중요한 제목을 정의
• <p>: 블록요소, (paragraph) 문장을 의미하는 요소 (* div로 대신해도 됨)
• <img>: (예외: 문자가아님)인라인요소, (image) 이미지를 삽입하는 요소
• <ul><li>: 블록요소, (unordered list, list item), 순서가 필요없는 목록의 집합과 목록내의 항목들
• <a> : 인라인요소, (Anchor), 링크를 지정하는 요소
• <span>: 인라인요소, 특별한 의미가 없는 구분(영역)을 위한 요소
• <br>: 인라인요소, (Break), 줄바꿈 태그
• <input>inline-block요소, 사용자에게 데이터를 입력받는 요소  <input type="text" value="미리작성">
  <input type="text" placeholder="힌트">

  <input type="text/checkbox/radio" disabled>
• <label>: 인라인요소, 라벨 가능 요소(input)의 제목
• <table>: 테이블요소(블록요소의 한부분), 행(Row)과 열(column)의 집합
• 주석
• <!--메모-->
• 단축키: Ctrl+/
• 전역 속성
• 요소는 자신이 사용할수 있는 속성이 지정되어 있으나, 전역 속성은 전체 영역에서 모두 사용할 수 있는 속성이다.  (예: title, style, .class, #id, data-이름)

5_CSS 개요

• 기본 문법, 주석
• 선택자{속성: 값;}
• /* CSS 주석 */
• 선언 방식
• 내장 방식
• html파일에서 <head>안에 <style></style>의 내용으로 스타일을 작성하는 방식
• 인라인 방식
• html파일에서 요소의 style속성에 직접 스타일을 작성하는 방식(선택자 없음)
• <div style="color: red;"></div>
• 링크 방식
• css/main.css파일에 css를 작성 (병렬방식)
• <link rel="stylesheet" href="./css/main.css">
• @import 방식
• html파일에 <link>로 main.css연결 후 main.css에 또다른 외부에 있는 box.css파일을 가져와서 연결하는 방법, 단점이자 장점은 모두 로딩된 이후 디스플레이가됨 (직렬연결)
• @import url("./box.css");
• 많이 사용되지는 않음
• 선택자_기본
• [*] 전체 선택자 (Universal Selector)
• 모든 요소를 선택 (예: * {..} )
• [태그] 태그 선택자 (Type selector)
• 태그이름에 해당하는 요소를 선택 (예: li {..} )
• [.] 클래스 선택자 (Class Selector)
• HTML class속성 값에 해당하는 요소 선택 (예: .orange {..} )
• 중복이 가능함
• [#] 아이디 선택자 (ID Selector)
• HTML id속성의 값에 해당하는 요소 선택 (예: #orange {..} )
• id속성은 전역속성임
• 선택자_복합
• 해석을 뒤에서부터 해야 찾기 편함!
• 일치 선택자 (Basic Combinator)
• 선택자 2개를 동시에 만족하는 요소 선택 (예: span.orange {..} - 스펜테그에 오렌지 클래스 갖고있는 모든 요소 선택)
• [>] 자식 선택자 (Child Combinator)
• 선택자의 자식 요소 선택 (예: ul > .orange {..} - 클래스가 오렌지를 갖고있는 요소인데, ul테그의 자식인 요소 )
• [띄어쓰기] 하위/후손 선택자 (Descendant combinator)
• 선택자의 하위 요소 선택 (예: div .orange {..} - div의 후손중 오렌지 클래스를 갖고 있는 모든 요소 )
• [+] 인접 형제 선택자 (Adjacent sibling combinator)
• 선택자의 다음 형제 요소 하나를 선택 (예: .orange + li {..} - 오렌지라는 클래스를 갖고 있는 li의 다음 li태그 )
• 선택자_가상 클래스 (Pseudo-classes)
• 간단한 동작을 주는 가상 클래스 (기본적인 움직임은 js로 주는게 맞음)와 일반 가상 클래스가 있음, 단독으로 사용할 수 는 없고 복합 선택자와 함께 쓰임
• [동작] :hover
• 선택자 요소에 마우스 커서가 올라가 있는 동안 선택
• [동작] :active
• 선택자 요소에 마우스를 클릭하고 있는 동안 선택
• [동작] :focus
• 선택자 요소가 포커스(활성화)되면 선택
• focus를 적용할 수 있는 요소는 HTML대화형 콘텐츠 (input, a, button, label, select등..)가 해당됨. 
• tabindex 속성을 통해 focus가 될수 있는 요소를 만들수도 있음 (예: <div class="box" tabindex-"-1"></div> *값은 -1을 넣는다, 한페이지에서 한 요소만 사용 가능
• :first-child
• 선택자가 형제 요소중 첫째라면 선택
• :last-child
• 선택자가 형제 요소중 막내라면 선택
• :nth-child(n)
• 선택자가 형제 요소중 (n)째라면 선택 (내가 선택할 수 있음)
• 예: .coffee *:nth-child(2){..} 
• *:nth-child(2n){..}  (n은 0부터 시작 zero-based numbering! 즉 2의 배수를 선택해라. 2n = 2,4,6,8..)
• *:nth-child(2n+1) 홀수를 선택해라, 2n+1 = 1,3,5,7...
• *:nth-child(n+2) 2번째 요소부터 선택하라, n+2 = 2,3,4,5...
• :not(ABC) 부정 선택자 (Negation) NOT
• .coffee *:not(span) (커피 클래스안에 span이 아닌 요소 모두 선택)
• 선택자_가상요소 (Pseudo-Elements)
• ::before (inline요소, content라는 속성은 필수 값)
• 선택자 요소의 내부 앞에 내용(content)이 삽입되어 화면에 출력됨
• 예: .box::before { content: "앞!"; }
• ::after (inline요소, content라는 속성은 필수 값)
• 선택자 요소의 내부 뒤에 내용(content)이 삽입되어 화면에 출력됨
• 예: .box::after { content: "뒤!"; }
• 선택자_속성 (Attribute)
• 속성을 포함한 요소 선택, 특이한 속성에 사용하는게 유용
• [속성]{..} 으로 사용함 ( 예: [disabled] {..} )
• [속성="값"] (예: [type="password"]{..} )
• 스타일 상속
• 스타일도 하위 요소로 상속이 된다. 
• 상속되는 CSS속성들
• 대부분의 글자/문자 관련 속성들이 속성된다. (예: font-style, font-weight, font-size, line-height, font-family, color, text-align..등..)
• 강제 상속
• 자동으로 상속되지는 않지만, 강제적으로 상속될 수 있도록 함
• height: inherit; (부모 값을 상속받아 사용해라)
• 선택자 우선순위(중요)
• 같은 요소가 여러번 선언했을때, 어떤 선언의 CSS속성을 우선적으로 적용되는지에 대한 순서를 정하는 규칙이 있음 
• 점수가 높은 선언이 우선되고 점수가 같으면 가작 마지막에 해석된 선언이 우선됨. (명시도의 중요도 순의, 선언순서라고도 함)
• 점수가 높은 순서:  !important(무한값) > 인라인선언(html)(1000점) > id선택자(100점) > class선택자/가상클래스선택자(10점) > 태그 선택자/가상요소선택자(1점) > 전체선택자(0점) > body태그 선택자(상속되는 구조이지만 점수가 없다)
• 예: .list li.item {..} (21점, class선택자 2개, 태그 선택자 1개)
• 예: :not(.box){..} (10점, class선택자1개, 부정선택자의 점수는 계산되지 않음)
• !important는 극히 일부분을 제외하고 사용하지 않음.
• 인라인방식으로 스타일을 명시하는것도 제외할것 (수정이 안됨)

#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의