1 ceris이 작성한 주제

  • ceris
  • 익숙한 사용자
  • 오프라인
  • 가입일자 2006-04-19
  • 글: 7

주제: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

안녕하세요...

태터툴즈에서 이미지를 버튼으로 삽입할 때 지금은 alt 속성만 넣는 거 같은데요.
이렇게 했을 경우 익스나 파이어폭스에서 마우스를 올렸을시 툴팁이 뜨긴 하지만, 실제로는 title속성을 써서 표시해야 정상이라고 생각됩니다..

현재는 에디터의 우측에 뜨는 조그만 박스에서 캡션과 함께 alt 속성을 지정할 수 있던데, alt속성에 적용되는 값을 title속성으로 바꾸는 게 보다 의미에 맞는 것 같습니다. 대신 alt속성에는 파일의 원본 이름을 넣으면 어떨까요? 가령 예로 들어서....

풍경사진.jpg 라는 파일을 글 중에 삽입해서 업로드 했습니다. 그림을 클릭하면 오른쪽 박스에 속성이 뜰테고.. 여기서 캡션은 그대로 유지한 상태에서, 바로 위에 입력하는 속성값은 title 속성으로 출력하게 합니다. alt속성은 '풍경사진'이 되겠네요. 캡션 위에 입력한 속성값이 '어느날 놀러갔던 곳의 아름다운 풍경'이라고 한다면, 대충 아래와 같이..

<img src="/~/image/.../10293941.jpg" alt="풍경사진" title="어느날 놀러갔던 곳의 아름다운 풍경" />

이렇게 출력되는 건데요. 이게 보다 바람직한 출력 방식이라고 생각됩니다.
현재는 title 속성이 빠지고 alt 속성에 대신 추가해서 나오는 것 같더라구요.

그리고 하나 더..
우측 이미지 속성 박스의 위치가 좀 불편합니다. 글이 짧으면 괜찮지만 글이 길어지면 우측의 박스가 위에 붙어 있어서 마우스를 많이 왔다갔다 해야하는데요. 이걸.. 이미지 박스가 편집 창의 이미지 위치에 맞게 높이가 맞춰져서 옮겨다니면 어떨까 합니다. 그럼 보다 직관적이고.. 현재 선택한 이미지가 뭔지도 더 확실할 거 같네요.


설명이 복잡하지만.. 꼭 필요한 건의라고 생각해서 열심히 적어봤습니다. ^^

2 inureyes이 작성한 답글

  • 지역 대한민국 > 포항
  • 가입일자 2006-04-03
  • 글: 4,471

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

ceris 작성:

안녕하세요...

태터툴즈에서 이미지를 버튼으로 삽입할 때 지금은 alt 속성만 넣는 거 같은데요.
이렇게 했을 경우 익스나 파이어폭스에서 마우스를 올렸을시 툴팁이 뜨긴 하지만, 실제로는 title속성을 써서 표시해야 정상이라고 생각됩니다..

현재는 에디터의 우측에 뜨는 조그만 박스에서 캡션과 함께 alt 속성을 지정할 수 있던데, alt속성에 적용되는 값을 title속성으로 바꾸는 게 보다 의미에 맞는 것 같습니다. 대신 alt속성에는 파일의 원본 이름을 넣으면 어떨까요? 가령 예로 들어서....

풍경사진.jpg 라는 파일을 글 중에 삽입해서 업로드 했습니다. 그림을 클릭하면 오른쪽 박스에 속성이 뜰테고.. 여기서 캡션은 그대로 유지한 상태에서, 바로 위에 입력하는 속성값은 title 속성으로 출력하게 합니다. alt속성은 '풍경사진'이 되겠네요. 캡션 위에 입력한 속성값이 '어느날 놀러갔던 곳의 아름다운 풍경'이라고 한다면, 대충 아래와 같이..

<img src="/~/image/.../10293941.jpg" alt="풍경사진" title="어느날 놀러갔던 곳의 아름다운 풍경" />

이렇게 출력되는 건데요. 이게 보다 바람직한 출력 방식이라고 생각됩니다.
현재는 title 속성이 빠지고 alt 속성에 대신 추가해서 나오는 것 같더라구요.

설명이 복잡하지만.. 꼭 필요한 건의라고 생각해서 열심히 적어봤습니다. ^^

그게요.... 웹표준 권고안에는 img의 속성중에 title이 없습니다;;;

그래서 태터에도 없죠...

"Everything looks different on the other side."

-Ian Malcomm, from Michael Crichton's 'The Jurassic Park'

inureyes의 웹사이트

3 ceris이 작성한 답글

  • ceris
  • 익숙한 사용자
  • 오프라인
  • 가입일자 2006-04-19
  • 글: 7

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

헛.. 진짜 그러네요.. 이럴수가.. 방금 확인해봤는데 title이 표준 속성이 아니란 걸 몰랐습니다.
난감하네요. 그래서 저렇게 해놓은건가 보네요. 음 -__-

