CSS가 반영되지 않을 때의 대처법

3407 단어 HTMLCSS초보자초보자용
CSS가 브라우저에 반영되지 않을 때는 몇 가지 원인이 있습니다.
이번에는 가능한 원인과 그 대처법을 소개합니다.

반영되지 않는 원인



· 캐시가 남아 있습니다.
· CSS가 작동하지 않습니다.
· 다른 설명이 우선합니다.
· 쓴 CSS를 확인할 수 없습니다.
· 레이아웃 실수.

캐시가 남아 있으면


キャッシュ = 과거에 본 웹 사이트의 파일 데이터 (html 파일, CSS 파일, 이미지 등)
　　　　　PC의 용량으로서 일시적으로 보존하고 나서 브라우저에 재이용시키는 기능.
즉, 간단하게 정리하면 過去の閲覧情報を残すことで、次のサイト表示速度を上げる 라고 하는 것입니다.

"해결 방법"スーパーリロードする。수퍼 리로드 = キャッシュを破棄して最新のデータを読み込む。· Windows : CtrlキーとF5キーを同時押し· Mac : commandキーとshiftキーとRキーを同時押し

CSS가 작동하지 않음



CSS가 제대로 작동하는지 개발자 도구에서 확인할 수 있습니다.デベロッパーツール = 無料でWEBサイトの状態確認や検証ができる。
「확인 방법」
브라우저에서 오른쪽 클릭 → 검증 → 반영되지 않은 코드는 검은 선으로 둘러싸인 곳처럼 ⚠︎注意マークと横線 가 들어 있습니다.スペルミスや全角スペースが入っていないか、記述が間違っていないか 등을 확인합시다.



다른 설명이 우선하지 않습니까?



조금 전과 달리 가로선만의 경우는 書き方に間違いはないが、この記述は反映されていない 라고 하는 것입니다.
원인은 CSS 適用優先順位 때문입니다.



"해결 방법"
・위쪽에 같은 CSS가 반영되고 있는 일이 있기 때문에, 반영되고 있는 CSS를 삭제한다.
· 삭제하지 않으려면 CSS 우선 순위를 높입니다.
→ 셀렉터를 길게 하거나 ID로 지정한다.
<div id="menu"> // htmlでid指定。

#menu {         // cssは#から記述。
 color: red;   // セレクタ：menu プロパティ：color 値：red 
}

CSS가 확인할 수 없음



작성한 CSS를 개발자 도구로 확인할 수 없는 경우 원래 CSSが読み込まれていない 또는 セレクタ名を間違えている 가능성이 있습니다.
· CSS 로딩 → <link rel="stylesheet" href="sample.css">・셀렉터명 미스
1. ID명 앞에 「#」를 붙이지 않았다.
2.class명 앞에 「.」를 붙이지 않았다.
3. 철자 실수.
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="sample.css">
    <title>CSS読み込み方法</title>
  </head>
  <body>
    <h1></h1>
  </body>
</html>

레이아웃 실수



위의 방법으로 해결할 수 없다는 것은 설명 실수가 아닌 CSS 사양에 문제가있을 수 있습니다.
구체적으로는 다음을 생각할 수 있습니다.
・float, position의 해제 잊어.
・폭이나 높이의 지정에 의한 문제.
· 블록 요소와 인라인 요소로 인한 문제. etc...

이 해결책에 관해서는 이 기사에서는 생략하겠습니다.
덧붙여 아래의 사이트에서 상세한 해결 방법이 기재되어 있으므로 보시기 바랍니다.
대처법:( htps //w w. 세주쿠. 네 t/bぉg/100015 )

참고원은 이쪽
대처법:( htps //w w. 세주쿠. 네 t/bぉg/100015 )
셀렉터:( htps //w w. 놀자. 이. jp / b ぉ g / ぇ b / css-sec 및 rs # CsHTMLCs )
CSS 로딩:( htps : // 테카로 my. jp/마가지네/9647 )
JavaScript 슈퍼 기초 콘솔에 문자 표시
골랑 네디르? Golang 파일 REST API

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage