Cộng đồng Hỏi & Đáp của Inflearn

yjym33

câu hỏi đã được viết

Clone coding Slack [Chat thời gian thực với React]

Tạo trang đăng ký

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

Viết

1.3K

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

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

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

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

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

babelSocket.io웹팩typescriptreact클론코딩

Quiz

여러 컴포넌트에서 반복되는 상태 관리 로직을 재사용하기 위해 만드는 것은 무엇일까요?

클래스 컴포넌트

Higher-Order Component

커스텀 훅

render prop 패턴

Câu trả lời 7

yjym33

Người đặt câu hỏi

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

<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>

zerocho

Người chia sẻ kiến thức

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

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

yjym33

Người đặt câu hỏi

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

zerocho

Người chia sẻ kiến thức

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

yjym33

Người đặt câu hỏi

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

yjym33

Người đặt câu hỏi

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

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

( expected css(css-lparentexpected)

라고 나와있습니다

yjym33

Người đặt câu hỏi

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

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

yjym33

Người đặt câu hỏi

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

yjym33

Người đặt câu hỏi

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

 <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

Người đặt câu hỏi

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

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

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 파일 연결해놓은 코드가 있어서 지웠는데 그래도 적용이 안되네요..

zerocho

Người chia sẻ kiến thức

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