반응형
snowman95
코딩수련장
snowman95
전체 방문자
오늘
어제
  • 분류 전체보기 (230)
    • 앱테크 (3)
    • 옵시디언 (5)
    • 드라마, 영화 (1)
    • 개발자 이야기 (24)
    • 프로젝트 (10)
      • 프로젝트 방법론 (7)
      • 프로젝트 기록 (2)
      • Github (1)
    • 개발 지식 (0)
      • 디자인 패턴 (0)
    • 프론트엔드 개발 (5)
      • 테크트리 (2)
      • React.js (19)
      • ReactNative (2)
      • Next.js (6)
      • GraphQL (6)
      • 패키지 매니저 (2)
      • 라이브러리 (3)
      • 상태관리 라이브러리 (4)
      • Web 지식 (3)
      • HTML CSS (26)
      • Javascript (16)
      • 도구 (Tool) (3)
      • 성능 최적화 (1)
      • 디자인시스템 (0)
    • Python (53)
      • 모음집 (1)
      • 문법 (12)
      • 라이브러리 (15)
      • 알고리즘 (10)
      • 백준 문제풀이 (9)
      • 코딩테스트 (2)
      • 도구 (Tool) (3)
    • C++ (20)
      • 알고리즘 (6)
      • 삼성SW기출 (6)
      • 삼성 A형 (6)
    • 데이터사이언스 (1)
    • 인프라 (9)
      • 하드웨어 지식 (4)
      • Ansible (2)
      • Database (2)
      • 쉘스크립트 (1)
    • 주식 (0)
    • 취업 준비 (4)
      • 취업 이야기 (0)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 티스토리챌린지
  • 삼성SDS
  • 오블완
  • 언어
  • 기계식키보드 #nuphy
  • 삼성SW역량테스트
  • 알고리즘
  • 백준
  • 전공요약
  • 나의 해방일지
  • 전공 요약 #데이터베이스
  • 개발자취업시장
  • 면접
  • 전공 요약 #네트워크
  • A형
  • 개발자이직회고
  • C++
  • 25년도채용시장
  • Next.js #graphql #tailwind.css
  • 개발자이직

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
snowman95
프론트엔드 개발/HTML CSS

MIME-Type, Content-Type 이란?

MIME-Type, Content-Type 이란?
프론트엔드 개발/HTML CSS

MIME-Type, Content-Type 이란?

2021. 5. 23. 15:24
728x90
반응형

MIME


MIME 이란?

Internet media type as defined by Multipurpose Internet Mail Extensions 

전자우편을 위한 인터넷 표준 포멧이다.

바이너리 데이터를 ASCII 텍스트 형식으로 변환(인코딩)하기 위한 방법을 정의한다.

 

 

MIME 사용하는 이유?

옛날 전자우편은 ASCII파일 (ASCII 공통 표준 따르는 텍스트 파일) 전송만 가능했다.

그런데 바이너리 파일(음악,동영상,워드 파일) 전송이 필요졌고 이를 전자우편으로 전송하기 위해 개발되었다.

MIME 표준에 정의된 Content-Type들은 HTTP 통신에서 전송 데이터를 표현할때도 사용된다.

 

 

어떻게 타입을 알려주는데?

MIME으로 인코딩 한 파일은 데이터의 종류를 알려주는 Content-Type 정보를 파일 앞부분에 담는다.

브라우저의 경우 응답/요청시 HTTP 메시지의 헤더에 정보를 담아서 보내게 되는데

이 헤더에 Content-Type 정보를 담아서 어떤 데이터 종류인지 알려준다.

 

 

MIME-Type 구조

type/subtype 로 구성된다. (전통적으로 소문자 사용)

type은 1.개별 혹은 2.멀티파트 타입이 될 수 있다.

 

1. 개별파트

  • text : 텍스트를 포함한 모든 문서 (인간 readable)
  • image : 모든 종류의 이미지 (gif 포함)
  • audio : 모든 종류의 오디오 파일
  • video : 모든 종류의 비디오 파일
  • application : 모든 종류의 바이너리 데이터

 

