반응형
크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널
경매하는 개발자
크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널
전체 방문자
오늘
어제
  • 분류 전체보기 (329)
    • IT (128)
      • 아두이노 (6)
      • C C++ (17)
      • C C++ 컴파일 에러 (3)
      • LINUX (3)
      • Git (1)
      • OpenGL (0)
      • IT 상식 (38)
      • EXCEL & VBA (9)
      • 정보처리기사 (20)
      • 무작정 웹사이트 만들기 (6)
      • 포토샵 (3)
      • 파이썬 & vscode (16)
      • 머신러닝 & 인공지능 & 데이터사이언스 (5)
    • 부동산 (91)
      • 부동산일반 (31)
      • 세금 (6)
      • 경매 (46)
      • 법, 소송 (8)
    • 개인사업자 (43)
      • 할 일 (11)
      • 꿀팁 (9)
      • 세금 (14)
      • 지원사업 (8)
    • 독후감 (25)
      • 독후감 (25)
    • 경제 (4)
      • 거시경제 (4)
    • Tistory (34)
      • 티스토리 (23)
      • 애드센스 (11)
    • 기타 (4)
      • 에세이 (2)
      • 퇴사준비 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 개인사업자
  • 경매
  • 부의추월차선요약
  • 부의추월차선리뷰
  • 애드센스
  • 세금계산서
  • 공매
  • 온비드공매
  • 부의추월차선독후감
  • 부의추월차선서평
  • 일반과세자
  • 전자세금계산서
  • 온비드공인인증서
  • 온비드공동인증서
  • 티스토리애드센스
  • 부의추월차선
  • 부가가치세
  • 부의추월차선줄거리
  • 확정일자
  • 전입신고

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널

경매하는 개발자

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

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

2022. 10. 18. 22:53
반응형

[웹사이트 만들기-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로 제어 가능하며 파일 및 코드 삽입이 가능함 (정적 동적 행위 부여 가능) → 웹 페이지 제작에 주로 쓰임

 

반응형

'IT > 무작정 웹사이트 만들기' 카테고리의 다른 글

[웹사이트 만들기-6] CSS 문법 종류  (0) 2022.11.12
[웹사이트 만들기-5] HTML 태그 종류  (0) 2022.11.12
[웹사이트 만들기-4] HTML, CSS, JS 구조  (0) 2022.11.12
[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키)  (1) 2022.11.12
[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할  (0) 2022.10.17

    크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널

    'IT/무작정 웹사이트 만들기' 카테고리의 다른 글
    • [웹사이트 만들기-5] HTML 태그 종류
    • [웹사이트 만들기-4] HTML, CSS, JS 구조
    • [웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키)
    • [웹사이트 만들기-1] HTML, CSS, JavaScript의 역할
    크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널
    크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널
    크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널입니다.

    티스토리툴바