댓글알림 메시지와 배경설정 , 네이버 블로그가 아닌 티스토리

이 글에서는 이 블로그에서 댓글을 적을 시 나타나는 메시지와 배경에 대해 설명하겠다. 아래 소개하는 링크에 익스플로러8이상 <!DOCTYPE>이 선언된 경우,크롬 등 브라우저에서는 CSS의 focus라는 선택자를 지원하므로 댓글을 쓰려고 할 때 댓글 배경도 없어진다. 그러나 익스플로러 7이하를 사용한다면 댓글 배경이 사라지지 않고 알림은 없어진다. 그럼 알림이 없어지지 않는다면 댓글을 적는데 방해가 될 것이다.

• http://www.w3schools.com/cssref/sel_focus.asp 

우리나라는 익스플로러 사용자가 많은데 아래 그림의 통계를 보듯이 익스플로러7 사용자가 많다. 그리고 익스플로러7은 PC 방에서 많이 사용하는 브라우저이고 PC방 말고도 사용하는 사람이 많습니다. 참고로 통계기간은 11월 4일에서 12월 4일까지 방문자 50,961명을 대상으로 한 것이고 통계치는 이 블로그에서이고 통계프로그램은 구글애널리틱스이다. 특히 다른 블로그도 아래와 비슷하다는 것을 알았으면 한다.

- 무료 명의도용검사하기 - 

댓글 알림 설정하기 

댓글을 적을 때 사용하는 HTML 태그는 textarea이다. 브라우저에서 Ctrl+F로 textarea 부분을 찾아 ">이후에 메시지를 아래 그림처럼 적고 </teaxtarea> 앞까지 적으면 된다. 아래 그림 초록색 사각형은 보면 알겠지만 댓글 적는 곳은 comment 라는 것이 보이고 방명록에 댓글을 적는 곳은 guestbook라는 치환자가 보일 것입니다. 그리고 아래에 간단히 어떻게 하는지 적겠다.

1. 아래 그림에서 볼 수 있듯이 onfocus="javascript:this.value='';"를 더해 댓글을 쓰기 위해 클릭하면 알림 메시지가 사라지게 한다.
2. 그런 후 textarea 태그안에 알림메시지를 쓰면 된다. 아래 그림과 이 블로그의 댓글창을 보면 어떻게 하면 되겠하면 되겠다는 것을 알 수 있다. 아래 더보기를 클릭하면 방명록에 댓글을 적을 때 나오는 메시지에 대한 그림이 있으니 참고하기 바란다.

 - 무료로 팩스 10장보내기 :엔팩스 - 

댓글 배경지정과 배경 없어지게 하기 

배경없어지게 하는 것은 이 스킨에서 이니 다른 스킨에서는 댓글을 적을 때 어떤 HTML을 쓰는지 알아 CSS를 변경해야 할 것이다.

익스플로러 8이상과 크롬과 같은 익스플로러외 브라우저에서는 css의 focus라는 선택자를 지원합니다. 익스플로러7은 자주 안 써 몰랐는데 onfocus는 익스플로러7에서는 안 되더라고요. focus는 커서가 특정한 곳으로 이동하면 효과가 나타나도록 하는 CSS의 선택자이다.  댓글 배경이 없어지게 하는 것은 이 스킨에서는 되는데 다른 스킨에서는 안되는데 문제가 무엇인지 모르겠다.

그래서 필자의 블로그 CSS를 보면 윗 그림과 같다. 기본 상태에서는 cctv 이미지가 댓글창 배경에 나타나도록 했고, 댓글을 쓰기 위해 커서가 이동되면 배경에 변화가 생긴다. 배경 이미지는 다른 배경 이미지로 바뀌도록 했다. 배경이미지에 GIF 이미지로 교체하도록 했는데 이것은 Channy님의 블로그를 보고서 생각난 것이다. 참고로 아래 링크 페이지에서 보았는데 :focus 선택자는 CSS2군요.

• http://www.w3schools.com/cssref/css_selectors.asp

CSS를 아는 사람은 이해하기는 이 글이 쉬워도 모르는 사람은 이 사람이 무슨 얘기를 하고 있냐고 할 것이다. 그러니 웬만하면 시간을 갖고 하기 바란다.  참고로 티스토리에서 이미지의 경로는  티스토리에서 업로드한 파일경로(URL) 알기를 보세요.

알아줄 것이 익스플로러 6 포함한 익스플로러 7 이하에서는 알림메시지가 아니라 배경이 없어지지 않는다는 것을 아는 것입니다. 만약 익스플로러6,7 사용자를 고려한다면 댓글창 배경에 신경을 써야 할 것입니다. 대부분 기업이나 회사의 컴퓨터의 운영체제인 윈도우XP의 기본 브라우저는 익스플로러 6이고 PC방에서는 거의 익스플로러7을 사용한다. 또한 네이버 블로그,다음 블로그은 위와 같이 하는 것은 불가능하니 하지 말기 바란다. 

문자와 팩스 10장 무료