4 chester이 작성한 답글

  • 가입일자 2006-04-03
  • 글: 557

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

ceris 작성:

헛.. 진짜 그러네요.. 이럴수가.. 방금 확인해봤는데 title이 표준 속성이 아니란 걸 몰랐습니다.
난감하네요. 그래서 저렇게 해놓은건가 보네요. 음 -__-

네 저도 그랬던 것으로 기억이 나네요 ^

5 마잇이 작성한 답글

  • 마잇
  • 식물애호가♡
  • 오프라인
  • 가입일자 2006-04-17
  • 글: 21

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

img 태그의 경우에는 alt 속성은 반드시 있어야 하지만 title 속성도 적용해 줄 수 있는 것 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
<img src="razor.jpg" alt="razor" title="레이저" />
</body>
</html>

위 소스로 유효성 검사를 해보면 alt 속성의 유무로만 유효성이 결정되고 title 속성은 영향을 주지 않습니다.

파이어폭스에서는 title 속성만을 툴팁으로 보여줍니다. 익스에서는 테스트해보지 못했네요. 들은바로는 alt 속성만 있는 경우는 alt 속성을 툴팁으로 보여주고, alt, title 속성이 둘 다 있는 경우는 title 속성을 툴팁으로 보여준다고 합니다.

이미지가 링크 처리된 경우는 a 태그에 title 속성을 넣어주고 img 태그에는 alt 속성만을 넣고 링크가 아닌 이미지는 alt, title 속성을 둘 다 넣어주는 방법은 어떨까요?

접근성 가이드라인에서는 이미지를 볼 수 없는 성황을 위해 alt, longdesc 속성을 이용하는 것을 위주로 설명 되어 있는데 이미 이미지를 볼 수 있는 사용자들에게 툴팁을 제공하기 위해서 title 속성을 쓰는것도 괜찮아 보입니다.

모질라포럼의 관련 글타래를 링크해 봅니다.

img의 alt와 a의 title 중복 대책
이미지 속성표기 질문?

확인하느라 찾아본 링크들인데 img 태그에서 title 속성 사용은 언급하고 있지 않습니다.

13.8 How to specify alternate text
Short text equivalents for images ("alt-text")
Long descriptions of images

마잇

마잇의 웹사이트

6 ceris이 작성한 답글

  • ceris
  • 익숙한 사용자
  • 오프라인
  • 가입일자 2006-04-19
  • 글: 7

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

자세하게 설명해주신 마잇님 감사합니다~
저도 유효성 검사에는 title속성이 영향이 없는 걸로 알고있어서 어찌된걸까 했는데..
출력 소스를 다시보니까 alt랑 title이 같은 값으로 들어가네요.. 음.. 이것도 괜찮은 거 같긴 한데, 이미지 박스에서 대체 텍스트라고 되어 있으니까 의미상으로는 alt가 맞긴 하네요.

링크로 처리한 것에 title로 넣어주는 건 좋은데 현재는 내장 컴포넌트를 써서 링크를 처리하니까.. 이 부분은 좀 시간이 걸릴 거 같네요.

7 graphittie이 작성한 답글

  • 지역 Wonderland
  • 가입일자 2006-04-20
  • 글: 1,799

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

정확하게 말하면, alt는 이미지가 로딩되지 않았을 경우에 대비하여 이미지를 대치하는 텍스트입니다. title은 웹 접근성을 향상을 위하여 컨텐츠에 부가적 설명을 적어놓는 속성입니다. alt는 필수이고, title은 옵션입니다.

alt에 대한 설명 :
Required? Yes
Description: This is text to be displayed in place of an image for browsers that can not handle this ability or for browsers that have disabled this ability.

title에 대한 설명 :
Required? No
Description: This attribute is used to give further information regarding the contents of an element. Interactive elements such as hyperlinks, images, or form fields may use this attribute to inform the user about the nature of the resource, or to specify help information if requested by the user.

The methods used to render the content of this attribute for this should follow the standard guidelines for the system, but may vary between browsers and platforms. For instance, visual browsers will frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context.

XHTML은 HTML 4.01을 XML식으로 정의한 것입니다. 따라서 XHTML의 HTML Compatibility Guidelines에서 특별히 지정해준 방식이 아니면 모든 HTML 4.01은 XHTML 1.0에 상속됩니다. XHTML 스펙에 적혀 있지 않다고 표준이 아닌 것이 아니고, 특별히 언급되지 않은 HTML 설명은 당연히 XHTML에도 포함된다는 것이지요.

graphittie (2006-04-20 19:16:01)에 의해 마지막으로 수정

graphittie의 웹사이트

8 PAPACHA이 작성한 답글

  • PAPACHA
  • 정원의 마술사
  • 오프라인
  • 가입일자 2006-04-13
  • 글: 127

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

