Category Archives: HTML/CSS

IE6 에서만 작용하는 CSS 정의 (*html)

By | 6월 26, 2009
0 Comment

# 용법       공통적으로 CSS가 다 적용되는데 IE6 에서만 문제가 발생할 때 다음과 같이 추가적으로 속성을 지정해 준다.    *html #content{ height:450px } # 사용 예시          id가 content 인 div 에 최소 높이를 주기 위한 설정.     min-height 라는 속성이 IE6 에 적용되지 않기 때문에 *html 로 추가해 주었다.     기존에 정의한 스타일 속성이… Read More »

파이어폭스에서 이유를 알 수 없게 레이아웃이 깨질 때

By | 6월 25, 2009
0 Comment

경험담 1. <img>태그를 <a> 태그가 감싸고 있었는데, 보기좋게 정렬한답시고 <a>태그를 엔터를 쳐서 내려놓았다. 근데 그게 화근이었던 것. 오로지 파이어폭스에서만 레이아웃이 깨졌었는데, <a>태그와 </a>태그가 감싸고 있는 <img>태그를 공백없이 찰싹 붙여 놓으니까 해결되었다. 대체 이런 걸 어떻게 아냐구 -.- !!!! 이놈의 크로스브라우징!!

[펌글] IE6,7 에서 position:relative, position:absolute 속성의 z-index 버그

By | 6월 22, 2009
0 Comment

– 출처 : http://www.highca.com/114 – IE6이나 7 에서는 position:relative 및 position:absolute 에서 z-index 가 먹지 않는 버그가 있다. <div style=”position:relative; background:black; color:white;”> 까만놈1 <div style=”position:absolute; top:20px; left:40px; background:white; color:black; border:1px solid red; z-index:1000″> 창구1 </div> </div> <div style=”position:relative; background:black; color:white;”> 까만놈2 <div style=”position:absolute; top:20px; left:40px; background:white; color:black; border:1px solid red;”> 창구2 </div> </div> 위  예제와 같이… Read More »

[펌글] css float

By | 6월 22, 2009
0 Comment

[출처] css float |작성자 성아에미 엘리먼트에 float 속성을 주면 배치가 어떻게 되는지 그림으로 그려봤습니다. float 속성을 주게 되면 그 엘리먼트는 공중으로 떠오르고?  나머지 엘리먼트들이 공중부양된 엘리먼트가 없었던 듯이 배열됩니다.  떠오른 엘리먼트 아래 자리잡은 엘리먼트 안의 컨텐츠는 떠오른 엘리먼트의 그늘을 피해 흐릅니다. 만약 그 아래 연두색 부분까지 파란 엘리먼트에 가려지면 안되는 상황이라면 연두색 엘리먼트에 clear 속성을… Read More »

[펌글] DL, DT, DD 태그

By | 5월 13, 2009
0 Comment

[출처] DL,DT,DL 태그|작성자 한사람 <DL> 은 정의목록에서 정의문으로 설정될 텍스트를 나타냄 <DT> 는 정의목록에서 용어 부분.. <DD> 는 용어에 대한 목록이나 설명 부분.. ex)  <DL>     <DT>제1조</DT>         <DD>남자는 여자를 사랑한다.</DD>     <DT>제2조</DT>         <DD>여자는 남자를 사랑한다.</DD> </DL> 이라고 입력하면    제1조        남자는 여자를 사랑한다 제2조        여자는 남자를 사랑한다  

[펌글] input type='text' 세로 가운데 정렬 (인풋박스 내의 텍스트 가운데 정렬)

By | 4월 17, 2009
0 Comment

– 출처 : http://jucheck.net/blog/21 – <input name=”이름” type=”text” style=”border:0 padding-top:2; text-align:center;” /> —————————————————————- justify 는 가로 정렬입니다. text-align 제가 알기로는 텍스트박스에서 세로 정렬은 없는걸로 알고 있습니다. 편법이 있다면 padding-top을 2~3 px정도 주시면 될듯하구요. ————————————————————- <input type=’text’ style=’text-align:center’> text-align:center는 가로 가운데 정렬입니다.  세로의 가운데 정렬은 어떻게 구현하는지.. text-valign:middle로 하니 안되는 군요… ^^;  —————————————————————- vertical-align 이라는 속성이 있긴… Read More »

