</ 패스트캠퍼스를 선택하게 된 이유>

최근에 국비지원교육으로 프론트엔드 과정을 수료하였다. Vue.js를 기반으로 했던 수업이었는데 취업시장에 들어서니 Vue.js를 뽑는곳이 별로 없었고 Vue.js도 수박겉핥기식으로 배워 머리속에 남는것이 하나도 없었다. 그러던 중 국비지원으로 단기간에 React를 배울 수 있는 패스트캠퍼스를 알게되었고 React를 배우면서 HTML, CSS, Java Script도 다시 한번 개념정리를 하면 좋을 것 같아 수업을 듣게 되었다.

</ 1주차 복습 및 정리>

1. 웹사이트 개요

• 프론트엔드 개발이란?
  HTML, CSS, JS를 사용해 만든 데이터를 인터페이스로 변환하고 이것을 통해 사용자와 상호 작용할 수 있도록 하는 것이 프론트엔드 개발이다.

• 크로스 브라우징이란?
  여러 브라우저에서 동일한 화면 및 동작을 보여줄 수 있도록 하는 것.

• 웹 접근성이란?
  고령자 및 장애인 같은 신체적, 환경적으로 제한이 있는 사용자을 포함해 모든 사용자들이 동등하게 웹을 이용할 수 있도록 웹을 제작하는 방법.

• 웹 이미지에 2가지 속성

1. 비트맵(jpg, png, gif): 픽셀이 모여 만들어진 이미지, 정교하고 다양한 색상을 자연스럽게 표현가능하지만 확대 및 축소시 품질이 저하가 될 가능성이 큼.
   • jpg(jpeg): 손실압축, 24bit 색상, 이미지 품질 및 용량을 쉽게 조절가능함.
   • png: 비손실 압축, 24bit 색상, 투명도 지원
   • gif: 비손실 압축, 8bit 색상만 지원, 파일내에 이미지 및 문자열 같은 정보를 저장, 여러장의 이미지를 한개에 파일에 담는것이 가능함.
     
     
2. 벡터(svg): 점,선, 면의 좌표, 색상 등 수학적 정보로 이루어진 이미로서 확대 및 축소에서 자유로우며 용량의 변화가 없다. 하지만 정교한 이미지를 표현하기에는 큰 어려움이 있다.
   • svg: 해상도에서 자유로움, css & js로 제어가 가능함, 파일 및 코드를 삽입할 수 있다.

• 오픈소스 라이선스
  자유롭게 이용할 수 있지만 상업적인 용도가 금지인 경우도 있기 때문에 꼭 라이선스를 확인해야함.
  • Apache License: 개인적 및 상업적 이용, 배포, 수정, 특허 신청이 가능함.
  • MIT License: 개인이 만든 소스에 라이선스를 사용하고 있다는 표시만 해주면 사용에 대한 제약은 없음.
  • BSD License: MIT와 조건은 동일함.
  • Beerware: 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스(만날 수 있을 경우만)

2. VS Code

• 확장 및 단축키
  • Auto Rename Tag: 태그를 수정시 뒤에 닫는 태그도 자동으로 수정해주는 확장자.
  • Ctrl+k+s: 켜져있는 파일을 모두 저장할 때 사용.
  • Ctrl+b: 탐색기를 닫는 단축키.
  • Ctrl+k+f: 원래는 Beautify라는 확장을 썼지만 지금은 사용할 수 없어서 이 단축키로 대체할 수 있음.
  • Shift+tab: 내여쓰기 할 때 쓰는 단축키.
  • Alt+up(키보드에서 위 화살표): 줄 위로 이동할 때 쓰는 단축키.
  • Alt+Shift+up: 위로 복사할 때 쓰는 단축키.
  • Alt+Shift+down: 아래로 복사할 때 쓰는 단축키.

3. HTML

3-1. HTML의 기본 구조 및 문법

• Doctype: html의 버전을 뜻함.
• html태그: html 문서의 전체 범위.
• head태그: 문서의 정보를 나타내는 범위.
• meta 태그: html 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공.
  • charset: 문자인코딩 방식
    
  • name: 정보의 종류
    
  • content: 정보의 값
    
  • viewport: 웹페이지가 출력되는 영역(모바일만 해당)
    
  • alt: 대체텍스트
• body태그: 문서의 구조를 나태내는 범위
  
  
• 기본적인 HTML문법

<태그>내용</태그>

• 부모요소와 자식요소

<div> <!-- 바로 밑에 태그에게는'부모요소', 그 밑에게는 상위(조상)요소'-->
	<div> <!--'자식요소'-->
    	<div></div> <!--'하위(후손)요소'-->
    </div>
</div>

• 빈태그

<태그 /> <!--뒤에 /를 붙혀주는게 좋음.-->

3-2. 글자와 상자

• 인라인(inline)요소: 글자를 만들기 위한 요소, 요소가 옆으로 쌓이며 포함한 콘텐츠 크기만큼 자동으로 줄어든다. 인라인요소 안에 블록요소를 넣는건 불가능하다. 또한 요소의 너비에는 반응하지않으며 여백을 줄 수 있는 margin, padding에는 반응한다.
  - 인라인(inline)요소의 예
  - span: 특별한 의미가 없이 구분을 위한 태그.
  - img: 이미지를 삽입하는 태그.
  - a: 다른 또는 같은 페이지로 이동하는 주소를 지정하는 태그.
  - br: 줄바꿈 태그.
  
  
• 블록(block)요소: 상자(레이아웃)를 만들기 위한 요소, 요소가 밑으로 쌓이며 부모 요소의 크기만큼 자동으로 늘어나며 포함한 콘텐츠만큼 자동으로 줄어든다. 블록요소에 블록요소를 넣는것도 가능하며 인라인요소를 넣는것도 가능함. 또한 인라인 여백뿐만 아니라 요서의 너비에도 반응한다.
  - 블록(block)요소의 예
  - div: 특별한 의미가 없이 구분을 위한 태그.
  - h1~h6: 제목을 의미하는 태그.
  - p: 문장을 의마하는 태그.
  
  
• input태그: 사용자가 데이터를 입력할 수 있는 태그.(인라인블록요소이다.)
  - type: 입력받을 데이터의 타입.
  - value: 미리 입력된 데이터.
  - placeholder: 사용자가 입력할 데이터의 힌트.
  - disabled: 입력 요소를 비활성화 하는 것.
  
  
• label태그: 라벨 가능 요소의 제목.(인라인요소이다.)
  • checked: 체크박스 입력 요소가 체크됨
  • name: 집합이란 이름의 그룹.

3-3. HTML의 전역속성

• title: 요소의 정보.

<태그 tltle="설명"></태그>

• style: 요소에 적용할 스타일을 지정.

<태그 style="스타일"></태그>

• class: 요소를 지칭하는 중복 가능한 이름.

<태그 class="이름"></태그>

• id: 요소를 지칭하는 고유한 이름.

<태그 id="이름"></태그>

• data: 요소에 데이터를 지정.

<태그 data-이름="데이터"></태그>

---

</ 1주차를 마치며>

HTML을 한번 더 정리한다는 생각으로 들었는데 강사님이 필요한부분만 알려주셔서 좋았고 쉽게 풀어서 설명해주셔서 이해하기도 좋았다.
강의를 들으면서 '내가 아직 모르고 있는게 많았구나....' 이런 생각을 하게되었다. 블로그에 정리하면서 더더 열심히 공부해야겠다!