[1주차] (8/2-8/8) 강의 요약 정리 및 하게 된 계기, 일주일 후기

시작하게 된 계기
: 야심차게 프론트엔드 개발자가 되고 싶어 패스트 캠퍼스에서 산 프론트엔드 패키지는 초반에만 열심히 듣고 버려졌다. 다시 시작하려고 킨 순간, 강의는 많은데 뭐부터 해야할 지를 모르고 하루 할당량을 딱히 정해놓지 않아 다시 듣기 싫어졌다. 강제성이 필요하다고 느꼈다. 대학생 신분인 나에겐 큰 돈이지만 미래를 위해서 이 돈쯤은 이라 외치며 제로베이스 프론트엔드 99일을 결제했다.

1주차 후기
: 우선 한줄평은 생각보다 체계적으로 되어 있어서 놀랐다. 앞서 패스트캠퍼스에서 방황한 내자신이 있었기에 기대는 한껏 낮춰져있어서 인지는 모르겠지만, 하루 들어야 할 강의 수와 1주마다 내주는 과제는 불을 지피기에 충분했다. 쉬웠던 과제와 달리 퀴즈는 20문제로 살짝 난이도가 있는 편이었다. 하지만 수업을 제대로 들었으면 충분히 풀 수 있는 문제 였다. 굳어있던 머리를 다시 돌릴 시간이다. 하루 들어야 할 강의 양이 정해져있어 하나하나 이뤄나가는 재미도 있다. 언젠간 나 혼자 코드를 작성할 날이 오기를 기대한다.

---

F12 = 개발자 도구

프론트엔드 개발 : Html css js 를 사용해 데이터를 그래픽 사용자 인터페이스로 변환한 그것으로 사용자와 상호작용
-> 사용장의 앞에 보이는 그 웹페이지를 만들어서-> 사용자가 웹페이지를 보고 사용하는 것
*프론트엔드=앞단(사용자의 앞에 보이는 그 웹사이트)

비즈니스 로직: 웹사이트가 동작하는 데 필요한 핵심 데이터 처리를 수행하는 알고리즘 등 정보을 말함->백엔드(뒷단:앞단을 저장하고 가공)에서 개발

풀스택 개발:백엔드+프론트엔드, GUI 프론트엔드부터 데이터베이스 백엔드 등 모든 소프트웨어 스택을 개발하는 것

---

웹에서 동작하는 기본적인 개발언어
1. HTML(Hyper Text Markup Language) : 구조를 만들어내는 언어<기획자>페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조 담당, 영역의 구조를 만들어내는 역할 눈입
-Hyper Text: 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근’(이동)할 수 있는 텍스트, 일반적으로 알고있을 링크버튼(텍스트), 파란색 밑줄로 쳐있는 거 클릭하면 링크로 향하는 것

2. CSS<디자이너>(Cascading Style Sheets):실제 화면에 표시되는 방법(색상,크기,폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당, 작성된 구조의 표시되는 방법을 CSS로 표현 움직이지 못함
3. HTML,CSS->크기,색상 등 레이아웃과 관련된 방식으로 사고 해서 개발, 이미지를 가지고 사고하는 방식, 우리가 보편적으로 익숙한 개념을 다룸 레이아웃 중심 개발 방식 사고
4. JS(Javascript)<개발자>:콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리 담당, 포기하는 이유:사고하는 방식이 달라져야함, 자바스크립트의 데이터가 기준이 됨 기존의 학습내용과 괴리감을 느껴서 데이터 중심 개발방식 사고
5. HTML을 통해서 구조를 만들고 그 구조를 CSS를 통해서 정적으로 꾸며줌(스타일). 움직이지 않는 개념에 무엇인가 움직일 수 있는 동적개념을 JS가 부여하여 제작된 웹사이트(웹애플리케이션,웹앱)를 제품(product)이라고 부르기도 함

구조들을 사용자에게 효과적인 정보를 전달하기 위해선 꾸미기도 해야하고 동적인 개념도 부여해야 하므로 HTML, CSS ,JS를 같이 배워야 한다.

---

W3C의 표준화 제정 단계 : 초안(Working Draft,WD)>후보권고안(Candidate Recommendation, CR)>제안권고안(Proposed Recommendation, PR)>권고안(W3C Recommendation, REC): 권고안에 해당하는 기술들 만 표준 기술, 굉장히 유용하고 오랫동안 쓸 수 있다.

---

크로스 브라우징(Cross Browsing)
: 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법

---

웹이미지
1. 비트맵: 픽셀들이 모여서 만들어진 이미지, 픽셀들이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름 레스터화: 그이미지를 비트맵화
- 정교하고 다양한 색상을 자연스럽게 표현, 확대/축소시 계단 현상, 원본 이미지 대비 항상 품질 저하 ex)우리가 알고있는 사진 이미지들 jpg, png
2. 백터: 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지
- 확대/ 축소에서 같은 수학적인 정보를 가지고 있는 파일이기에 자유로움, 용량 변화가 없음, 정교한 이미지(인물, 풍경사진 같은)를 표현하기 어려움(벡터 이미지를 구성하는 점과 선과 면의 수학적인 정보들이여서 일반적으로 알고있는 사진 표현하기에 적합하지x)
ex) 단순 구조의 아이콘들, 형태는 하나지만 크기가 다양하게 사용되는 로고
3. 벡터와 비트맵이 구분되는 이유 : 각각의 장점과 단점이 있어서 서로 보완이 되서
4. material design(머터리얼 디자인) 필요에 따라서 어떠한 이미지 포맷을 선택하느냐가 중요
5.
이미지 용량이 크고 용량을 줄이는 데 집중하는 데 활용하고 싶다->jpg
이미지 저장하거나 삽입해야하는데 투명도 필요하다 ->png
이미지가 소위 얘기하는 움짤(애니메이션) 기능 필요하다->gif
통상 이미지 저장시에는 jpg, png로 저장하지만 기능에 따라 저장하는 게 좋음
webp->아주 좋은데 아직 사용하기 어려움, 왜냐하면 지원 브라우저가 별로 없어서