지금 태터툴즈의 title attribute 등을 포함한 세세한 사용자 편의성이 부족한 것이 사실입니다. img뿐만 아니라, div과 table, button등에 의한 영역에서도 간단하면서도 적절한 도움말을 title attribute로 제공하는 것이 좋을 것입니다. 최근에 추가한 일부 관리자 화면에서는 그렇게 하였으나, 그렇지 못하거나 기존에 구현되어 부족한 것이 사실입니다.
http://papacha.net/images/title-hint.png

이에 대한 많은 참여와 의견을 부탁 드립니다.

PAPACHA (2006-04-20 19:34:17)에 의해 마지막으로 수정

9 유마이 작성한 답글

  • 유마
  • 육종학자
  • 오프라인
  • 지역 대한민국 > 대구
  • 가입일자 2006-04-11
  • 글: 683

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

PAPACHA 작성:

지금 태터툴즈의 title attribute 등을 포함한 세세한 사용자 편의성이 부족한 것이 사실입니다. img뿐만 아니라, div과 table, button등에 의한 영역에서도 간단하면서도 적절한 도움말을 title attribute로 제공하는 것이 좋을 것입니다. 최근에 추가한 일부 관리자 화면에서는 그렇게 하였으나, 그렇지 못하거나 기존에 구현되어 부족한 것이 사실입니다.
http://papacha.net/images/title-hint.png

이에 대한 많은 참여와 의견을 부탁 드립니다.

이걸 보니, 태터 사용자의 입장에서 불편한 것만 이야기할 것이 아니라, 태터를 처음 접하는 초보의 입장에서...
태터를 처음 다운은 받기.. 아니, 설치형 블로그.. 태터툴즈라는 것을 처음 안 초보자가 태터툴즈 사이트를 검색하여 찾으면서부터
그 모든 상황을 일일이 재현해보면서... 부족한 점을 찾아 메워야 되겠다는 생각이 드는군요.

기존 사용자는 다 알기에.. 또는.. 어련히 알아서 할 줄 알기에 지나쳐가는 것들...
또는, 이런 것에 능숙한 유저들은... 쉽게 눈에 띄지 않는 것들 찾아서 매꿔야 한다는 생각이 드네요..

가벼운 예로.. 적당하게 틀린 오타하나라도 발견해서 수정해야.. 보다 이해하기 쉽지 않을까 싶습니다.
파파차님 말씀대로.. 그런 부분 뿐만 아니라, 진짜 누구나... 저번에 누구지요?.. 태터를 처음 접하는 부모님들도 쉽게 설치할 수 있게 만들려면..................... 모두가 초보자의 입장에서 새로운 경험을 해보아야겠습니다....

"난 태터툴즈가 뭔지 몰라" 라는 자기 암시를 한 뒤, 새로 설치를 해봐야겠습니다. 흐흐;;;;

유마의 웹사이트

10 chester이 작성한 답글

  • 가입일자 2006-04-03
  • 글: 557

답글: 이미지 삽입시 alt와 title 속성 및 박스 위치 건의

유마 작성:
PAPACHA 작성:

지금 태터툴즈의 title attribute 등을 포함한 세세한 사용자 편의성이 부족한 것이 사실입니다. img뿐만 아니라, div과 table, button등에 의한 영역에서도 간단하면서도 적절한 도움말을 title attribute로 제공하는 것이 좋을 것입니다. 최근에 추가한 일부 관리자 화면에서는 그렇게 하였으나, 그렇지 못하거나 기존에 구현되어 부족한 것이 사실입니다.
http://papacha.net/images/title-hint.png

이에 대한 많은 참여와 의견을 부탁 드립니다.

이걸 보니, 태터 사용자의 입장에서 불편한 것만 이야기할 것이 아니라, 태터를 처음 접하는 초보의 입장에서...
태터를 처음 다운은 받기.. 아니, 설치형 블로그.. 태터툴즈라는 것을 처음 안 초보자가 태터툴즈 사이트를 검색하여 찾으면서부터
그 모든 상황을 일일이 재현해보면서... 부족한 점을 찾아 메워야 되겠다는 생각이 드는군요.

기존 사용자는 다 알기에.. 또는.. 어련히 알아서 할 줄 알기에 지나쳐가는 것들...
또는, 이런 것에 능숙한 유저들은... 쉽게 눈에 띄지 않는 것들 찾아서 매꿔야 한다는 생각이 드네요..

가벼운 예로.. 적당하게 틀린 오타하나라도 발견해서 수정해야.. 보다 이해하기 쉽지 않을까 싶습니다.
파파차님 말씀대로.. 그런 부분 뿐만 아니라, 진짜 누구나... 저번에 누구지요?.. 태터를 처음 접하는 부모님들도 쉽게 설치할 수 있게 만들려면..................... 모두가 초보자의 입장에서 새로운 경험을 해보아야겠습니다....

"난 태터툴즈가 뭔지 몰라" 라는 자기 암시를 한 뒤, 새로 설치를 해봐야겠습니다. 흐흐;;;;

맞아요 ...
무엇보다도..... 설치하는 과정자체가 없어야 하는 것이죠...
ftp 도 모르시는 분이 전국민의 99.5% 라는 우스개소리가 smile