사건 발단
html 파일을 css로 꾸미는 중 css의 body 태그에 여러 요소를 줬는데도 불구하고 적용이 되지 않았습니다.
개발자 도구로 살펴보아도 _reboot.scss라는 파일에 의해 저의 css 파일이 작동을 하지 않았습니다.
해결 방안
이는 html 파일 헤더 부분에서 bootstrap을 가져오는 링크가 제가 만든 css의 파일을 가져오는 링크보다 뒤에 나와 overwriting이 된 셈이였습니다. 그래서 해당 부분을 바꿔주면 해결이 되었습니다.
<bootstrap 링크가 아래에 위치>
<head>
...
<link rel="stylesheet" href="/home.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
...
</head>
<bootstrap 링크가 위에 위치>
<head>
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="/home.css">
...
</head>
긴 글 읽어주셔서 감사합니다.
댓글