HTML 속성의 값을 CSS를 사용하여 변경하고 싶습니다.

Question

아래와 같은 HTML 코드가 있습니다.위의 코드 중 ul 태그의 class 속성 값을 특정 상황(resolutiondl 768px 이하의 화면에서) 아래와 같이 변경하고 싶습니다.

이를 위해 아래의 css 코드를 css 파일에 가지고 있습니다.@media screen and (max-width: 768px) { } 게시판들을 뒤지다 보니, 변경하고자 하는 태그에 속성을 하나 추가하고 특정 상황에서 속성의 값을 추가한 속성 값으로 변경하면 된다고 나와 있어서 아래와 같이 ul 태그에 newclass라는 속성을 추가해서 값을 새로 넣었습니다. 그리고 css 부분에서 class 속성의 값을 newclass 속성 값으로 대체하라고 넣어봤습니다.@media screen and (max-width: 768px) { .navbar .collapse ul { class: attr(newclass); } } 그런데 적용이 안되더라구요. 혹시 특정 태그의 속성 값을 css를 사용하여 변경하는 방법을 아시는 고수님들 계신가요? 답변 부탁드립니다. 감사합니다.

목마름 · Answer

CSS는 HTML 값을 바꾸는게 아니라 태그가 화면 구현될 때 표현을 바꾸는 것입니다.태그에 담긴 콘텐츠나 그 컨테이너의 크기, 색상, 위치 등을 지정하는 것이지 HTML의 코드에는 다른 영향을 줄 수 없습니다.따라서 ul에 newclass라는 클래스를 주고 싶다면 CSS로는 불가능하고 자바스크립트를 이용하셔야 합니다. 그게 아니라 768px 이하의 화면에서 표현을 바꾸려면, 아래와 같이 768 이상일 경우와 이하일 경우에 따라 각각 스타일을 정해주시면 됩니다..navbar .collapse ul { width: 1000px; }&#64;media screen and (max-width: 768px) { .navbar .collapse ul { width: 700px; } }

오모씨 · Answer

그럼 자바 스크립트를 이용해서 특정 해상도에서 속성의 값을 바꿀 수 있나요?

parker · Answer

http://mwultong.blogspot.com/2007/04/javascript-screen-resolution.html구글링 해보니 자바스크립트로 해상도 구하는 소스 있네요이걸로 해상도에 따라서 제이쿼리같은걸로 속성 값 주면 될것 같네요

오모씨 · Answer

감사합니다. 두분 답변들 덕분으로 해결했습니다. 혹시 다른분들 참고하시라고 다음과 같이 해결했습니다. html ul 태그에 id 속성을 하나 주고 태그 뒤에 자바스크립트를 사용해서 해당 id의 class 값을 변경하였습니다.

프리가이 · Answer

&#64;media screen and (max-width:520px){ :root { -g2gridsimplesearchfield : 80px; }}&#64;media screen and (max-width:360px){ :root { -g2gridsimplesearchtitle : 63px; }}처럼 사용하심 됩니다.굳이 자바스크립트로 처리하실 필요없스니다설명을 하자면 메디아 태그를 이용해서 같은 class 명을 가진 다른 내용의태그를 설정하면 됩니다HTML 에서는 class&#61;&#34;&#34; 로 설정만 하심 되구요.그럼 ^^

HTML 속성의 값을 CSS를 사용하여 변경하고 싶습니다.

5개의 답변

#attribute 목록