1

주제: "마우스로 본문 클릭시 색 변경 기능"은 어떨까요?

보통 블로그에서 글을 읽을 때 글이 너무 길어지면 어디를 읽고 있는지 혼동되는 경우가 많죠.
그래서 저같은 경우는 마우스로 본문 여기저기를 블록을 지정하고, 블록에 의해서 색이 반전된 것을 기준으로 글을 쉽게 읽습니다. 그런데 블록을 지정하는 것도 좀 불편하죠.

그래서 기본기능으로 구현하기에는 좀 작은 기능같고, 플러그인으로 구현했으면 좋겠는데....
마우스로 본문을 클릭하면 그 줄의 색이 바뀌는 기능이 있었으면 좋겠습니다.

클릭하면 그 줄에 해당하는 바탕색이 바뀌고, 이에 상응하는 글씨 색도 같이 바뀌게끔 말이죠.
스킨에 대비해서 옵션으로 운영자가 바탕색과 글씨 색을 지정하면 좋겠네요. 물론 기본값으로 본문의 바탕색을 반전시킨 색이 지정되게 만들 수도 있겠구요.

이게 힘들면 그냥 마우스의 움직임에 따라서 그 줄을 색반전시킬 수 있게 만들 수도 있을 것 같기는 한데.....
이 경우에는 구현이 쉽기는 하겠지만 (스킨에 자바스크립트 삽입만으로도 가능할 것 같기는 한데...)
글을 읽으면서 스크롤 등을 해볼 수 없다는 단점이 있으니까....

이런 기능 편할 것 같지 않나요?

따뜻한 5월의 햇살 속에 한가로이 잠든 작디작은 선인장처럼...
내일을 향한 꽃봉오리 몇 개를 올려본다.

2

답글: "마우스로 본문 클릭시 색 변경 기능"은 어떨까요?

mithrandir님 블로그에 마우스 포커시시 색반전 기능이 있더군요.  구현은...?

lunamoth (2007-04-05 15:17:14)에 의해 마지막으로 수정

3

답글: "마우스로 본문 클릭시 색 변경 기능"은 어떨까요?

IE6만 아니라면 CSS만으로 구현 가능합니다. 본문의 p 태그 등에 :hover로 색상 지정을 다르게 해주면 되죠. 모질라 계열인 경우는 텍스트 블록을 지정했을 때의 글자 배경색과 글자색을 전용 css 규칙을 이용하여 사용자 정의할 수도 있습니다.
(mootools.net 참고)

문제의 답은 우리 안에 있다.
내면에 귀를 기울여 보자.

4

답글: "마우스로 본문 클릭시 색 변경 기능"은 어떨까요?

daybreaker 작성:

IE6만 아니라면 CSS만으로 구현 가능합니다. 본문의 p 태그 등에 :hover로 색상 지정을 다르게 해주면 되죠. 모질라 계열인 경우는 텍스트 블록을 지정했을 때의 글자 배경색과 글자색을 전용 css 규칙을 이용하여 사용자 정의할 수도 있습니다.
(mootools.net 참고)

CSS 수정만으로 클릭하면 그 줄에 색 변한 것이 남아있게 할 수 있을까요?

따뜻한 5월의 햇살 속에 한가로이 잠든 작디작은 선인장처럼...
내일을 향한 꽃봉오리 몇 개를 올려본다.

5

답글: "마우스로 본문 클릭시 색 변경 기능"은 어떨까요?

작은인장 작성:
daybreaker 작성:

IE6만 아니라면 CSS만으로 구현 가능합니다. 본문의 p 태그 등에 :hover로 색상 지정을 다르게 해주면 되죠. 모질라 계열인 경우는 텍스트 블록을 지정했을 때의 글자 배경색과 글자색을 전용 css 규칙을 이용하여 사용자 정의할 수도 있습니다.
(mootools.net 참고)

CSS 수정만으로 클릭하면 그 줄에 색 변한 것이 남아있게 할 수 있을까요?

