부모 요소에 CSS를 추가하는 법을 알았다.

내가 알고 싶었던 정보인 부모 요소에 CSS를 추가하는 법을 알아 아래에 적고자 한다. 나에겐 티스토리에서 스킨 수정하거나 만드는 정도만 필요하니 더 깊게 들어가고 싶지 않다. 그러니 jquery를 사용하여 CSS를 자세히 공부하는 사람에게 도움을 되지 않을 것이다. 그런 사람은 이 글을 보고 아마 낚시라고 생각할 것이다. 낚시라고 생각해도 상관없다.

    

제목대로 부모 요소에 CSS를 추가하는 것에 대한 글이다. 아래 그림과 같은 페이지의 쪽 수 매기는 것을 만들 때 선택된 페이지 쪽 수의 배경색을 변하게 하는 것을 몰랐다. 즉 1번과 같이 3이라는 글자의 배경도 변하게 하는 것이다. 부모 요소에 CSS 추가하는 방법을 몰랐을 때는 3이라는 글자에만 효과를 주었다. 참고로 아래와 같이 쪽 수 매기는 것을 만드는 소스는 여기에서 구할 수 있으며 부트스트랩을 사용해야 한다. 부트스트랩을 사용하지 않으면서 안 된다고 하지 말았으면 한다. 

크롬에서 마우스 오른쪽 버튼을 눌러 검사를 선택하면 아래 그림처럼 나와 클래스가 2번의 selected라는 것을 알 수 있다. 티스토리에서 스킨에 관계없이 클래스는 selected 이다. 네이버의 브라우저인 웨일이 크로미엄을 기초로 해서 비슷하다. 그런데 크롬과 다르게 웨일은 검사가 아닌 요소 검사를 선택해야 한다. 참고로 각 요소를 클릭하면 페이지의 요소가 선택되고 CSS가 나타난다. 크롬을 사용해 봤으면 잘 알 것이다.

선택되는 클래스를 알았으니 아래 그림의 3번과 같이 글자에 효과를 줄 수 있다. .selected에 배경 CSS를 추가하는 것은 글자의 배경에만 작용한다는 것을 알았다. 쪽 수 배경을 변하게 하고 싶다면 .selected 의 상위 요소에 적용해야 한다는 것을 알 수 있다. 그런데 나는 그 방법을 몰랐다. 이 방법을 알려고 구글 검색을 통해서 몇 개월을 찾았으나 방법을 몰라 중간에 포기하고 글자에만 효과를 주는 것으로 만족했다.

그런데 최근에 부모 요소에 CSS를 추가하는 jQuery를 검색을 통해서 <script>$("클래스").parent().css({"CSS"})</script> 를 하면 된다는 것을 알았다. .selected 클래스의 상위에 CSS를 추가하면 된다는 생각에 아래와 같이 추가 했더니 됐다. 그동안 못했던 것을 해결하니 속이 시원하다. 

w3school.com 홈페이지의  jquery를 보니 태그에 css를 추가하는 기본은 css("propertyname","value");이었다. 자세한 것은 거기를 참조하거나 다른 한글 강좌를 봤으면 한다. 이왕이면 검색을 통해서 한글 강좌가 좋을 것도 같다. 전에도 적었지만 w3school.com은 영문이라도 예제가 많아 익히기 쉽다.

주민번호 사용차단