프로그램/html,css2015. 6. 26. 11:18

이미지 엑박 방지 / img onerror / html 이미지 에러 / image 태그 에러 / 이미지 로딩에러

<img src="이미지 엑박" />

 

 

 

 

// onerror method를 이용할 수 있다.

<img src="이미지 엑박" onerror="this.src='대체할 이미지'" />

 

 

// 함수를 이용할 수 있다.

<img src="이미지 엑박" onerror="no_image()" />

<script>

function no_image() {

$("img").attr("src", "이미지 엑박 때 대체할 이미지.gif");    // 주의 : 대체 이미지도 없으면 무한 루프에 걸린다.

}

</script>

Posted by 은둔고수
프로그램/html,css2014. 4. 19. 16:43

css div 세로 가운데 정중앙 정렬해서 위로 띄우기

<html>
<head>
<style>
.middle_area {clear:both;position:relative;height:100%;}
.loading {position: absolute;top:50%;left:50%;}
</style>
</head>
<body>
 <div>상단 영역</div>
 <div class="middle_area">
  <div class="loading">세로 및 가운데 정중앙 정렬</div>
  <div>
   본문 영역<br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a><br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a><br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a><br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a><br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a><br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a><br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a><br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a><br />
   <a href="okkks.tistory.com" target="_blank">okkks.tistory.com</a>
  </div>
 </div>
 <div>하단 영역</div>
</body>
</html>

 

<div class="loading">세로 가운데 정중앙 정렬</div>를 본문 영역 기준으로 정중앙 정렬한 후 띄운다.

 

.middle_area {clear:both;position:relative;}

height:100%;부분을 삭제했을 경우


 

 

더보기>

- css div 글자 가로, 세로 가운데(중앙)정렬

Posted by 은둔고수
프로그램/html,css2013. 12. 7. 00:02

css div 글자 가로, 세로 가운데(중앙)정렬

 

div를 이용해서 정사각형을 만들고 div 안에 텍스트를 가로, 세로 가운데(중앙) 정렬하는 한 예이다.

 

설명>

정사각형을 먼저 만들고

가로 정렬을 위해서 text-align:center를 사용하고

세로 정렬을 위해서 top:25%로 지정해서 세로 정렬을 한다.

가로 정렬은 크기가 변경이 되어도 가운데 정렬이 되나

세로 정렬은 크기가 변경되면 크기에 맞춰 top 값을 변경해서 맞춘다.

 

소스 예>

<html>
 <head>
  <title>div 정사각형안에 글자 가운데 정렬</title>
  <style>
  .type1 {height: 35px; width: 35px;border:1px solid;}
  .type2 {top: 25%; position: relative; text-align: center;}
  </style>
 </head>
<body>
<div class='type1'><div class='type2'>1</div></div>
</body>
</html>

 


더보기>

- css div 세로 가운데 정중앙 정렬해서 위로 띄우기

Posted by 은둔고수
프로그램/html,css2013. 1. 22. 10:28

[html, css] ime-mode을 이용한 입력란 한글, 영문 기본 설정

css를 이용해서 입력란에 한글 또는 영문을 기본으로 입력할 수 있게 설정을 할 수 있다.

ime-mode를 이용하면 한영 전환을 위해 키보드의 한/영 키를 누르지 않아도 되기 때문에

사용자로 하여금 편리함을 제공할 수 있게 된다.

주로 아이디, 이름, 주소 등에 많이 사용한다.

 

auto : 기본 (= ime-mode 값 미지정)

active : 활성상태 (=기본 한글입력)

- 사용 예>이름, 주소

inactive : 비활성상태 (=기본 영문입력)

disabled : IME 사용안함 (=영문만 입력 가능, 한/영키 사용못함)

- 사용 예> 아이디, 비밀번호

참고> IME는 모든 브라우저에서 지원하지 않는다. 

Posted by 은둔고수
프로그램/html,css2012. 7. 12. 12:45

브라우저 호환성 보기 설정을 기본으로 사용하기

익스플로러(explorer)에서 브라우저 버전 별로 기능이 제대로 구현이 되거나 그렇지 않은 경우가 발생하기도 하는데

구현되지 않은 브라우저 사용하는 경우 브라우저 호환성 보기 기능을 설정하면 제대로 구현이 되는 경우가 있다.

이럴 땐 아예 호환성보기 기능을 기본으로 설정하고 싶다면 아래 메타태그를 사용한다.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

기본으로 8버전을 원한다면 IE=edge 부분을 IE=8로 변경한다. 

Posted by 은둔고수
프로그램/html,css2012. 7. 12. 11:02

div scrollbar - 스크롤바 만들기

원하는 위치에 스크롤 바가 필요한 경우가 있다.

이럴 때 div 태그를 이용해서 스크롤바를 만들 수 있다.

 

예> 세로 스크롤바만 항상 사용하기

<div style="overflow-y:scroll;width:200px;height:100px;">http://okkks.tistory.com/914</div>

이 경우에는 가로 크기가 지정한 값보다 커지면 자동으로 가로 스크롤바가 생성된다.

커져도 가로 스크롤바를 사용하고 싶지 않다면 overflow-x:hidden;을 추가한다.

 

참고>지정한 세로 크기보다 적을 때는 세로 스크롤바를 생성하지 않고 클 때 세로 스크롤바만 자동으로 생성하기

