[카테캠]FE week 1 (1)

드디어 시작한 카카오 테크 캠퍼스 1기 !
FE 1주차는 HTML & CSS이다.
TIL 작성하며 벨로그에도 간단하게 작성해야겠다.

• Ch 1. 개요
  • 프론트엔드 개발이란 데이터를 GUI로 변환하여 사용자와 상호 작용할 수 있도록 하는 것.
  • HTML (Hyper Text Markup Language) 웹의 구조를 담당. (기획자)
  • CSS (Cascading Style Sheets) 정적인 시각적인 표현 색상, 크기, 폰트, 레이아웃 등 담당. (디자이너)
  • JS (JavaScript) 페이지를 동작시키는 동적 처리를 담당 (개발자)
  • 크로스 브라우징이란 각각 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술
  • 웹 이미지는 비트맵과 벡터로 구분하여 사용한다.
    • 비트맵 (bitmap) 정교하고 다양한 색상을 자연스럽게 표현, 확대-축소 시 품질 저하.
      • JPG 손실 압축방식 사용 (반복된 저장 피하기)
      • PNG 비손실 압축 투명도 지원 (누끼)
      • GIF 비손실 압축 애니메이션, 움짤 지원
      • WEBP 손실-비손실 압축 동시 지원 애니메이션 지원 투명도 지원 (IE 지원불가)
    • 벡터 (Vector) 확대-축소시 자유롭고 용량 변화 없음. 정교한 이미지 표현 어려움.
      • SVG (HTML/XML) 기반 벡터, 해상도의 영향에서 자유로움 (아이콘 등에 자주 사용)
  • 오픈 소스 라이선스
    • Apache License : 개인적/상업적 이용,배포,수정,특허 가능
    • MIT License : 라이선스를 사용하고 있는 것을 표시해야함.
    • BSD License : 라이선스를 사용하고 있는 것을 표시해야함.
    • Beerware : 무료로 해석할 수 있음.
• Ch 2. VS Code
  • 파일명 소문자 관리
  • 확장 프로그램 (플러그인) 유연하게 설치
  • Auto Rename Tag 설치
  • Live Server 설치
  • 권장 공백 space 2
• Ch 3. 무작정 시작하기
  • Doctype(Document Type Definition)
    • 문서의 HTML 버전을 지정.
    • DOCTYPE html 현재 HTML5(표준)
  • 기본적인 태그
    • html 문서의 전체 범위
    • head 문서의 (보여지지 않는) 정보를 나타내는 범위
    • body 문서의 (보여지는) 구조를 나타내는 범위
  • CSS, JS 연결
    • link 태그로 .css 파일과 html 파일을 연결
    • script 태그로 .js 파일 연결
    • html 태그의 lang 속성으로 파일의 사용 언어를 전제
  • 태그 살펴보기
    • title HTML 문서의 제목을 정의. 브라우저 탭에 표시됨.
    • link css, png 등 외부 문서를 가져와 연결할 때 사용.
      • rel(관계)속성 : stylesheet (css), icon (png)
      • href 속성 : 외부 문서를 가져올 위치 정보.
    • style HTML 문서 내에 직접적으로 css 작성시 사용.
    • script
      • src 속성 : JS 파일을 외부에서 가져오는 경우 경로 작성.
      • 속성 미사용시 JS를 HTML 문서 내 작성시 사용.
    • meta 제작자, 내용, 키워드 같은 정보를 브라우저 혹은 검색 엔진에 제공
      • name 속성 : 정보의 종류를 나타냄
      • content 속성 : 정보의 값
      • charset 속성 : 문자 인코딩 방식 UTF-8
  • 화면에 이미지 출력하기
    • 프로젝트의 최상위 경로에 index.html 위치하기.
    • images, css, js 등 여러 개의 문서를 가져올 경우 디렉토리 단위로 관리
    • img 태그
      • src 속성 : 이미지의 경로 설정
      • alt 속성 : 대체 텍스트 설정 (필수)
  • 상대 경로와 절대 경로
    • ./ (상대 경로) 현재 위치의 주변을 의미, 생략 가능
    • ../ (상대 경로) 상위 디렉토리의 위치로 올라가는 경로
    • http or https (절대 경로)
    • / (절대 경로) 최상위 경로
    • 상황에 따라 효율적인 경로를 설정하여 사용하기.
  • 페이지 분리와 연결
    • a 태그 : anchor태그
      • href 속성에 있는 경로로 이동.
  • 모든 파일 공백 크기 설정
    • vscode tab size 2로 설정
  • 개발자 도구 사용하기
    • Elements : 영역의 요소를 코드와 적용된 CSS 코드를 확인할 수 있고 임시 수정 가능
      • 웹 사이트 코드 분석 및 흐름 파악에 유용.