[펌글] div 테두리, 배경색 지정하기

By | 4월 9, 2009
0 Comment

– 출처 : http://homepagego.tistory.com/31 – div 테두리, 배경색 지정하기. css 2009/03/28 14:50 div에 테두리와 배경식을 지정하면 더욱 멋진 웹 페이지를 만들 수 있다. <head> <style> #main{margin: 0 auto; width:600px; height:150px; background-color:#888888; border-left:1px solid #333333; border-right:1px solid #333333; float:left;} </style> </head> <div id=”main”>내용</div> style. background-color:#색상; – 배경색 지정. border-left:값px solid #색상; – 왼쪽 테두리 값과 색상 지정.… Read More »

[펌글] 글자 간격 맞추기 letter-spacing:2em

By | 4월 8, 2009
0 Comment

[출처] letter-spacing 활용하기|작성자 히카 『가입기간』은 그냥 이렇게 쓰고, 『<span style=”letter-spacing:2em”>연령</span>』     이렇게 하는 것이 내가 쓰는 방식이다..   2글자가 들어가는 공간을 letter-spacing과 단위 em을 활용해 맞추면 간단하다~  

[펌글] INPUT 태그에서 숫자만 입력 받기

By | 3월 30, 2009
0 Comment

[출처] [JSP] INPUT : 숫자만 입력하기|작성자 시작이반 1. INPUT 태그내에서 한줄처리 onKeypress = “if(event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;” 2. function 처리 <script> function onlyNumber(){ if((event.keyCode<48)||(event.keyCode>57)) event.returnValue=false; } </script>   <input type=”text” maxlength=”2″ onKeypress=”onlyNumber();” style=”ime-mode:disabled”>  

일정 길이 이상의 텍스트는 감추고, 일정 길이까지만 화면에 보여주고 싶을 때

By | 3월 30, 2009
0 Comment

1. 텍스트를 <div> 태그로 감싼다. 2. <div> 의 style 속성으로 원하는 width, height 를 설정하고, overflow:hidden 을 추가한다. 3. <td>태그 안에서 자동줄바꿈을 하지 않기 원한다면 <nobr></nobr>로 텍스트를 감싸준다. 4. 텍스트가 짤려서 보이지 않게 되므로 div의 title 속성에 전체 문장을 써 넣어 주면 더 좋겠다. (alt 효과) # 직접 해 본 예제, 그런데 글자가 어중간하게 걸쳐서… Read More »

[펌글] 마우스 커서 손모양으로 바뀌게 하기

By | 3월 23, 2009
0 Comment

* jQuery를 사용한다면 다음과 같이 처리할 수 있다.      $(obj).css(‘cursor’, ‘pointer’); * 되돌리기        $(obj).css(‘cursor’, ‘default’);  * 참고     mouseover 이벤트와 착각하지 말자! 이벤트 바인딩이 아니라 CSS다!  예전에는 아래와 같은 것들을 사용했었는데 지금은 jQuery가 편리해서 아래의 방법은 잘 사용하지 않는다. —————————————————————————————————————– 예1) img 태그 등에서 다음의 속성 사용             <img …… Read More »

[펌글] 윈도우 크기, body 크기 얻기

By | 3월 23, 2009
0 Comment

[출처] [javascript]윈도우 크기, body 크기 얻기|작성자 왕건달   윈도우 높이 : document.documentElement.clientHeight 윈도우 폭 : document.documentElement.clientWidth  body 높이 : document.body.scrollHeight   윈도우란 브라우저의 크기를 말하고 body 크기란 브라우저가 보여 주고 있는 내부 body 의 총 길이다.  

CSS 스타일 시트(style)가 죽어도 안먹을 때!

By | 3월 21, 2009
0 Comment

HTML 선언부를 주목하자! (아래 예) <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> HTML 선언이 어떻게 되어있느냐에 따라서 스타일이 안먹을 수도 있는 것 같다.