안녕하세요 제로초님 3:25초경에 해당하는 주소에 들어가서 css... - 인프런

Slack 클론 코딩[실시간 채팅 with React]

회원가입 페이지 만들기

안녕하세요 제로초님 3:25초경에 해당하는 주소에 들어가서 css 파일로 만들어서 html에 연결했는데 css파일에서 오류가 발생했습니다.

작성

안녕하세요 제로초님 3:25초경에 해당하는 주소에 들어가서 css 파일로 만들어서 html에 연결했는데 css파일에서 오류가 발생했습니다.

css 파일 내에서 only속성 때문에 오류가 발생하는데요.. 

아래는 html 파일과 css 파일입니다.

html 파일은 강의에서 말씀하신대로 슬랙에 들어가 현재에 맞게 아이콘 코드를 바꿔주었습니다.

그래도 적용이되지 않아서 파일로 만드려고 해당하는 주소에 들어가서 css 파일 내용을 복사했는데 어디가 문제인지 모르겠습니다.

babel Socket.io 웹팩 typescript react 클론코딩

답변 7

yjym33

질문자

오늘기준으로 최신 해쉬 적용한 전체 소스코드 입니다.

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>슬리액</title>
    <style>
      html, body {
          margin: 0;
          padding: 0;
          overflow: initial !important;
      }
      body {
          font-size: 15px;
          line-height: 1.46668;
          font-weight: 400;
          font-variant-ligatures: common-ligatures;
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
      }
      * {
          box-sizing: border-box;
      }
    </style>
    <link rel="stylesheet" href="https://a.slack-edge.com/bv1-9/client-boot-styles.62c1ab0.css?cacheKey=gantry-1613184053" crossorigin="anonymous" />
    <link rel="shortcut icon" href="https://a.slack-edge.com/cebaa/img/ico/favicon.ico" />
    <link href="https://a.slack-edge.com/bv1-9/slack-icons-v2-16ca3a7.woff2" rel="preload" as="font" crossorigin="anonymous" />
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/app.js"></script>
  </body>
</html>

제로초(조현영)

지식공유자

]client-boot-styles 에서 css를 제공합니다.

클래스가 이렇게 전부 있어야 화면에 표시됩니다.

yjym33

질문자

오늘 기준으로 슬랙에있는 최신 해쉬가 62c1ab0 이여서 적용해봤는데 안됩니다.

제로초(조현영)

지식공유자

브라우저 뭐 쓰시나요?? editor.maxTokenizationLineLength 이 에러는 그냥 에디터상에서만 에러인 것 같긴 합니다.

yjym33

질문자

크롬 브라우저 사용하고 있습니다.

yjym33

질문자

그리고 위의 css 에서 발생한 오류는

"성능상의 이유로 긴 줄의 경우 토큰화를 건너뜁니다. 이 항목은 'editor.maxTokenizationLineLength'를 통해 구성할 수 있습니다."

( expected css(css-lparentexpected)

라고 나와있습니다

yjym33

질문자

현재 위의 오류는 수정된 상태이지만, 똑같이 아이콘은 계속 나오지 않네요..

강의에서 말씀해주신대로 슬랙에가서 아이콘에 있는 코드 적용해봐도 동일합니다..

yjym33

질문자

css 파일을 따로 만들어서 적용했었는데 오류가 나서 지웠습니다. 그리고 제로초님이 주신 링크에 들어가서 헤더부분에 있는 위 링크들 적용했습니다.

yjym33

질문자

위에서 알려주신 링크에 있는

 <link rel="stylesheet" href="https://a.slack-edge.com/bv1-9/client-boot-styles.293c5a4.css?cacheKey=gantry-1613184053" crossorigin="anonymous" />

 <link href="https://a.slack-edge.com/bv1-9/slack-icons-v2-16ca3a7.woff2" rel="preload" as="font" crossorigin="anonymous" />
 

yjym33

질문자

모두 적용하였는데 적용이 되지 않습니다.. ㅠㅠ

콘솔창에서는 다음과 같은 오류를 뱉어냅니다.

Refused to apply style from 'http://localhost:3090/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

ps. 아 css 파일 연결해놓은 코드가 있어서 지웠는데 그래도 적용이 안되네요..

제로초(조현영)

지식공유자

style.css 파일을 따로 만드셨나요? 어디에 들어있나요?