웹 동작방식 / 웹 표준 / 이미지 / 특수 기호 명칭

🔍 웹 애플리케이션의 동작방식

1.  사용자가 주소창에 주소를 입력합니다.
  2.  해당 사이트에 맞는 주소로 서버에 최초의 요청이 들어갑니다. (Request)
  3.  서버에서는 요청이 들어온 사용자의 브라우저로 HTML을 포함한 최초의 응답을 주게 됩니다. (Response)
  4.  추가로 작성된 여러 css파일, js파일, 이미지파일 등 새로운 파일을 서버에 추가적으로 요청합니다.
  5.  서버는 추가로 요청된 정보들을 응답합니다.

로컬(웹 사이트를 개발한 환경)에서 개발한 웹페이지를 사용자들이 접속하게 하려면 서버에 저장되어야 합니다
즉, 우리가 만든 사이트를 서버에 업로드하고 주소를 설정하면 사용자가 해당 주소로 접근하여 우리가 만든 웹사이트가 보여지는 것입니다.

🔑 웹 표준

웹 표준이란 웹에서 사용되는 표준 기술이나 규칙을 의미합니다.
표준에 기반하여 웹사이트를 제작하면 브라우저 공급 업체(ex. 구글, 엣지, 사파리 등)에서도 제정된 웹 표준을 근거하여 브라우저를 제작합니다.
하지만 공급 업체에 따라 여러 브라우저가 조금씩 다르게 구동되는데 동일한 사용자 경험을 제공하기 위한 기술을 크로스 브라우징 이라고 부릅니다.

🎨 웹에서 사용하는 이미지

• 비트맵 : 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster)이미지라고도 부름, 정교하고 다양한 색상 표현, 확대/축소 시 계단 현상, jpg, png등이 비트맵 이미지로 일반적인 사진이나 그림은 비트맵이 훨씬 효과적
  • JPG(JPEG) : 압축률이 좋아 예술 분야에서 많이 사용됨, 이미지가 조금씩 손실되면서 압축되기 때문에 용량이 줄어듬, 이미지를 반복적으로 새롭게 저장하는 것을 피해야 함, 표현 색상도는 24비트
  • PNG : Gif의 대체 포맷으로 개발, 비손실 압축으로 JPG에 비해 비교적 용량이 큼, 8비트와 24비트 동시 지원, 투명도 지원
  • Gif : 이미지 파일 내에 이미지 및 문자열 등의 정보를 저장, 움짤 또는 애니메이션 효과 가능, 8비트 지원
  • WEBP : JPG, PNG, Gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷, 손실/비손실 압축과 애니메이션과 투명도 모두 지원, 지원되는 브라우저 목록 반드시 확인
• 벡터 : 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지, 확대/축소 자유로움, 정교한 이미지 표현 어려움, 단순 구조의 아이콘이나 로고가 벡터 이미지로 관리하기 용이, 벡터 이미지의 확장자는 svg
  • SVG : 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷, 해상도 영향에서 자유로움, css와 js로 제어 가능, 파일 및 코드 삽입 가능

📕 특수 기호 명칭

• ` : 백틱(backtick), 그레이브(grave)
• ~ : 틸드(tilde), 물결 표시
• ! : 느낌표, 엑스클러메이션 마크(exclamation mark)
• @ : 골뱅이, 앳 사인(at sign)
• # : 우물 정, 샵(sharp), 넘버 사인(number sign)
• $ : 달러 사인(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), 꺽쇠