가능한데 IE에서는 그게 지원이 안되다보니 그런 부분에서 약간의 문제가 있습니다. (아침놀님이 이미 말씀하신 부분)

하늘은 스스로 삽질하는 자를 삽으로 팬다

6

답글: "마우스로 본문 클릭시 색 변경 기능"은 어떨까요?

웹에 대해서 잘 알지는 못하지만, 단지 css 수정만으로는 어렵지 않을까요?
css 수정으로 정리한다면 div 단위내에서 색의 변화를 할 수 있도록 할 테인데.
글쓴이가 얘기한 것은 문단단위가 아니라 라인단위에서의 얘기 입니다.
즉 테더에서 적은 글을 라인단위로 div로 묶어줘야 합니다.
그렇기에, css 수정만으로는 어렵지 않을까 합니다.

Yesterday is history, tomorrow is a mystery, and today is a gift; that's why we call it - present

7

답글: "마우스로 본문 클릭시 색 변경 기능"은 어떨까요?

흠.... 줄 단위는 기술적으로 거의 불가능합니다.
우선 웹브라우저나 OS, 설치된 글꼴 등에 따라 각 줄에 들어가는 텍스트 양이 일정하지 않기 때문에, 서버측에서 미리 줄 단위로 잘라 div나 span 태그 등을 덧씌워주는 것은 불가능하죠. (모든 조합에 대해 미리 다 저장해 둔다고 하면... 배보다 배꼽이 커집니다.) 그렇다면 방법은 웹브라우저에서 지원하는 것인데, javascript 등을 잘 쓴다고 해도 DOM 상으로 나눠지지 않은 단위를 잘라내는 것은 마찬가지 이유로 불가능합니다. CSS에서 지원하는 건 각 문단의 첫번째 줄을 강조하는 정도죠.

아마도 이건 웹브라우저 플러그인 형태(불여우 확장기능이라거나)가 되어야 하지 않을까 싶습니다만 그마저도 기술적으로 가능할지는 잘 모르겠습니다;; (IE라면 Win32 API 써서 해당 태그에 설정된 글꼴을 이용해 내부적으로 가상 hDC를 만들어서 텍스트 폭을 잰다거나 하는 삽질이 필요할지도....)

이런 복잡한 기술적 얘기는 제쳐두고라도, 이게 왜 이렇게 어려운가를 생각해보시려면, 스킨 설정에서 최근 댓글이나 최근 글 목록의 글자수 표시 설정을 생각해보시면 됩니다. 왜 픽셀 단위로 안 하고 글자 수로 했을지 말이죠. (물론 글자수 설정에 관해서는 CSS 3.0에 추가될 text-overflow라는 속성을 이용해서 ... 처리를 한다거나 하는 게 가능해져서 더 이상 필요하지 않겠지만, CSS3가 제대로 구현된 브라우저가 널리 쓰이려면 몇 년을 더 기다려야 할지... -_-)
마찬가지로, 지정된 픽셀값(예를 들면 스킨에 지정된 본문 너비)으로부터 거기에 몇 글자가 들어갈지 추출해내는 건 웹브라우저에서 지원해주거나 운영체제 API를 이용하지 않는 이상 불가능합니다. 하다못해 가변폭 스킨을 사용할 때 사용자가 웹브라우저 창 크기를 바꾸기라도 한다면...orz;

만약, 본문 표시를 Flash를 이용한다면 ActionScript 노가다로 어찌 될 수는 있을지도 모르겠군요. -_-;

문제의 답은 우리 안에 있다.
내면에 귀를 기울여 보자.

8

답글: "마우스로 본문 클릭시 색 변경 기능"은 어떨까요?

htna 작성:

즉 테더에서 적은 글을 라인단위로 div로 묶어줘야 합니다.

또 딴지를 걸어 죄송합니다만. '테더'가 아니라 '태터'입니다.
습관이라고만 하지 마시고 고치려는 노력이라도 하시면 좋겠습니다.
남의 이름을 내키는대로 부르시는 건 좋지 않습니다.