input type=image ,text ,password 를 별도로 style 지정 하는법

웹표준에 맞춰 사이트를 진행하다보니 드자이너선생님이 css를

img               { border-spacing:0px;border-style:none;padding:0px; border:0 none; vertical-align:middle; }

저런식으로 이미지 태그 전체에 지정하다보니

input type=image 도 ie에서는 img 태그로 인식했는지... 스타일이 먹어버려서 곤란했었다

그래서 지식신과 구글신을 뒤져가며 찾아낸 결과

style 에서

input[type=image] , input[type="image"] , input:image , input.image 등 별별게 많이 나왔지만

영문사이트를 찾아보니

ie에서 input[type=image]  이속성은 적용이 되지않는다고 했다

쿨하게 포기하고 jquery 로 작업한후 phpschool에 물어봤더니.. 아래와같은 답변이 나왔다.


처리방법은 2가지정도로 볼수 있는데

1.jquery 를 이용한 방법
일단 쉽고 빠르다.

<script type="text/javascript" src="../Anyjs/jquery-1.4.js"></script>
<script>
 $(function(){
  $("input:image").css("vertical-align","middle");
 });
</script>

input image selector 를 찾아 css로 v-align 만 지정해줬다.


2.style 옵션 중 expression 를 활용
input{vertical-align:expression((this.type=="image")? 'middle' : ''); }

type==image  true 인 경우 middle  아니면 '' 을 준것인데
둘다 빠르게 적용 가능하다.



신고

댓글을 달아 주세요


참고링크 : http://jaweb.co.kr/study/35.php

리스트 사진 (1.jpg)




실제 이미지 사진 (2.jpg)






사진은 상당히 허접한데...

내용이 뭐냐면

2.jpg 라는 파일이 있다고 쳤을때

위에처럼 보여지게 하는 소스다.

마우스 오버시 우측에 있는 모양이 보여지게 된다.

소스는 간단하게만 작성해둔상태.. 정리할거 하고 class 로 묶은 뒤 position 만 바꿔서 쓰면 문제가 없을거로 보인다.

아래 펑션은

bol 값이 true인 경우 50px 우측으로. false 인 경우 0으로 움직이게끔 작업 해놓은 것이다.

이는 스크립트의 style.backgroundPosition 속성을 이용해 작업한 것..

pos 는 원래의 position height 값을 적어주면 된다.


<style type="text/css">
 
   #gm {
      width:50px;
      height:25px;
      background: url(./image/2.jpg);
      cursor:pointer;
   }
 
   #gm2 {
      width:50px;
      height:25px;
      background: url(./image/2.jpg);
   background-position:0 -25px;
      cursor:pointer;
   }
 
   #gm3 {
      width:50px;
      height:25px;
      background: url(./image/2.jpg);
   background-position:0 -50px;
      cursor:pointer;
   }
 
</style>
 
<script type="text/javascript">
 
<!--
 function on_spr(bol,val,pos){
  num=(bol ? 50:0);
  val.style.backgroundPosition = num + "px "+ pos +"px";
 }
//-->
 
</script>
 
<div id="gm" onmouseover="on_spr(true,this,0);" onmouseout="on_spr(false,this,0);"></div>
<div id="gm2" onmouseover="on_spr(true,this,-25);" onmouseout="on_spr(false,this,-25);"></div>
<div id="gm3" onmouseover="on_spr(true,this,-50);" onmouseout="on_spr(false,this,-50);"></div>
 
</div>
신고

댓글을 달아 주세요


<td style="text-align:justify;text-justify:inter-word;">

위 스타일은 왼쪽 오른쪽 양 끝을 정렬 해준다.
참고링크  : http://jaweb.anyhost.co.kr/study/29.php


신고

댓글을 달아 주세요

input text , radio , select 정렬

Posted by 비회원 프로그래밍/HTML/CSS : 2010.02.18 15:13
해당 input 혹은 select 에 아래와 같이 스타일을 주면 자동 정렬이 된다.

style="vertical-align:middle"
신고

댓글을 달아 주세요

jquery 로그인창

Posted by 비회원 프로그래밍/jQuery : 2010.01.30 11:45
아이디, 패스워드가 맞는경우에만 로그인 버튼이 보이게끔 작업해둔 페이지입니다.

현재 j_board 라고 공부용으로 만드는 게시판에 적용되어있습니다.




<? include "../_include/adm_header.php"; ?>
<? include "../_include/js_inc.php"; ?>
<? include "../_include/func_inc.php"; ?>

<? include "../_include/jquery_inc.php"; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> jboard 로그인 </TITLE>
<style>
#result{
text-align:center;
}
#insert_div{
vertical-align:middle;
}
.input_box{
width:120px;
height:21px;
border:1px solid #9A9A9A;
border-bottom:1px solid #D8D8D8;
border-right:1px solid #D8D8D8;
color:#404040; 
vertical-align:middle;
padding:3px 0 0 3px;
</style>
<script language="javascript">
$(function(){
$("#ad_pw,#ad_id").keyup(function(){
if($("#ad_id").val()){
if($("#ad_id").val()=="admin" && $("#ad_pw").val()=="admin1"){
$("#result").css("background-color","skyblue").html("<input type='button' value='login' onclick='ad_form_chk()'>");
}else{
if($("#ad_pw").val()){
$("#result").css("background-color","hotpink").text("패스워드가 다릅니다.");
}else{
$("#result").css("background-color","yellow").text("비밀번호를 입력 해주세요.");
}
}
}else{
$("#result").css("background-color","yellow").text("아이디를 입력 해주세요.");
}
})
});


var state="false";
function ad_form_chk(){
al_f("ad_id","아이디");
al_f("ad_pw","패스워드");
if(state=="true"){
ad_form.submit();
}
}
</script>
 </HEAD>

 <BODY>
  
 <table>
 <form action="login_cook.php" name="ad_form" onsubmit="return ad_form_chk();">
<tr>
<td>
<div id="insert_div">
id : <input type="text" id="ad_id" name="ad_id" tabindex="1" accesskey="l" datatype="alphanumeric" mask="-_." class="input_box">
<br>
password : <input type="password" id="ad_pw" name="ad_pw" class="input_box" tabindex="2" >
</div>
<div id="result">
</div>
</td>
</tr>
</form>
</table>

 </BODY>
</HTML>
신고

'프로그래밍 > jQuery' 카테고리의 다른 글

Jquery 1.4 버전에 추가된 새 기능 15개  (0) 2010.02.04
jquery ui 적용사례  (2) 2010.01.30
jquery 로그인창  (0) 2010.01.30
jquery select,checkbox 중복체크  (0) 2010.01.25
jquery 유효성검사  (0) 2010.01.25
jquery 테이블 색변경  (0) 2010.01.25
태그 : CSS, JQuery, keyup, val, 로그인

댓글을 달아 주세요

jquery select,checkbox 중복체크

Posted by 비회원 프로그래밍/jQuery : 2010.01.25 17:42
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  
<? include "../Anyjquery/jquery_inc.php"; ?>
<script language="javascript">
$(function(){
$("input[name='check_fruit']:checkbox").click(function(){
checkedlist="";
$("#select_fruit>option").removeAttr("selected");
$("input[name='check_fruit']:checkbox:checked").each(function(){
$("#select_fruit>option[value='"+$(this).val()+"']").attr("selected","selected");
checkedlist+=$(this).val()+", ";
//checkedlist+=$(this).parent().prev().text()+", ";
})
$("#multi_fruit").val(checkedlist);
});

$("#select_fruit").change(function(){
checkedlist="";
$("input:checkbox").removeAttr("checked");
$("#select_fruit option:selected").each(function(){
$("input:checkbox[value='"+$(this).val()+"']").attr("checked","checked");
checkedlist+=$(this).val()+", ";
})
$("#multi_fruit").val(checkedlist);
});
//select_list
//check_list
$("#select_list").hide();

$("#check_button").click(function(){
$("#select_list").hide("slow");
$("#check_list").show("slow");
});

$("#select_button").click(function(){
$("#check_list").hide("slow");
$("#select_list").show("slow");
});
});
</script>
 </HEAD>

 <BODY>
<table>
<tr>
<td>
<div id="check_list">
글쓴이 <input type="checkbox" name="check_fruit" value="글쓴이">
제목 <input type="checkbox" name="check_fruit" value="제목">
내용 <input type="checkbox" name="check_fruit" value="내용">
</div>
<br>
<div id="select_list">
<select id="select_fruit" multiple size="3">
<option value="글쓴이">글쓴이</option>
<option value="제목">제목</option>
<option value="내용">내용</option>
</select>
</div>
<br>
<div>
<input type="text" id="multi_fruit">
</div>
<br>
<div id="result">
<input type="button" id="check_button" value="checkbox 형태로 바꾸기">
<input type="button" id="select_button" value="select 형태로 바꾸기">
</div>
</td>
</tr>
</table>
  
 </BODY>
</HTML>

신고

'프로그래밍 > jQuery' 카테고리의 다른 글

jquery ui 적용사례  (2) 2010.01.30
jquery 로그인창  (0) 2010.01.30
jquery select,checkbox 중복체크  (0) 2010.01.25
jquery 유효성검사  (0) 2010.01.25
jquery 테이블 색변경  (0) 2010.01.25
jquery function 생성  (0) 2010.01.22
태그 : Click, CSS, each, hide, removeAttr, SHOW, val

댓글을 달아 주세요

jquery 테이블 색변경

Posted by 비회원 프로그래밍/jQuery : 2010.01.25 17:38
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  
<? include "../Anyjquery/jquery_inc.php"; ?>
<script language="javascript">
$(function(){
//even 짝수번째
$(".sub_list:even").css("background-color","#dedede");
//odd 홀수번째
$(".sub_list:odd").css("background-color","#cecece");
//0번째
$(".sub_list:eq(0)").css("background-color","#aeaeae");

$("#change_color").toggle(function(){
$(".sub_list:even").css("background-color","#000000");
$(".sub_list:odd").css("background-color","#000aaa");
$(".sub_list:eq(0)").css("background-color","#000fff");
$("#change_color").attr("value","원래대로");
},function(){
$(".sub_list:even").css("background-color","#dedede");
$(".sub_list:odd").css("background-color","#cecece");
$(".sub_list:eq(0)").css("background-color","#aeaeae");
$("#change_color").attr("value","색바꾸기");
})
});
</script>
 </HEAD>

 <BODY>
 <table>
<tr>
<td>
<table>
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" class="subject_list">
<tr class="sub_list">
<td>번호</td>
<td>제목</td>
<td>날짜</td>
</tr>
<tr class="sub_list">
<td>1</td>
<td>제목입니다. 내용은 이곳에 없어요.</td>
<td>2010-01-25</td>
</tr>
<tr class="sub_list">
<td>2</td>
<td>제목입니다. 내용은 이곳에 없어요.</td>
<td>2010-01-25</td>
</tr>
<tr class="sub_list">
<td>3</td>
<td>제목입니다. 내용은 이곳에 없어요.</td>
<td>2010-01-25</td>
</tr>
<tr class="sub_list">
<td>4</td>
<td>제목입니다. 내용은 이곳에 없어요.</td>
<td>2010-01-25</td>
</tr>
<tr class="sub_list">
<td>5</td>
<td>제목입니다. 내용은 이곳에 없어요.</td>
<td>2010-01-25</td>
</tr>
<tr class="sub_list">
<td>6</td>
<td>제목입니다. 내용은 이곳에 없어요.</td>
<td>2010-01-25</td>
</tr>
<table>
<br>
<input type="button" value="색바꾸기" id="change_color">
</td>
</tr>
</table>
</td>
</tr>
</table>
  
 </BODY>
</HTML>

신고

'프로그래밍 > jQuery' 카테고리의 다른 글

jquery select,checkbox 중복체크  (0) 2010.01.25
jquery 유효성검사  (0) 2010.01.25
jquery 테이블 색변경  (0) 2010.01.25
jquery function 생성  (0) 2010.01.22
jquery 이용한 이미지 변환  (0) 2010.01.22
jquery 기본 엘리먼트 속성제어방법  (0) 2010.01.22
태그 : attr, CSS, EQ, even, ODD

댓글을 달아 주세요

출처 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=69784&sca=&sfl=
mb_id%7C%7Csubject&stx=ukjinplant




1. IE에도 min-height 속성이 먹힌다굽쇼? 

유동적으로 높이를 브라우저 크기만큼 변하게 하고 싶습니까? 
크기를 변하고싶으면 연락해~ 

selector { 
min-height:500px; 
height:auto !important; 
height:500px; 
} 

이렇게 하면 IE도 표태그가 부럽지 않습니다. 

2. 이미지를 부드럽게 축소하기. 
아직도 썸네일 이미지를 PHP로 작성하십니까? IE에 보기엔 너무나 민망할 정도로 축소된 그림이 너무
나 깨져보이는 당신에게 이 한줄의 CSS 코드를 바칩니다. 
물론 단순 촉소용도로는 우왕국. 

img { -ms-interpolation-mode: bicubic; } 

3. IE에 좀 세로 스크롤바 좀 없어지면 안되나? 
예 됩니다. IE에 position:fixed 처방법으로 많이 쓰이는 이 기술은 그 외에도 특효약이죠. 
html { 
overflow: auto; 
} 

4. 웹표준 박스모델, IE에게로 오렴~ 
웹표준 박스모델 가로 크기는 
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 
근데 이 망할 IE는 
margin-left + width + margin-right 

하지만 링크#2 에서는 이런 개같은 IE 박스에게 구원을 내려주셨으니.. 
슬래쉬 2개로 박스모델을 평정하다! 
#content { 
padding:10px; 
border:1px solid; 
width:200px; 
w\\idth:180px; 
} 
근데 IE5는 안되니 기대는 마셈. 

5. 왜 IE는 여백이 더늘어났지? 

float 속성을 준 다음 margin을 주면 여백이 2배가 되버리는 이상한 현상. 
허허.. 이게 갑자기 왠 날벼락이란 말이더냐! 
그러니 너는 그냥 inline으로의 여생을 계속 살아야 하겠다 하십니다. 
div#content { 
float:left; 
width:200px; 
margin-left:10px; 

/* 이것이 노마진이 추천하는 에러 처방속성. */ 
display:inline; 
} 

링크 #1은 1번 방법을 이용해 브라우저 크기가 변하면 내용 부분만 변하고 위아래 블럭은 고정되는 프레
임 같은 현상을 IE에서도 목격할 수 있습니다. 

신고

댓글을 달아 주세요

 «이전 1  다음»