Etc/HTML & CSS

CSS가 겹쳐서 발생하는 오류 해결 방법

728x90
반응형

가끔 HTML CSS를 이용해 웹사이트를 개발하다보면 분명히 특정 요소에 대해 스타일 설정을 하였지만, 반영 되지 않고 이상한 스타일이 적용 될 때가 있습니다.

이럴 때는 HTML, CSS파일등에서 특정 요소에 대한 스타일 설정이 중복되지 않았나 체크해야합니다.

브라우저는 무조건적으로 코드를 위에서 아래로 해석하기때문에 특정 요소에 대한 스타일 설정이 중복된다면 반드시 가장 아래에 있는 설정이 적용되어 최종적으로 사용자에게 보여집니다.

간단한 예시로 설명을 해보자면 아래 코드는 전체 HTML 코드입니다.

<!DOCTYPE html>
<html lang="kr">
    <head>
        <link href="test.css" rel="stylesheet"/>
        <style>
            h1 {
                color: black;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>Hello, xeros!</h1>
        </header>
    </body>
</html>

아래 코드는 위 HTML에서 참조한 test.css 파일의 내용입니다.

h1 {
    color: orange;
}

이 두 코드 파일은 아래와 같은 디렉토리 Tree 구조를 가집니다.

위 코드와 디렉토리 구조만으로 알 수 있는 점은 test.html, test.css 두 파일 모두 h1태그의 color를 각각 black, orange로 변경하려고 한다는 것입니다.

하지만 최종적으로 test.html이 브라우저에 해석된 모습은 아래와 같습니다.

이 사실로 알 수 있는 점은 test.html에서 test.css 파일을 로드한 뒤에 style태그 안의 h1태그 색지정 설정이 이루어졌기 때문에 test.css파일에서의 h1태그에 대한 스타일 설정은 적용되지 않았다는 점입니다.

728x90
반응형