[Study & Job]/[Web Dev & Pentesting] 썸네일형 리스트형 ie6_Bug : li 태그 안에 display:block 적용시 공백 버그[펌] list 태그를 사용할 때 a에 배경효과를 주기 위해서 아래와 같은 코드를 많이 사용하지요. Sub 1 Sub 1 Sub 1 그럼 이제 ie6와 비교해 볼까요-ㅅ-); 역시 우리를 실망시키질 않아요... 해결법은 몇가지가 있는데요. 1. a 태그를 display:inline-block;를 시킨다. - 이 경우는 width:100%;가 되지 않기 때문에 고정된 width를 넣어 주시거나 100%를 넣어 주셔야 합니다. - 100%경우에는 padding에 관한 계산이 어렵기 때문에 추천안해요. 2. a 태그에 float:left와 clear:left를 추가 한다. - float를 해제를 해야한다는 번거로움이 있고, width 잇슈가 1번과 같죠. 3. li 태그에 border 속성을 사용한다. - li에 선.. hasLayout 속성과 홀리 핵(Holly hack)[펌] CSS로 이미지 정렬하기에서 소개했던 CSS의 clear 속성을 이용하는 float 제거(clearing float)와 동일한 효과를 내는 방법은 몇 가지가 더 있습니다. 그 중 하나인 overflow 속성을 이용하는 방법을 설명하기 전에 인터넷 익스플로러(이하 IE)만의 독자적인 속성인hasLayout에 대해서 먼저 알아보려고 하는데, 이 속성이 HTML 요소들의 레이아웃, 특히 float된 요소가 렌더링되는 방식에 크게 영향을 끼치기 때문입니다. 그러면 hasLayout 속성이란 무엇이고, 어떤 영향을 끼치는지, 그리고 어떤 방식으로 이 속성을 이용해야 하는지를 알아보도록 하겠습니다. † 이 글은 hasLayout 속성에 관한 정보로 꾸준히 업데이트되고 있는 On having layout이라는 글을 .. input 버튼 [퍼옴] 1. 첫번째 방법 인풋에 바로 이미지경로를 넣어버리는 방법. 이 방법은 텍스트가 이미지에 박혀있어야해서 글자가 다른 모든 버튼을 만들어줘야한다. 2. 두번째 방법 버튼이미지에 a태그걸어주는 방법. 테이블의 td에 인풋텍스트박스넣고 인풋버튼넣으면 같은라인인데도 들쭉날쭉 다른방법도 있을테지만 td에 넣을땐 걍 맘편히 a태그로 걸어버리기도함둥! (※ a태그로 버튼링크걸어서 만들면 키보드 엔터키로 버튼클릭안된다... 요런거 예민한 개발자님들 많으시당...) 3. 세번째 방법 배경을 따로 만들고 글자를 value=""로 넣어주는 방법. 다만 글자수별로 버튼이미지와 css를 만들어줘야하는 수고는 있지만 일을 1/10로 줄일수 있따. (※ BUT!!! 개발하기에 편리하고 입체효과 왕줘서 예쁘게하면 컨펌이 되긴하나.... 웹표준 div 코딩 전체 레이아웃 잡기 웹표준 div 코딩 전체 레이아웃 잡기 이미지 필요한 파일 index.html global.css index.html 소스 top left main bottom global.css 소스 @charset "utf-8"; /* CSS Document */ body { margin: 0px; font-size: 18px; color: #FFF; } #box { position: relative; height: auto; width: 500px; margin: auto; background-color: #F90; } #top { background-color: #333; height: 50px; width: 500px; position: relative; } #left { background-color: #09.. 기존 레이아웃 잡을때 div만을 이용한 레이아웃 -> 보통 블로그와 같은 형식의 사용시 이용 ----------------- default.css ----------------- @charset "utf-8"; @import url("base.css"); @import url("main.css"); @import url("layout.css"); @import url("section1.css"); @import url("section2.css"); @import url("board.css"); @media print {} ----------------- base.css ----------------- /* Design Geulggol WebTeam (http://ggad.co.kr/) 김지영 2010.05.05 */ /* B.. div에 그림자 씌우기 이전 1 2 다음