간단히 말해 보내는 자원의 형식을 명시하기 위해 헤더에 실리는 정보이다. 이 값은 표준 mime-type중의 하나이다.
MIME-Type, Content-Type이란 무엇인가?
우리가 클라이언트 브라우저로 어떤 자원을 보낼때(어떤 형태의 파일이나 문서 등), 웹 서버는 일련의 HTTP 헤더로 파일이나 자원을 포함하는 바이트의 Stream을 앞에 보낸다. 이런 헤더는 클라이언트에게 웹 서버와 커뮤니케이션 세부사항을 묘사한다. 예를 들어, 헤더는 사용되고 있는 웹 서버의 소프트웨어의 타입, 서버의 날짜와 시간, HTTP 프로토콜, 사용중인 커넥션 타입등을 지정한다. 헤더는 또한 클라이언트가 이런 가상 패스나 도메인에 대해서 저장해야 할 쿠키를 포함한다.
이와 관련해서 가장 중요한 것은 헤더는 또한 보내지는 자원의 content 타입이 포함되는 것이다. 이것은 Content-Type 헤더에 의해 지정되는데, 이 값은 표준 MIME-Type의 하나이다. MIME-Type을 살펴봄으로써 브라우져는 데이터를 나타내는데 어떤 종류의 파일 Stream인지를 알고 있다. HTML 페이지에 MIME-Type을 가진다.
- Content-Type: multipart/related: MIME E-mail <-- Defined in RFC 2387 and used by MHTML(HTML mail)
- Content-Type: multipart/formed-data <-- 파일 첨부
6) TEXT 타입
- Content-Type: text/css
- Content-Type: text/html
- Content-Type: text/javascript
- Content-Type: text/plain
-Content-Type: text/xml
7) file 타입
- Content-Type: application/msword <-- doc
- Content-Type: application/pdf <-- pdf
- Content-Type: application/vnd.ms-excel <-- xls
- Content-Type: application/x-javascript <-- js
- Content-Type: application/zip <-- zip
- Content-Type: image/jpeg <-- jpeg, jpg, jpe
- Content-Type: text/css <-- css
- Content-Type: text/html <-- html, htm
- Content-Type: text/plain <-- txt
- Content-Type: text/xml <-- xml
- Content-Type: text/xsl <-- xsl
++)
Content-Type: Application/octet-stream
application/octet-stream는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 사용자를 위험한 동작으로부터 보호하도록 개별적인 주의를 기울여야 합니다.
이 타입은 이진 파일을 위한 기본값입니다. 이 타입은 실제로 잘 알려지지 않은 이진 파일을 의미하므로, 브라우저는 보통 자동으로 실행하지 않거나 실행해야 할지 묻기도 합니다. Content-Disposition 헤더가 값 attachment와 함게 설정되었고 'Save As' 파일을 제안하는지 여부에 따라 브라우저가 그것을 다루게 됩니다.
사용 예)
파일 다운로드 기능에서는 파일 타입(형식)을 일일이 명시할 수 없기에임의의 파일 타입 형태인, application/octet-stream으로 설정해준다.
한 눈에 그림으로 보니까 border를 어떻게 해주느냐에 따라 어떤 차이가 있는지 딱 보이죠?
[1] table { border: 1px solid red; } <!--1px :선의 굵기 solid: 선 종류 red: 선 색깔 -->
[2] td { border: 1px solid red; }
<!--테이블은 이렇게 하나의 데이터를 각각 감싸는 게(separate) 기본 설정이라 따로 collapse 속성을 설정해주지 않으면
이와 같이 나옵니다. 이렇게 겹치는거 보기 싫고 한줄로 깔끔하게 보여지고 싶다면 [3]-->
[3] table { border-collapse : collapse } td { border: 1px solid red; }
[1] 첫 번째는 테이블에다가 테두리설정을 해준거라 맨 겉에만 됨.
[2] 두 번째는 th에는 테두리가 없는데 td에만 테두리가 있는걸로 보아 td에 border 속성을 넣어준거죠.
[3] 근데 이렇게 겹쳐ㅣ는게 싫을 경우 border-collapse옵션을 사용합니다.
[4] 열 선 없이 행에다가만 적용 [5] td에다가 bottom으로 적용했을 경우 저렇게 공백이 생김 [6] tr에다가만 적용
신기(?)한 사실은 [4]그림처럼 열[column] 선 없이 행에다가만 border를 적용하고 싶어서
tr { border: 1px solid red; } 이렇게 tr에다가 border css를 적용하려고 하면 먹지 않습니다.
그래서 tr이 아닌 td에다가 (border하면 열[column] 선까지 포함되므로) bottom만 적용하는 코드로 구현하면 [5]그림처럼 data사이의 간격에 선이 이어지지 않고 잘려요
[5] td { border-bottom: 1px solid red; }
그래서 tr에 적용을 해주는게 좋은데 tr의 경우 separate model일 경우에는 border속성이 적용되지 않습니다.
아래 코드처럼 테이블 태그를 separate가 아닌 collapse 속성으로 변경 후 border속성을 적용시켜줘야 제대로 작동합니다.
first-child는 nth-child(1)과 동일합니다. 이런식으로 선별적으로 배경색을 줄 수 있어요. [2-5]그림 추가적으로 참조!
표 간격 이쁘게2 -- 행(row)
근데 열뿐만 아니라 행사이에서도 너무 글자크기만큼만 행이 크면 답답해보이잖아요
padding을 주고 싶은데 tr에는 또 얘가 안먹습니다..ㅎ
예전에는 padding이 tr을 포함해서 모든 element에 적용이 됐다고 해요 근데 복잡한 어떤 구조때문인지 padding이 안먹히게 바뀌었고 그것 때문에 생긴 불편함으로 논란이 많았지만,, 안먹히는걸로 결론이 난 상태입니다 (자세한 얘기 아시는분은 알려주시면 감사하겠음..) 그래서 내부 간격을 위해 우리는 td에다가 padding을 적용할거~
[2-8] [2-9] border로 명확히 보기
좀 간격이 달라진게 보이죠? [2-8]은 td{ padding : 15px 5px 10px 5px; } 이렇게 적용한 결과입니다
padding : 위 오른 밑 왼 (시계 방향으로 간격을 준다고 생각하면 돼요
좀 더 확실히 확인하고 싶으면 [2-9]처럼 border를 일부로 줘서 어떻게 늘어나는지 확인하면 좋은 복습이 될 듯 합니다.
