• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

21.10.13 16:46 작성 조회수 764

0

안녕하세요 제로초님 3:25초경에 해당하는 주소에 들어가서 css 파일로 만들어서 html에 연결했는데 css파일에서 오류가 발생했습니다.
 
css 파일 내에서 only속성 때문에 오류가 발생하는데요..
 
아래는 html 파일과 css 파일입니다.
 
html 파일은 강의에서 말씀하신대로 슬랙에 들어가 현재에 맞게 아이콘 코드를 바꿔주었습니다.
그래도 적용이되지 않아서 파일로 만드려고 해당하는 주소에 들어가서 css 파일 내용을 복사했는데 어디가 문제인지 모르겠습니다.
course-thumbnail

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

회원가입 페이지 만들기

강의실 바로가기

답변 7

·

답변을 작성해보세요.

0

yjym33님의 프로필

yjym33

질문자

2021.10.14

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

<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>
조현영님의 프로필

조현영

지식공유자

2021.10.14

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

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

0

yjym33님의 프로필

yjym33

질문자

2021.10.14

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

조현영님의 프로필

조현영

지식공유자

2021.10.14

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

yjym33님의 프로필

yjym33

질문자

2021.10.14

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

0

yjym33님의 프로필

yjym33

질문자

2021.10.14

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

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

(  expected css(css-lparentexpected)

라고 나와있습니다

0

yjym33님의 프로필

yjym33

질문자

2021.10.14

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

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

0

yjym33님의 프로필

yjym33

질문자

2021.10.14

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

0

yjym33님의 프로필

yjym33

질문자

2021.10.14

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

 <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님의 프로필

yjym33

질문자

2021.10.14

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

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

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

조현영님의 프로필

조현영

지식공유자

2021.10.14

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

0

조현영님의 프로필

조현영

지식공유자

2021.10.13

음, 일단

https://sleact.nodebird.com/

제가 호스팅해둔 곳에서 있는 css에 대해서는 전부 정상적으로 작동합니다. 여기 개발자도구 들어가셔서 head 태그 안에 있는 소스로 해보시겠어요?

yjym33님의 프로필

yjym33

질문자

2021.10.13

넵 지금은 여건이 안되서 내일 확인하면서 해보겠습니다. 

늦은시간까지 신경써주셔서 감사합니다. ^^

이 글과 비슷한 Q&A