웹 기본 #2

5. 웹에서 사용하는 이미지

출처 : HEROPY Tech

1) 비트맵(Bitmap)

• 픽셀이 모여 만들어진 정보의 집합 = 레스터(Raster) 이미지

• 👍🏻 정교하고 다양한 색상을 자연스럽게 표현
  👎🏻 확대/축소 시 계단 현상, 품질 저하

  • 1) JPEG : 손실압축으로 용량 쉽게 조절 가능+표현색상 훌륭 -> 사진, 예술 분야에서 많이 사용
  • 2) PNG : gif의 대체 포맷으로 개발됨 / 비손실압축으로 용량 비교적 큼 / 가장 큰 특징은 Alpha Channel 지원(투명도) / W3C 권장 포맷
  • 3) GIF : 이미지 파일 내 이미지 및 문자열 같은 정보들을 저장 / 비손실압축 / 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션) / 8비트 색상만 지원하므로 다양한 색상 표현에는 부적합
  • 4) WEBP : JPG, PNG, GIF 모두 대체할 수 있는 구글이 개발한 이미지 포맷 / 완벽한 손실&비손실 압축+애니메이션+Alpha Channel 지원 / 비교적 최근 출시해 IE는 지원불가 -> 하위호환성 확인 필요

2) 벡터(Vector)

• 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지
• 👍🏻 확대/축소에서 자유롭고 용량 변화 없음
  👎🏻 정교한 이미지(인물, 풍경 사진 등)를 표현하기 어려움
  • SVG : 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷 / 코드로 되어있어 -> CSS와 JS로 제어 가능, 파일 및 코드 삽입 가능

🌟 필요에 따라 알맞은 포맷 사용해야 함! 🌟
(일반적으로 사진, 그림은 비트맵 / 아이콘,로고 등 머터리얼 디자인의 이미지는 벡터)

6. 특수 기호

• ` 백틱(Backtick)=그레이브(Grave)
• ~ 틸드(Tilde)=물결표시
• ! 엑스클러메이션(Exclamation mark)=느낌표
• @ 앳(At sign)=골뱅이
• ^ 캐럿(Caret, ~이상을 표현할 때 사용)
• & 엠퍼센드(Ampersand)
• * 에스터리스트(Asterisk)=별표
• - 하이픈(Hyphen)=대시(Dash)=마이너스
• _ 언더스코어(Underscore)=로대시(Low dash)=밑줄
• " 쿼테이션(Quotation mark)=큰따옴표
• ' 아포스트로피(Aprostrophe)=작은 따옴표
• : 콜론(Colon)
• ; 세미콜론(Semicolon)
• , 콤마(Comma)=쉼표
• . 피리어드(Period)=닷(Dot)=점=마침표
• / 슬래시(Slash)
• | 버티컬 바(Vertical bar)
• \ 백슬래시(Backslash)=역슬래시
• ()퍼렌서시스(Parenthesis)=소괄호=괄호
• {} 브레이스(Brace)=중괄호
• [] 브래킷(Bracket)=대괄호
• <> 앵글 브래킷(Angle Bracket)=꺽쇠괄호

7. 오픈소스 라이선스

• 오픈소스 : 어떤 제품을 개발하는 과정에 필요한 소스코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것 (저작권은 여전히 존재)
  ⭐ 오픈소스 이용 시 ‘상업적 이용 가능’ 등 사용 방식 관련 문구 정확히 확인해야 함 OpenSource.org

• 무료 License

  • Apache License : 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스 / 개인적,상업적 이용, 배포, 수정, 특허 신청 가능
  • MIT License : 매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스 / 개인 소스에 이 라이선스 사용하고 있다는 표시만 해주면 됨
  • BSD License : 버클리 캘리포니아 대학에서 개발한 라이선스 / MIT와 동일 조건
  • Beerware : 오픈소스 개발자에게 맥주 사줘
  • 대부분의 프로젝트에서는 자동으로 오픈소스가 같이 빌드되기 때문에 따로 관리할 필요 없음 ❗

💬 머터리얼 디자인(Material Design) : 고품질 디지털 경험을 구축할 수 있도록 구글에서 만든 디자인 시스템(방식)