CSS 링크와 자바스크립트 input 버튼 CSS설정 중 우선순위 정하기? <코드추가하였습니다>

[seoju]

안녕하세요 ongoing 선생님 수업을 순서대로 듣고 있는 학생입니다.

아마 저 말고도 대부분 학생들이 동영상 업로드 순서대로 수업을 들을것으로 추정되니 아마 비슷한 문제들을 겪고 있을것 같습니다.

web2 CSS 수업에서는 head에서 스타일로 이런저런 id와 태그마다 스타일을 설정하는것을 배우고 별도의 CSS 파일을 만들어서 링크로 연결하는 방법을 배웠고
그 상태로 이어서 web2 자바스크립트 수업으로 넘어가서는 day/night 버튼으로 배경화면을 바꾸는 input버튼을 만드는것을 배웠습니다.

그런데 두가지 내용을 섞어놓으면 호환이 안되더군요.
호환이 안된다는게... CSS에서 별도로 양식을 설정한 h1태그나 ol태그 들은 자바스크립트의 명령을 안먹습니다 ㅠㅠ
아마 html에서는 body에 있는 자바스크립트 내용보다는 head에 있는 CSS내용을 우선하기 때문에 그런것 같습니다. ( 이거 지우면 잘 되는거보니 ^^;;)

아마 다른 학생들도 궁금해 할것 같은데요
어떤 방법이 있을까요?

[smartbos]

실제 코드를 보여주실 수 있을까요?

[blackdew]

CSS에서 지정하는 스타일을 기본으로 하여 자바스크립트로 인해 변경되는 스타일이 태그들의 최종 스타일로 적용이 됩니다. 올려주신 내용은 추측하신 것과 달리 다른 이유로 인해 발생한 것이에요.

올려주신 "지우면 잘된다는" 내용으로 추측해 보건데..
자바스크립트 에러로 인해 그 이후에 있는 스크립트 코드들이 동작하지 않게 되는 것 같아요.
그리고 그 에러코드가 "지우면 잘 된다는" 부분의 코드 안에 들어있을 가능성이 있습니다.

정확한 원인을 찾으려면 코드를 올려주시는 게 가장 좋습니다. :)

[seoju]

실제 코드는 아래와 같습니다.

아... 코드만 올리고싶은데 여기에 단순히 코드를 붙이면
h1, ol 태그같은거는 태그 효과가 적용되어서 나오네요...

1. CSS를 지운상태

"night" 인풋버튼을 누름에 따라 h1태그의 글씨 전환이됨

코드 링크: https://seoju.github.io/family/index.html

2. 문제상황
   "night" 인풋버튼을 눌러도 h1태그 글씨 전환이 안됨
   코드 링크:https://seoju.github.io/family/1.html

CSS내용은 아래와 같습니다.

body{
margin:0px;
}
a{
color:black;
text-decoration:none;
}
h1{
font-size:50px;
text-align:center;
border-bottom:3px solid gray;
margin:0;
padding:20px;
}
#gri ol{
border-right:3px solid gray;
width:130px;
margin:0px;
padding: 20px;
padding-left: 40px;
padding-right: 17px;
}
#gri{
display: grid;
grid-template-columns: 190px 1fr;
}
#gri #a1{
padding-left:25px
}
.img{
width: 800px;
}

[ghdalsrldi]

소스를 확인해 보니
night버튼을 클릭하면 body의 color가 white가되는 코드네요.

body의 color가 white가 되도라도 브라우저 자체에서 부모태그의 스타일을 상속받지 않고 기본값으로 지정된 스타일로 출력하는 경우가 있습니다.

예를들어 a태그에 링크가 걸려 있는 경우 부모태그의 color와 관계없이 브라우저에서는 파란색이나 보라색으로 표시하게 되죠

해결 방법은 night 버튼을 클릭할 때 a태그의 color를 변경해 주는 방법이 있습니다.

[seoju]

감사합니다 코드문제가 아니라 브라우저문제라니 다행이네요

자바스크립트에 a태그를 별도로 색상 지정하게하니 문제 없어졌습니다 ^^

질문을 open -> close 바꿔야될거같은데 어떻게 하는지를 모르겠네요 ㅠ 여튼 감사하니다~!