기본 타입에 있어 중요 역할을 하는 주요 MIME-Type

  • text/plain
    서브타입이 없는 텍스트 파일을 위한 기본값
    서브타입이 있는 파일은 서브타입 명시되어야 올바르게 감지함.
  • application/octet-stream
    서브타입 없는 바이너리 데이터/문서의 기본값
    알려지지 않은 파일 타입은 이 타입을 사용해야 합니다.
    웹브라우저가 실행여부를 묻기도 하는데 content-Disposition 헤더가 값 attachment와 함께 설정되었고 'Save As'파일을 제안하는지 여부에 따로 브라우저가 그것을 다루게 된다.

 

2. 멀티파트 타입

합성된 문서를 나타내는 방법이다. 

  • multipart/form-data (보통 서버로 데이터 보낼때 사용)
    브라우저→서버로 HTML Form 내용을 전송 시 사용가능. 경계(이중대시 --로 시작되는 문자열)로 구분되는 다른 파트들로 구성된다. 각 파트는 자체로 개체이며, 자신만의 HTTP 헤더 가짐.
    ex) 파일업로드 필드를 위한 헤더인 Content-Disposition, 가장 일반적인 Content-Type)
    Content-Type: multipart/form-data; boundary=aBoundaryString
    (other headers associated with the multipart document as a whole)
    
    --aBoundaryString
    Content-Disposition: form-data; name="myFile"; filename="img.jpg"
    Content-Type: image/jpeg
    
    (data)
    --aBoundaryString
    Content-Disposition: form-data; name="myField"
    
    --aBoundaryString--
  • multipart/byteranges
    브라우저로 회신하는 부분적인 응답 전송의 context 내에서 사용된다.
    206 Partial Content 상태 코드가 전송된 경우, MIME 타입은 문서가 각각의 요청된 범위 중 하나인 몇 가지 파트로 구성되어 있음을 알리기 위해 사용된다.
    boundary 디렉티브를 통해 경계선 문자열 정의한다.
    각각 다른 파트들은 문서 타입을 나타내는 Content-Type 헤더와 범위를 나타내는 Content-Range를 가짐
    HTTP/1.1 206 Partial Content
    Accept-Ranges: bytes
    Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
    Content-Length: 385
    
    --3d6b6a416f9b5
    Content-Type: text/html
    Content-Range: bytes 100-200/1270
    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="vieport" content
    --3d6b6a416f9b5
    Content-Type: text/html
    Content-Range: bytes 300-400/1270
    
    -color: #f0f0f2;
            margin: 0;
            padding: 0;
            font-family: "Open Sans", "Helvetica
    --3d6b6a416f9b5--​
     

MIME-Type 전체 목록

  • application
  • audio
  • font
  • example
  • image
  • message
  • model
  • multipart
  • text
  • video
반응형
저작자표시 동일조건 (새창열림)

'프론트엔드 개발 > HTML CSS' 카테고리의 다른 글

HTML - 이미지, 오디오, 비디오, 링크 삽입  (0) 2021.05.30
HTML - HTML 태그 (목록, 표)  (0) 2021.05.30
HTML - HTML 태그 (제목, 단락, 인용구, 서식)  (0) 2021.05.30
HTML - 기본 구조, 태그  (0) 2021.05.26
DOM (문서 개체 모델) 이란?  (0) 2021.05.23
  • MIME
  • MIME 이란?
  • MIME 사용하는 이유?
  • 어떻게 타입을 알려주는데?
  • MIME-Type 구조
  • MIME-Type 전체 목록
'프론트엔드 개발/HTML CSS' 카테고리의 다른 글
  • HTML - HTML 태그 (목록, 표)
  • HTML - HTML 태그 (제목, 단락, 인용구, 서식)
  • HTML - 기본 구조, 태그
  • DOM (문서 개체 모델) 이란?
snowman95
snowman95
(17~19) Unity/Unreal Engine 게임 프로그래머 (20~21) System Administrator ___________ (22~) React 웹 프론트앤드 개발자 __________ 깃헙 : https://github.com/snowman95

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.