[웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란?

[웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란?

반응형

 

---

1. 크로스 브라우징

 

• 내가 만든 웹 페이지가 모든 브라우저에서 내가 설계한 방향대로 보여지게 하는 것
• 크로스 브라우징을 가능하게 하려면 W3C가 제정한 국제 표준인 웹표준을 만족해야 함
• 인터넷 익스플로러는 웹표준을 만족하지 않으므로 크로스 브라우징이 불가능하다. (2020년 8월 서비스는 종료되었으나, 예전에 설계한 웹페이지는 종종 익스플로러 환경으로 대응해야 하는 경우가 있음)

 

반응형

 

---

 

2. 뷰포트 

• 하나의 웹 페이지가 표시되는 전체 영역을 의미함
• 렌더링 : 브라우저의 뷰포트에 웹사이트를 출력하는(보여주는) 행위를 의미함

 

반응형

 

---

 

3. 비트맵과 벡터의 차이

 

• 비트맵

       - 픽셀 단위의 정사각형 조각들이 모여 정보를 시현함

       - 정교하고 다양한 색상을 자유롭게 표현가능하나, 확대시 깨짐 

       - 확장자 : .jpg, .png, .webp 파일

 

• 벡터

        - 점, 선, 면의 좌표를 수학적 정보의 형태(Shape)로 이미지를 시현함

        - 확대해도 안깨짐, 용량 변화가 없음, 정교한 이미지(인물,풍경,사진 등) 표현 불가

        - 로고나 심플한 픽토그램등에 활용

        - 확장자 : .svg 파일

 

반응형

 

 

---

4. WEBP 확장자

• JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
• 완벽한 손실/비손실 압축 지원
• GIF 등 움짤(애니메이션) 지원
• Alpha Channel(바탕색 없음) 지원
• IE를 제외한 모든 브라우저에서 사용 가능함 (하위호환성 굿)

 

반응형

 

---

 

5. svg 확장자

• HTML/XML 등 마크업언어 기반의 벡터 그래픽을 표현하는 포맷
• 해상도의 영향에서 자유로워 확대/축소 가능
• CSS, JS로 제어 가능하며 파일 및 코드 삽입이 가능함 (정적 동적 행위 부여 가능) → 웹 페이지 제작에 주로 쓰임