※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.

프론트엔드 개발

: HTML, CSS, JS를 사용해 데이터를 GUI로 변환하고, 그것을 사용자와 상호 작용할 수 있도록 하는 것

HTML

: 페이지의 제목, 문단, 표, 이미지, 동양상 등의 웹의 구조를 담당하는 마크업 언어

CSS

: 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당하는 스타일 시트

JS

: 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당하는 언어

웹앱

= 웹 사이트, 홈페이지

  • 동작 과정
    • 주소 창에 페이지 주소 입력: 최초 요청(Request)
    • → 서버: 최초 응답<HTML>(Response)
    • → 브라우저: 추가 요청 → 서버: 추가 응답<CSS, JS, JPG 등>

웹 표준

: 웹에서 사용되는 표준 기술이나 규칙

크로스 브라우징

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

브라우저

  • 창
  • 탭
  • 주소 창
  • 뷰 포트: 하나의 웹 페이지가 출력되는(렌더링되는) 영역

웹 이미지

Bitmap(Raster)

: 픽셀이 모여 만들어진 정보의 집합

  • 정교하고 다양한 색상을 자연스럽게 표현
  • 확대/축소 시 계단 현상(이미지 깨짐), 품질 저하
  • 종류
    • JPG(.jpeg)
      • 손실 압축
      • 표현 색상도(24비트)가 뛰어남
      • 이미지의 품질과 용량을 쉽게 조절 가능
      • 가장 널리 쓰이는 이미지 포맷
    • PNG(.png)
      • Gif의 대체 포맷
      • 비손실 압축
      • 8비트/24비트 컬러 이미지 처리
      • JPG와 비교하여 용량이 큼
      • 투명도 지원
      • W3C 권장 포맷
    • GIF(.gif )
      • 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
      • 비손실 압축
      • 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
      • 8비트 색상 지원(다양한 색상 표현에는 적합하지 않음)
    • WEBP
      • JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
      • 완벽한 손실/비손실 압축 동시 지원
      • GIF 같은 애니메이션 지원
      • 투명도 지원
      • 나온 지 얼마 되지 않아 지원되는 브라우저 목록 확인해야 함

Vector

: 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지

  • 확대/축소에서 자유로움
  • 용량 변화가 없음
  • 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움
  • 종류
    • SVG(.svg)
      • 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
      • 해상도의 영향에서 자유로움
      • CSS, JS로 제어 가능
      • 파일 및 코드 삽입 가능

 

오픈 소스 라이선스

: 오픈 소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를, 누구나 접근해서 열람할 수 있도록 공개하는 것. 오픈 소스 라이선스는 이러한 오픈 소스에 대한 저작권

  • 종류
    • Apach License: 개인적/상업적
    • MIT License: 개인적/상업적, 사용하고 있다는 것만 명시
    • BSD License: 개인적/상업적, 사용하고 있다는 것만 명시
    • Beerware: 개인적/상업적
728x90
반응형

'패스트캠퍼스 FE 프로젝트십' 카테고리의 다른 글

[학습 블로깅] Javascript & Typescript  (1) 2024.04.21
[학습 블로깅] 실무 CSS  (0) 2024.04.21
[학습 블로깅] VS Code  (0) 2024.04.11
[학습 블로깅] Github  (0) 2024.04.11

티스토리툴바