[css-tip]컬러이미지를 흑백이미지로 바꾸기
img 태그 속성에 style="filter:gray(enabled=1)" 삽입한다.
예>
<img src="http://www.twar.co.kr/images/text_board/sample_s5.gif"
style="filter:gray(enabled=1)" />
'프로그램/html,css'에 해당되는 글 34건
- 2009.07.15 컬러이미지를 흑백이미지로 바꾸기
- 2009.07.15 CSS 불투명/투명 테이블 만들기
- 2009.07.15 CSS img 태그 X 박스 처리
- 2009.07.14 alt와 title의 차이점 3
프로그램/html,css2009. 7. 15. 22:16
프로그램/html,css2009. 7. 15. 22:14
[css-tip]CSS 불투명/투명 테이블 만들기
<html>
<head>
<title>[css-tip]불투명/투명 테이블 만들기</title>
<style type="text/css">
<!--
-->
</style>
<script language="JavaScript">
<!--
//-->
</script>
</head>
<body>
<h1>불투명/투명 테이블 만들기</h1>
<table style="filter:alpha(opacity=50)">
<tr>
<td>sdfsd</td>
</tr>
</table>
</body>
</html>
프로그램/html,css2009. 7. 15. 22:13
[css-tip]CSS img 태그 X 박스 처리
img 태그 사용시 경로에 해당 이미지가 없거나 불러오지 못하는 경우 표시되는 X 모양의 상자(이하 엑박)를 일명 엑스박스 또는 엑박이라고들 말을 하기도 한다.
<img src="이미지 경로" style="WIDTH: 67px; HEIGHT: 63px" />
이러한 엑박을 다른 형태로 처리할 수 있다.
onerror
<img src="이미지 경로" style="WIDTH: 67px; HEIGHT: 63px" onerror="this.src='이미지를 못 불러오면 표시할 이미지'" />
<html>
<head>
<title>[css-tip]img 태그 X 박스 처리</title>
<style type="text/css">
<!--
-->
</style>
<script language="javascript">
<!--
//-->
</script>
</head>
<body>
<h1>img 태그 X 박스 처리</h1>
<img src="" width="60" height="60" title="기본사진"
onError="this.src='http://www.twar.co.kr/images/0/event/banner02.png" />
</body>
</html>
프로그램/html,css2009. 7. 14. 22:03
alt와 title의 차이점
1. alt(alternative) : 이미지의 대안, 이미지에 대한 설명
① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)
② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.
③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.
2. title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.
① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.
② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 됨.
③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.
IE에서 alt속성의 내용을 마우스 오버시 보여줌으로 인해 alt와 title의 구별에 혼동을 주곤 하지만, alt와 title은 용도와 기능 면에서 확실히 다른 속성이다.
