[패스트캠퍼스] 프론트엔드 강의 종합반 week 1 ch1 개요

청수동햄주먹·2023년 1월 20일

K디지털기초역량훈련 국비지원 국비지원교육 내일배움카드 리액트강의 패스트캠퍼스 프론트엔드강의

국비지원 프론트엔드 종합반 패스트캠퍼스

목록 보기

1/8

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

Ch 1. 개요

HTML, CSS, and JS 프론트엔드가 갖추어야할 기본적인 소양

HTML (Hyper Text Markup Language) : 웹페이지의 구조. 기획자
- Hyper Text란 참조를 통해 현재 페이지에서 다른 문서로 즉시 접근할 수 있는 텍스트. 링크
- Markup 만들어 내는
- 사이트를 구성해야 하는 정보들
- ex: 웹페이지에서 얼굴의 구조를 만들기 위해서는 얼굴의 영역과 눈 두개. 입이 필요
CSS (Cascading Style Sheets) : 실제 화면에 표시되는 방법. 시각적, 정적 표현. 디자이너
- ex: 얼굴은 둥글고, 눈과 입의의 위치와 모양 지정
JS : 컨텐츠의 동적처리. 개발자
- ex: 얼굴을 움직이고 클릭하면 얼굴의 표정의 바뀌는 등의 동작들
- JS로 들어가는 순간 사고의 방식을 바꿔야 한다.

웹앱(Web Application)의 동작방식

사용자가 자신의 컴퓨터에서 브라우저 실행
https://접속하고자.하는.사이트 의 주소입력
서버로의 최초요청 request
서버는 최초응답 response : html
사용자 컴퓨터는 정보 추가 요청
서버는 추가응답 : css, js, jpg ..
사용자 컴퓨터는 정보들을 렌더링 rendering

local 개발환경: 웹사이트를 개발할 컴퓨터 환경
사용자가 접속할 수 있게 하려면 서버에 업로드 해야 함

출처: MDN Web Docs

웹 표준과 브라우저

Web Standard : 웹에서 사용되는 표준 기술이나 규칙. W3C에 의해 제정.
- W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술
  - 초안 Working Draft: WD
  - 후보권고안 Candidate Recommendation: CR
  - 제안권고안 Proposed Recommendation: PR
  - 권고안 W3C Recommendation: REC ☑️
브라우저 공급업체 browser vendors
- 웹표준을 해석해서 브라우저를 만든다
- 크로스 브라우징 : 다양한 브라우저에서 동일한 User Experience를 제공할 수 있도록 하는 기술
- internet explorer : 웹표준과 동떨어져서 서비스 지원 종료
브라우저
- window: 브라우저 창
- tab: 현재 창
- view port : 하나의 웹페이지가 출력되는 전체 영역
- rendering : 브라우저의 뷰포트에 웹사이트 출력

웹에서 사용하는 이미지

출처: Filecamp

bitmap
- 픽셀이 모여 만들어진 정보의 집합
- raster image 라고도 부름
- 정교하고 다양한 색상을 자연스럽게 표현
- 확대/축소시 계단현상. 품질저하
- .jpeg(jpg): full-color, gray-scale의 압축.
  - 압축률이 훌륭해 용량이 적다 사진이나 예술분야에서 사용
  - 손실 압축: 24비트 표현색상, 가장 널리 쓰이는 이미지 포맷
- .png
  - 비손실 압축 용량이 크다(원본)
  - 8bit/ 24bit 색상
  - 투명배경 가능 (alpha channel)
  - W3C 권장 포맷
- .gif
  - 이미지 파일내에 이미지 및 문자열 같은 정보들을 저장
  - 움짤. 애니메이션 가능
  - 비손실 압축
  - 8비트 색상만 지원
- WEBP
  - JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷 ->하위호환성
  - 완벽한 손실/ 비손실 압축 동시 지원
  - alpha channel지원, 손실 비손실 모두
vector
- 점, 선, 면의 위치(좌표) 색상 등 수학적 정보의 형태로 이루어진 이미지
- 확대/축소 에서 자유로움. 용걍변화가 없음
- 정교한 이미지(인물, 풍경)를 표현하기 어려움 -> 아이콘, 로고 등으로 이용
- .svg
- Scalable Vector Graphics
- 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
- CSS,JS로 제어가능 <svg></svg>
- 파일 및 코드삽입 가능

특수기호

