6. 스타일 시트 문제 해결하기

nginx의 설정 파일을 수정하여 스타일 시트를 제대로 응답할 수 있도록 적용

types 블록

파일 확장자에 따라 Content-Type 헤더(MIME 타입) 를 자동으로 지정하기 위한 Nginx의 .conf 파일 설정 문법
types 블록은 HTTP 응답 시, 정적 파일의 확장자에 따라 Content-Type을 결정하는 데 사용됨

Ex.
index.html을 요청할 경우 Nginx는 Content-Type: text/html을 응답 헤더에 추가하여 응답
style.css를 요청할 경우 Content-Type: text/css를 응답 헤더에 추가하여 응답

구문 작성 구조

.conf


types {
    <MIME 타입> <확장자1> <확장자2> ...;
}

types 블록을 통해 스타일 시트 문제 해결

nginx.conf


events {}
 
http {
 
    types {
        text/html html;
        text/css css;
    }
 
    server {
        listen 80;
 
        server_name localhost;
 
        root /nginx-test;
        index index.html;
    }
}

설정 파일 재적용

terminal


nginx -s reload

실행 결과

→ CSS가 잘 적용된 것을 확인할 수 있음

curl을 통해 테스트

terminal


curl -I localhost/style.css

실행 결과

terminal


HTTP/1.1 200 OK
Server: nginx/1.26.2
Date: Sun, 12 Jan 2025 05:03:46 GMT
Content-Type: text/css # Content-type이 text/css로 적용됨
Content-Length: 521
Last-Modified: Sun, 12 Jan 2025 04:59:04 GMT
Connection: keep-alive
ETag: "67834c18-209"
Accept-Ranges: bytes