jqeury 클래스추가 유용한 것 같다.

예전에 이 블로그 카테고리 변경하는 것을 알아보다가 우연히 클래스 추가하는 jQuery 함수를 알게 됐다. 클래스 추가는 .addClass라는 것을 사용해주면 되는 것이었다. 그래서 이것을 잊을 것 같아 티스토리에 사용하기로 했다. 참고로 네이버 블로그 등에서 jQuery는 사용할 수 없다고 알고 있으니 사용하지 말았으면 한다.  

미리보기 

티스토리는 댓글이 많으면 아래 그림을 보듯이 1번과 같은 이전 댓글 더보기라는 생겨 이전 댓글을 숨긴다. 이전 댓글을 보기 위해서 이것을 눌러야 하니 댓글이 삭제했다는 오해를 하지 않았으면 한다. 이 글에서 이전 댓글 더보기 버튼을 클래시 추가로 수정하는 과정을 아래에서 적으려고 한다. 

클래스 추가 

이 글에서 적을 것이 윗글을 읽었다면 짐작했듯이 jQuery에서 클래스 추가 함수인 .addClass다. 위와 같이 나오기 위해서는 이전 댓글 더보기의 클래스가 .tt_more_preview_comments_wrap이니 여기에 부트스트랩에서 CSS가 적용된 btn btn-primary btn-block를 더했다. 그 코드는 아래 그림처럼 티스토리의 HTML/CSS 편집에 입력했다. 추가한 클래스까지 이전 댓글 더보기의 클래스는 tt_more_preview_comments_wrap btn btn-primary btn-block이 된다. 그러면 부트스트랩을 사용한다고 가정한담녀 위 그림 2번과 같은 결과가 나온다. 참고로 이전 댓글 더보기의 클래스(class)는 크롬의 개발자 도구를 통해서 알았다. 

 - .COM/.NET/.KR 가격이 13,000원 -

다르게 변경

부트스트랩을 다루었다면 danger는 빨간색이고 primary는 파란색이라는 것을 알 것이다. 위 그림 3번을 primary를 danger로 변경하면 아래 그림처럼 빨간색이 된다는 것을 알 것이다. 그리고 막대 배경은 이 블로그에 모든 버튼에 생기는 그림자는 예전에 CSS로 설정했기 때문에 생긴 것이다. 이것과 아무런 상관이 없다. 참고로 초록색은 success, 노란색은 warning이라는 것을 부트스트랩을 사용했으면 알 것이다.

에필로그

예전에는 티스토리가 자유로워 HTML, CSS, 스크립트 등을 만지는 것이 재밌었는데 요즘엔 별로 흥미가 떨어졌다. 나중에 다시 HTML/CSS에 흥미를 느낄지 모르겠다. 이 글도 몇 개월전 글이라 쓴 것이라 지금 적었다면 안 적었을 것 같다. 예전에 힘들게 적을 글을 그냥 썩히면 아까우니 발행하고 본다. 

오피스365 Home과 Personal의 차이