` : backtick / grave
~ : Tilde
! : exclamation mark
@ : at sign
# : sharp, number sign
^ : caret
& : ampersand
- : hypen, dash
_ : underscore, Lowdash
" : quotation mark
' : apostrophe
: : colon
; : semicolon
, : comma
. : period, dot
/ : slash
\ : backslash
| : vertical bar
() : parenthesis 소괄호
{} : brace 중괄호
[] : bracket 대괄호
<> : angle bracket

오픈소스 라이선스

어떤 제품을 개발하는 과정에 필요한 소스코드나 설계도를 누구나 접근해서 열람가능
OpenSource.org
개인사용 상업사용 가능
- Apache License
- MIT,BSC License : 사용하고 있다는 표시만 지켜주면 된다
- Beerware

프로젝트 단위는 폴더!

코딩을 시작할땐 폴더 단위로 열어서 시작하기

VScode 에 ! + tap/enter 입력

첫번째 드롭다운 메뉴를 선택하면 자동으로 html 구조를 만들어 준다

한글화

plug-in > korean 검색 > install > restart > "yes"
재부팅 되면 한글화된 vs를 볼 수 있다.

beautify/prettier

가독성이 떨어지는 코드👎! ⬇

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

강의에서는 beautify를 깔으라고 했지만, 같이 학습하시는 분의 댓글을보니 앞으로 추가 지원이 없어서 사장 된다고 하였다.
원래 beautify나 prettier 둘중 하나를 쓴다고 하지만 설치횟수는 prettier이 거의 세배나 많다고 함!

Prettier 의 단축키는 Shift + Alt + F 키 라고 하는데 윈도우즈 설정인 것 같다.
맥북은 Shift + opt + F 을 누르면 됨!
그러면 처음에 어떤 형식을 적용할거냐고 뜨는데 prettier를 선택하면 된다.

그 다음 다시 단축키를 눌러주면...

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

깔끔!

vscode 오른쪽 하단에 Prettier:✔️ 로 적용되고 있다는 것을 확인 할 수 있다.

두개의 차이점은,
beautify : 자유롭게 자신의 취향대로 formatting.
prettier : 코딩스타일을 가능한 통일하자는 취지.

++실습코치님이 달아주신 추가 정보!
실습 코치님도 prettier를 사용 중 이시라고 한다
우리가 사용하고 있는 IDE는 vscode 이고,
vscode는 설정파일을 적용할 수 있는 범위를 user단위/프로젝트 단위에 따라 정해 놓을 수 있기 때문에...

User 단위 셋팅 : vscode계정 단위로 설정을 할 수 있고

Project 단위 셋팅 : 현재 진행하는 workspace에만 적용

#### 태그 이름을 한 번에 변경하기: Auto Rename Tag 위의 예시 코드에서 div 태그를 span 태그, 닫힌태그로 한번에 바꾸고 싶을 때:

확장탭에서 auto를 검색하면 auto rename tag가 첫번째로 나옴!
다운로드 받자마자 태그를 변경해보면 닫힌태그도 같이 선택이 되면서 같이 수정되는 것을 확인할 수 있다.

브라우저에 출력: Live Server

사이드바의 확장탭 선택
-> live server 검색
-> 다운로드
-> 오른쪽 하단의 상태바에 Go Live 를 확인 할 수 있다 (혹은 우클릭 go with live server)
-> click!
-> port:5500 로컬 서버로 브라우저에 띄워진다.

제품은 실제 호스팅 서버(사용자들이 접근 가능)에 업로드 해야 한다

단축키 & 공백으로 만들기

맥 / 윈도우
사이드바 열기 : cmd+b / ctrl+b
빠르게 파일 열기 : cmd+p / ctrl+p
모든 명령표시 : cmd + shift + p / ctrl + shift + p
- 모든 단축 키를 찾고 싶다면 모든 명령 표시 단축키를 누르고 shortcut을 검색하기
현재 탭 닫기 : cmd+w / ctrl+w
현재탭에서 찾기 : cmd + f / ctrl + f
찾고 바꾸기 : cmd + opt + f / ctrl + h
현재 줄을 위의 줄로 이동 : opt + 🔼 / alt + 🔼
현재 줄을 아래의 줄로 이동 : opt + 🔽 / alt + 🔽
현재 줄을 윗줄에 복사, 붙여넣기 : opt + shift + 🔼 / alt + shift + 🔼
현재 줄을 아랫줄에 복사, 붙여넣기 : opt + shift + 🔽 / alt + shift + 🔽
들여쓰기 indent : tap
들여쓰기 크기 조정하기 : 하단 상태창의 Spaces/공백 클릭 -> Indent using spaces/공백을 사용한 들여쓰기 클릭 -> 권장 공백은 2
이전 편집기 열기 (좌측창으로 전환) : cmd + shift + [ / ctrl + pageup
이전 편집기 열기 (우측창으로 전환) : cmd + shift + ] / ctrl + pagedown
편집기 분할(back slash) : cmd + \ / ctrl + \

02. Doctype (DTD), 03. HTML,HEAD,Body

tag는 영역이라는 것을 가진다.

<!DOCTYPE html>
문서의 HTML 버전을 지정한다.
DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서형식을 정의하며, 웹브라우저가 어떤 HTML버전의 해석방식으로 페이지를 이해하면되는지를 알려주는 용도.
현재 HTML5가 표준으로 다른 버젼을 쓸 경우 직접적으로 명시해줘야한다.
<html></html>
문서의 전체 범위.
html문서가 어디에서 시작하고 어디에서 끝나는지 브라우저에 알려주는 역활
<head></head>
문서의 정보를 나타내는 범위.
웹 브라우저가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은 웹페이지의 보이지 않는 정보를 작성하는 범위
<body></body>
사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼 ,이미지같은 웹페이지의 보여지는 구조를 작성하는 범위

항상 전체 저장을 하는 습관
cmd+opt+s

html에서는 "" 큰 따옴표를 쓰도록 한다

한글 홈페이지를 만들 것이므로

<html lang="ko">
eng 대신 ko

03. CSS, JS 연결하기

css 연결하기

타이틀 태그 아래에
<link rel="stylesheet" href="./파일경로/style.css">
같은 폴더 내에 있는 경우 ./파일이름.css
link는 파일을 연결해 준다.

javascript 연결하기

<script src="./main.js"></script>
개발자 도구 -> console에서 확인해주기

04. 정보를 의미하는 태그 살표보기

헤드태그 내부의 태그들

<title></title>
문서의 제목을 정의. 웹브라우저 탭에 표시된다.
<link rel="" href="">
외부의 문서(대부분 css파일)을 가져와 연결할 때 사용
rel 속성명시 ex: stylesheet, icon
- icon의 경우 대표 아이콘을 favicon이라고 지정하고, .ico/.png가 주로 사용된다.
href="경로"를 명시해야 함
<style></style>
html 내에서도 스타일을 작성할 수 있다.
<script></script>
자바스크립트를 가져올 수도 있고, 이경우 src=""로 경로 명시
자바스크립트를 html문서 안에서 작성 할 때도 사용
<meta/>
html문서 제작자, 내용, 키보드같은 여러 정보를 검색엔진이나 브라우저에게 제공
- charset="UTF-8" 문자인코딩방식
- name="author" 정보의 종류 + content="JJ" 정보의 값
- name="viewport" content="width=device-width, initial-scale=1.0">
viewport는 모바일 장치에만 해당. 그런 모바일에서 웹파이지를 가로 너비를 모바일 환경의 가로너비와 일치시키고, 웹사이트가 처음 출력 될 때 1배 비율로 보여주겠다.

+? 문자 인코딩 방식

05. 화면에 이미지 출력하기

!! html파일은 root경로에 보일 수 있도록
./ 현재파일 주변에서 찾도록
-<img src="./images/logo.png" alt="HEROPY"></img>
필수 요소 src, alt: 대체 텍스트
src는 웹 이미지 주소를 사용해도 된다. src="https://heropy.blog/css/images/logo.png"

06. 상대 경로, 절대 경로

상대
- ./ 주변에서 찾음
- ../ 주변에서 찾지 말고 상위 폴더로 가기
절대
- https 원격
- / 최상위 경로 root. 슬래쉬 앞에 localhost:5500이 생략되어있음
- //
http://127.0.0.1:5500/index.html
- 5500 서버에 출력중
- https://localhost:5500으로도 접속 가능
  - localhost우리의 컴퓨터 환경

css 파일이 logo이미지에 접근하려면

../images/logo.png 상대경로
우선 상위 폴더로 가서 images 하위폴더로 간 다음 파일에 접근
images/heropy.png 절대경로
root 폴더의 입장에서

하이퍼텍스트 링크 만들기

<a href="https://naver.com">NAVER</a>
네이버로 가는 링크. 사이의 NAVER를 클릭하면 이동이되고
뒤로 가보면 보라색 언더라인으로 폰트설정이 바뀐다.

하이퍼텍스트 링크로 내 웹의 다른 페이지로 이동시키기

<a href="/about/about.html">About</a>
index.html으로 해주면 자동으로 브라우저가 찾는다.
따라서 about 안에 index.html이 있다면 href="/about" 만 써도 가능하다는 것!

08. 모든 파일 공백 크기 설정

vscode 의 환경설정을 이용해서 모든 파일의 공백을 2로 설정해보자!

Code 클릭
-> preference (기본설정)
-> settings (설정)
-> tabsize 를 2로 설정
=> 새롭게 만들어진 파일의 공백이 2로 설정이 되어 있는 것을 확인 할 수 있다.

09. 개발자 도구 사용하기

Elements 탭을 활용해보자!

Styles

구역설정을 할 수 있는 상위 맨 오른쪽 버튼을 누른후
구역 하나를 클릭해보면
Styles에서 적용된 css를 확인 할 수 있다. (하단에 있음)
Styles 에서 임시로 css를 적용 할 수도 있음!(다른 웹사이트에서도 가능)
따라서 배우고 싶은 사이트들의 css를 통해 자신의 실력을 쌓자!

ex:) heropy.blog
우측 상단의 아이콘들이 hover했을 때 확대 되면서 색깔이 변하는 것을 확인 할 수 있다.
개발자 도구의 styles 에서 어떤 것이 적용 된건지 확인해보자!

ul 하위의 Li 태그의 youtube를 선택
-> Styles 아랫줄의 .hov를 선택
-> Force element state
-> :hover 체크박스 체크

Computed

실제로 적용된 css 내용을 보기 좋게 보여줌

청수동햄주먹

코딩과 사별까지

다음 포스트