---

VS CODE 단축키

윈도우	맥	설명
“Ctrl + Shift + P”	“Cmd + Shift + P”	모든 명령 표시(에디터의 모든 명령에 접근)
“Ctrl + F”	“Cmd + F”	찾기(검색)
“Ctrl + H”	“Cmd + Opt(Alt) + F”	찾기(검색)/바꾸기(대체)
“Tab”	“Tab”	들여쓰기
“Shift + Tab”	“Shift + Tab”	내어쓰기
“Ctrl + \”	“Cmd + \”	편집기 분할(백슬래쉬)
“Ctrl + W”	“Cmd + W”	편집기 닫기

코드랩핑
: 원래 있던 코드를 다른 코드로 감싸고 싶을 때 하는 것(ctrl+shift+p >wrap>emmet 약어로 래핑>포장할 문법(div) 입력>enter)
ex) <h1>안녕하세요</h1> -> <div><h1>안녕하세요></h1></div>

---

특수문자

기호	영어(발음)	한글
`	Grave(그레이브)	-
~	Tilde(틸드)	물결표시
!	Exclamation(엑스클러메이션) mark	느낌표
@	At(엣) sign	골뱅이
#	Number(넘버) sign, Sharp(샵)	샵, 우물 정
$	Dollar(달러) sign	달러
%	Percent(퍼센트) sign	퍼센트
^	Caret(캐럿)	-
&	Ampersand(엠퍼센드)	-
*	Asterisk(에스터리스크)	별표
-	Hyphen(하이픈), Dash(대쉬)	마이너스
_	Underscore(언더스코어), Low dash(로대쉬)	밑줄
=	Equals(이퀄) sign	이꼬르
“	Quotation(쿼테이션) mark	큰 따옴표
‘	Apostrophe(아포스트로피)	작은 따옴표
:	Colon(콜론)	땡땡이
;	Semicolon(세미콜론)	털 달린 땡땡이
,	Comma(콤마)	쉼표
.	Period(피리어드), Dot(닷)	점, 마침표
?	Question(퀘스천) mark	물음표
/	Slash(슬래쉬)	-
|	Vertical bar(버티컬 바)	-
\	Backslash(백슬래쉬)	-
()	Parenthesis(퍼렌서시스)	(소)괄호
{}	Brace(브레이스)	중괄호
[]	Bracket(브래킷)	대괄호
<>	Angle Bracket(앵글 브래킷)	꺽쇠괄호

<	&lt;
>	&gt;

---

태그 정리
- html : 전체 문서의 영역 표시, 문서의 시작과 끝 표시
- head->전체문서의 정보, 문서가 가질 수 있는 정보에 해당되는 것을 적음, 정보의 범위
: 브라우저는 html 태그 안에 있는 것만 인식 그래서 html 태그 안에 모든 것을 작성해야함.
* iso 639-1 를 검색하면 나라별 언어 코드 약어를 알 수 있다. 국가표시와 언어표시는 다른 개념이다. 코드에서는 언어표시 사용, <!DOCTYPE HTML> -> 도큐멘트 타입 명시 html5
Doctype : html 버전 어떤 거에 해당하는 지 명시하는 것
1. HTML 문서의 제목(title 태그: tab에 표시되는 제목 정보(웹페이지 제목이나 이름))
2. meta : 기타 모든 정보를 나타내는 정보 태그, 시작태그는 있고 종료태그는 없다
ex) charset(character set)-문자가 인코딩되는 방식(텍스트가 출력되는 방식 설정, UTF-8(조합형:초성, 중성,종성으로 찾을 수 있음, 최신에 많이 사용), EUC-KR(완성형:박 영 웅을 이렇게 완성된 조합을 찾아야한다, 오래된 사이트에서 볼 수 있는 인코딩 방식)),name-정보의 종류(author-제작자종류, description-사이트에 대한 설명 종류)
<meta name=”author” content=”김소윤”>
<meta name=”description” content=”김소윤의 사이트입니다”>
<meta http-equiv=”X-UA-Compatible” content=”IE-edge”>-이내용이 있는 html 문서는 인터넷 익스플로어 에서
랜더링 했을 때 최신의 버전 사용한다는 뜻
*name을 썼으면 http-equiv 사용 불가 반대도 불가
*<meta name="viewport" content="width=device-width, initial-scale=1.0"> -> viewport 화면에 어떤 정보를 랜 더링하기 위한 영역을 설정하기 위한 것, device-width 해당하는 디바이스가로 너비에 맞춘다. initial-sacale=1.0 은 확대 축소 크기를 1로 시작한다.
3. 스타일 직접 입력
4. 스타일 외부에서 가져와서 입력

body
-전체 문서의 구조, 문서가 포함할 동영상 등 구조의 범위
- ul 태그 unordered list - li태그:list 안에 들어가는 list item 약자
- 가장 상단 부분에 있는 것을 header (메뉴, 검색바, 로그인, 로그아웃, 회원가입등이 일반적으로 들어감)라고 한다.
- header 태그 : 소개나 탐색을 돕는 그룹(로고, 메뉴 포함), header 정의시 사용, header 태그 안에 header 태그를 또 넣거나 footer 태그를 넣을 수 없다. 전역속성만 포함 가능, 구획을 나타내는 태그
- address 태그는 주소를 나타내는 태그이다. address 태그 안에 header 태그를 넣을 수 없다.
- footer : 사이트의 가장 하단에 위치한 바, header와 반대되는 내용, 사이트의 정보 표시
- footer 태그: 전역속성만 포함, 구획을 나타내는 태그
- 예전에는 무의미한 태그(div 등)에 class 등을 부여하여 별칭으로 나눴다면 요즘에는 symantic tag: 의미를 가진 태그 ex) header 를 사용한다.
- 목차 h1 대주제, h2-h6 소주제 : 화면의 글자의 크기를 지정할 때 쓰는 태그가 아니라 일종의 대주제부터 소주제까지 주제를 구분할 때 쓰는 태그이다. 전역속성만 포함
*중요: 제목 폰트 크기를 줄이기 위해 낮은 단계를 사용하면 안된다. 대신에 css font size 속성을 사용해야 한다. h1-h6 까지의 글자 크기를 초기화 해놓고 우리가 설정하여 명확하게 지정해놓고 사용해야함 = html 문서는 구조를 나타내는 1. html 태그인 h1-h6 태그는 구조를 나타내는 용도로만 사용해야함
2.제목 단계를 건너뛰면 안됨 -> 브라우저나 검색엔진 등에서 h1부터 순차적으로 각각의 제목을 찾아내려가는데 중간 에 비어있으면 목차를 정리함에 있어서 문제가 발생할 수 있기 때문이다.
3. 첫번째 단계의 제목은 한페이지에 두 번 이상 쓰면 안됨. 전체 문서의 제목을 h1을 쓰고 h2-h6을 반복적으로
사용해서 하는게 나을 것 같다는 추천
4. 일반적으로 h6까지 가는 경우는 없고 h3,h4까지만 쓴다
- main 태그 : 블로그 내용 중 핵심 포스트 같은 것, 그페이지에 대한 핵심적인 컨텐츠, 하나의 태그만 존재해야 한다(base와 같은 성질).
1.인터넷 익스플로워 사용 불가능
2.block 요소이다.(display: block)
-article 태그: 독립적으로 구분되거나 재사용 가능한 영역 설정(ex 매거진/신문 기사, 블로그 등), 재사용이 가능하고 중요한 것은 독립적으로도 사용 가능해야한다는 것, 독립적과 재사용 가능을 같은 개념으로 묶어서 봐도 된다. 독립적이라는 특정한 의미를 갖고있음
1. 특정한 article 영역이 어느 장소에 꼭 들어있지 않아도 독립성을 가져야한다면 article 태그를 사용하면 좋다.
2. h1-h6 태그 포함해야함
3. time 태그의 datetime 속성으로 작성일자와 시간 작성
4. block 요소(display:block)
- section 태그 : 일반적인 영역 구분
1. h1-h6 태그 포함
2. block 요소(display:block)
3. section 태그 안에 article 태그 넣을 수 있음. 반대도 가능
4. section과 div 태그과 article 태그 비교: 어떠한 특정한 영역을 구분하는 것은 비슷하지만 section 같은 경우 제목을 포함해서 의미를 가지고 있고, div 태그는 별다른 의미가 없다. article 태그는 독립성이 유지되는 컨텐츠이다. 또한 제 목이 포함되어 있다.의미가 강한 순(article>section>div)

link 태그
link 태그는 빈태그이며 js를 불러오는 데 쓰는 태그가 아니라 favicon(tab에 타이틀과 같이 표시될 아이콘)이나 css, html을 현재의 html로 불러올 때 쓰는 태그
-link 태그는 rel이 꼭 있어야 한다.
-rel=relationship(관계)=현재 html문서와 가지고 오려는 문서와의 관계
ex)css 일경우 stylesheet
-href=hypertext reference=경로
-hreflang=링크된 리소의 언어(생략 가능, 굳이 명시 안해도 위에 언어 표시하는 게 있어서)
-CORS(Cross Origin Resource Sharing): 다른 도메인의 두개의 사이트에서 데이터를 어떻게 주고받을지에 대한 내용

style 태그 : html 문서 내부에 css 작성 시 사용 <style type=”text/css”> 이젠 type 이후 생략
- 기본적으로 head 태그 안에 작성
- title 태그는 style에 굳이 명시할 필요 없음

---

css
쭉 나열하는 건 가독성이 떨어지므로 중괄호 안으로 엔터쳐서 들어가서 한속성 마다 엔터쳐서 작성

선택자 selector
: 우리가 넣고 싶은 값을 넣어서 정의를 하는 데 그정의를 어느 지점에 넣어서 할건가, html의 어떤 태그를 지칭하는 내용이 선택자가 하는 역할이다. 정확하게 어떤 부분에다가 어떤 내용을 적용을 할 것인가를 명확하게 명칭해주는 것이 선택자가 하는 역할. css 내용을 html 어디에 지정할 것인가
-구성
: 선택자 {
속성:값;
속성:값;
}

선택자 의 역할 : 우리가 작성한 css style를 원하는 특정한 html에 적용하기 위해 아주 중요한 역할
-태그 선택자(기호가 보이지 않으면 태그 선택자)- 태그이름으로 찾기 ex)h1, p
- 클래스 선택자(.)- . 뒤 별명을 갖고있는 것을 찾아서 적용(.title=class=”title”)
*class= box box2 는 box라는 클래스 이름도 갖고 있고 box2라는 클래스 이름도 갖고 있어 css에서 .box 선택자에도 해당하고 .box2라는 선택자에도 해당한다.

속성 properties (html 속성 attribute와 같지않음)
- 속성이 의미하는 바와 시각적인 결과에 대해 어느정도 알고 있어야 한다.
-font-size: 20px; =글자크기: 값;
- color: red; =글자색상:빨간색;
- width 요소의 가로넓이
-margin 요소가 가진 바깥쪽 여백
- padding:10px 20px;= 요소의 안쪽 여백: 위아래 10px, 좌우 20px
-position 위치의 기준
- 요소 및 텍스트의 크기 지정 속성
: width – 요소의 가로 너비, height : 요소의 세로 너비, font-size-글자크기(기본적으로 브라우저에 글자크기는 16px로 지정되어 있다. 기본값 주의)
- 여백 속성
: margin- 요소의 바깥 여백(단축속성이며 두요소의 거리를 둘 때 씀 margin:20px; 시 위아래좌우 다 20px의 바깥쪽 여백의 거리를 가진다는 소리이다(위아래좌우 다 동일시 margin: 값;). 개별적인 속성: margin-top, margin-right, margin-bottom, margin-left->단축속성이 있는 애들은 개별속성이 존재),
padding- 요소 내부 여백(단축속성이며 요소의 영역 안에 여백이 늘어나는 것이기에 요소의 기본적인 크기가 여백이 들어가는 크기만큼 늘어나게 됨, 개별속성: padding-top, padding-right, padding-bottom, padding-left)
- 색상
: color-글자색상, background(단축속성이라서 색상(background-color), 위치 등 지정 가능)-요소의 배경색상

---

선언방식
-인라인 방식: html 태그에 직접 작성, 선택자가 필요없이 직접 태그를 찾아서 거기다가 css 코드를 삽입하는 방식, 자바스크립트가 html에 css를 강제로 삽입할 때 활용 왜냐하면 자바스크립트는 제어하는 언어여서 ㄱㅊ
단점 : 코드가 많을 경우 일일히 다 찾아서 작성해야 하는 불편함이 있다. 나쁜 방식은 아니지만 손으로 일일이 치는 것은 최대한 피해야 한다.
ex)<div style=”속성:값;”>
- 내장방식 embeded : style 태그 안에다가 직접 css 내용 작성, 하나의 html에 한번만 적용 가능
head 태그 안에다가 style 태그 작성 : 일종의 css 정보
ex)
<head>
<style>
div {
color : red;
}
</style>
</head>

- html 외부에서 불러오기 : link 태그 이용
외부 별도 파일을 만들고 css를 작성해서 html로 불러와서 적용 그래서 다양한 html에 각각 동시에 css 적용가능 그래서 자주 사용함
head 태그 안에 link 태그 활용하여 css 불러오기(stylesheet=css) 경로- 상대경로, 절대 경로(앞에 / 있을시ex) “/css/main.css) html 파일 기준으로 바로 옆에 같은 폴더 안에 들어 있을 시 ./ (나를 기준으로 해서 주변에서 찾겠다는 뜻:상대적 경로)
-폴더 안에 파일 들어있을시 ./폴더/파일

---

base tag
-많이 사용x
- 경로를 나타내는 태그 위에 작성하는 것이 원칙
- base 태그를 통해서 우리가 상대경로를 입력할 수 있는 특정 경로를 기본적으로 정해서 기준으로 삼는 것 즉 base tag에 적은 경로를 한번 더 작성 안해도 된다.
<link rel="stylesheet" href="./css/main.css" >
=
<base href="./css">
<link rel="stylesheet" href="main.css" >
- 주의사항은 base태그는 기준으로 삼는 거기 때문에 html 문서에 단 한번만 작성 가능 그래서 주요한 것에만 쓰여야 함
- 해당하는 이미지 경로가 계속 공통적으로 나타내는 경로가 있다면 그 주소를 base에 쓰고 이미지 경로에서 공통되는 부분을 삭제해도 이미지 정상적으로 똑같이 나타남

---

HTML
1. 블록 요소
- div, h1, p 태그
- 사용 가능한 최대 가로 너비를 사용한다.
- 크기(가로,세로사이즈)를 지정할 수 있다
- width:100%; height:0; 로 시작한다->가로 사이즈만 지정했을 경우 div 안에 들어있는 요소의 높이만큼을 높이로 자동으로 지정하게 된다.
- 수직으로 쌓임
- margin, padding의 속성의 위 아래 좌 우 면의 사용 가능
-레이아웃을 다룸

2. 인라인 요소
- span, img 태그
- 필요한 만큼의 너비 사용(기본적으로 가로의 전체 너비 사용하지 않고 자신의 안에 어떤 포함된 내용만큼만의 가로너비만 사용)
- 크기(가로, 세로사이즈)를 지정할 수 없다
- width: 0; height:0; 로 시작한다. (크기를 가질 수 없는 요소)
-수평으로 쌓임(코드를 붙여서 한거는 띄어쓰기 적용 안되지만 엔터친거는 띄어쓰기 적용)
- margin, padding의 속성의 위 아래 사용 불가능
-TEXT를 다룸

브라우저의 기본값은 width와 height는 auto로 되있음. 하지만 블록요소와 인라인 요소는 다르게 구현된다

---

display
-div, h1, p는 css에서 display: block이 기본 요소
-span은 css에서 display:inline이 기본요소
-인라인 요소를 강제적으로 블록 요소로 바꿀시 display: block
-블록요소를 강제적으로 인라인 요소로 바꿀시 display:inline

이미지 가져오려면 개발자 도구 들어가서 이미지에 해당하는 코드를 새탭으로 열어서 그탭의 주소를 복사해서 써야함

---

참고자료
https://heropy.blog/2019/04/24/html-css-starter/

입문자에게 추천하는 HTML, CSS 첫걸음

https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리