(단, 지정한 가로크기보다 커져도 가로 스크롤바는 생성되지 않는다.)

<div style="overflow-y:auto;overflow-x:hidden;height:100px;">http://okkks.tistory.com/916</div>

참고> 가로 스크롤바만 항상 사용하기

<div style="overflow-x:scroll;width:200px;height:100px;">http://okkks.tistory.com/914</div>

참고>지정한 크기보다 커지면 자동으로 가로, 세로 스크롤바 생성하기

<div style="overflow:auto;width:200px;height:100px;">http://okkks.tistory.com/915</div>

참고>스크롤바를 항상 생성하기

overflow:scroll;

Posted by 은둔고수
프로그램/html,css2012. 4. 16. 15:02

internet explorer 7에서 overflow:hidden이 안 먹혀요

 

ie7(익스플로러7)에서 overflow:hidden 이 안 먹히는 경우가 발생하면

overflow:hidden과 함께 position:relative를 같이 사용한다.

예>style="height:85px;position:relative;overflow:hidden;" 

Posted by 은둔고수
프로그램/html,css2010. 4. 23. 16:31

[css-웹표준] div layout sample(샘플 예제)


[div_layout01.htm]
<!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>
<link href="t1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">Table Layout</div>
<div id="page">
<div id="menu">
<h1>Menu List </h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<div id="contents">
<h2>Page Title </h2>
<div id="text">Layout Test Page. </div>
</div>
<div id="links">
<h2>Links</h2>
</div>
</div>
<div id="copy">Copyright</div>
</body>
</html>


[div_layout01.css]
h1 { width:190px; padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#999999; border-bottom:3px solid #FFFFFF; margin:0}
h2 { padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#666666; border-bottom:3px solid #FFFFFF; margin:0}
#logo { font-family:Arial; font-size:100px; color:#FFFFFF; font-weight:bold; background:#000000; width:760px; padding:20px}
#page { position:relative; width:800px; overflow:visible}
#menu { position:relative; padding:20px; width:200px; background:#666666; float:left; height:400px }
#menu ul { margin:0; padding:0}
#menu li { width:190px; padding:5px; border-bottom:1px dotted #FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; color:#FFFFFF; list-style:none}
#contents { position:relative; padding:20px; background: #999999; font-size:12px; font-family:Verdana; color:#FFFFFF; width:380px; float:left; height:400px}
#text { padding:5px; line-height:150%; font-family:Verdana; text-align:justify}
#links { position:relative; float:left; background:#CCCCCC; width:100px; padding:20px; clear:right; height:400px}
#copy { position:relative; clear:both; background: #333333; font-family: Verdana; font-size:50px; font-weight:bold; color:#FFFFFF; width:760px; padding:20px }

 

Posted by 은둔고수
프로그램/html,css2010. 2. 19. 11:40

[css] IE(익스플로러) 버전별 호환성 문제 해결 - Hack(핵)


[소스 예]
<!--[if lt IE 6]>
<script src="IE6.js" type="text/javascript">
<![endif]-->


[설명]
IE : [if IE] - IE일 경우에만 처리한다.
IE 버전 : [if IE 7] - 해당 버전의 IE일 경우에만 처리한다. (5, 5.5, 6, 7, 8)
! : [if !IE]  IE가 아닐 경우에만 처리한다.
lt : [if lt IE 5.5]  IE버전이 5.5미만일 경우에만 처리한다.
lte : [if lte IE 6]  IE버전이 6이하일 경우에만 처리한다.
gt : [if gt IE 5]  IE버전이 5초과일 경우에만 처리한다.
gte : [if gte IE 7]  IE버전이 7이상일 경우에만 처리한다.
() : [if !(IE 7)]  조건을 결합하여 처리한다. IE버전이 7이 아닐경우에만 처리한다.
& : [if (gt IE 5)&(lt IE 7)]  조건을 AND로 결합하여 처리한다. IE버전이 5초과 7미만일 경우에만 처리한다.
| : [if (IE 6)|(IE 7)]  조건을 OR로 결합하여 처리한다. IE버전이 6 또는 7일 경우에만 처리한다.

참고> CSS HACK(핵)을 사용하는 법도 있다. 

Posted by 은둔고수
프로그램/html,css2009. 12. 7. 13:38

ie(익스플로러) iframe 배경색상 변경하기?


ie에서 iframe 배경색상을 설정하기 위해
style="background-color:#000000;" 등 이런저런 방법을 다 동원해보지만
설정을 할 수가 없다.
다만 FF(fire fox:파이어폭스)에서는 가능하다.

그럼,
아이프레임(iframe) 배경색상을 어떻게 하면 바꿀 수 있을까?

iframe영역내 화면은 별도로 이루어져있으며 해당 화면의 영향을 받기 때문에
예를 들어 src="a.html" 이고 배경 색상이 빨간색이면 iframe 영역이 빨간색이 된다.
따라서 배경색상을 설정할 수 없으며 다만, iframe 페이지의 배경색을 투명하게
할 수 있는 속성을 지원을 하기 때문에 이 속성을 이용할 수 있다.

allowtransparency

소스 예>
<iframe src="a.html" allowtransparency="true"></iframe>
참고: Internet Explorer 5.5 버전 이상부터 지원 

Posted by 은둔고수

티스토리툴바