CSS7 [css]테이블(표) 디자인 - HTML과 CSS를 이용한 전통적으로 표를 많이 사용하는 한국의 문서 스타일 때문에, 웹페이지에도 테이블 태그를 이용한 표작업이 빈번한 편입니다. 다음은, HTML/CSS를 이용한 테이블(표)디자인에 대해 살펴봅니다. [ border="1"의 일반적인 테이블(표) ] No Subject Date 1 http://www.naver.com 2006.11 2 http://kr.yahoo.com 2006.11 위와 같이, 테이블 테두리값 1px로 설정한다 하더라도 실제 웹브라우저 상에서는 테두리가 2px로 보입니다. 그러한 까닭은, 이 각각의 1px셀 테두리가 서로 만나면서 2px(1px+1px)이 되기 때문입니다. 아래 테이블에서와 같이 "셀 간격"을 띄워놓고 보면 그 이유를 좀 더 분명하게 이해할 수 있습니다. No Subject D.. 2009. 12. 18. [CSS] z-index IE버그 Internet Explorer 의 style 랜더링 버그(?)와 관련된 내용입니다. "Squish the Internet Explorer Z-Index Bug"에서 지적하고 있는 내용입니다. 동일한 코드를 브라우저 별로 확인해보면 IE만 다른 모양을 보여주는 것을 확인 할 수 있습니다. 부모의 z-index 값을 absolute 속성을 지닌 자식이 영향을 받아서 의도와 다르게 표시되는 버그입니다. 예제 코드 1 파이어폭스 3.0.6, 크롬 2 Beta, 사파리 4, 오페라 9.64, IE 8에 동일한 코드(1번 예제 코드)를 열었을 때의 모습입니다. z-index 값이 20인 D1i 가 D1o의 영향으로 z-index 값이 낮은 D2o에 가려지는 모습을 볼 수 있습니다. 예제 코드 2 해결 방법은 D1.. 2009. 9. 5. [CSS] 배경이미지에 관련된 속성 background-image:url(1.jpg) ; 배경이미지의 url background-repeat:no-repeat ; background-repeat:repeat ; background-repeat:repeat-x ; background-repeat:repeat-y ; 반복적으로 표현하지 않음 반복적으로 표현(디폴트) repeat-x : x 방향으로만 반복 repeat-y : y 방향으로만 반복 background-position: bottom 100px ; 표현하고자 하는 위치(상하 좌우) - left,top,right,bottom - 100px, 200px - 10%,20% background-attachment: fixed ; 배경을 고정 시키기(스크롤시) 생략하면 스크롤됨 body 태그나.. 2009. 9. 4. [CSS] 정의와 3가지 적용방법 CSS [cascading style sheets] 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게.. 2009. 9. 4. [CSS] 테두리 스타일 border-style border-style:none border-style:dotted border-style:dashed border-style:solid border-style:double border-style:groove border-style:ridge border-style:inset border-style:outset * 4개의 태드리선을 모두 다르게 적용하려면 border-top-style border-bottom-style border-left-style border-right-style 를 따로 따로 지정해야한다. ■ border-color border-color:#006699 border-style:dotted border-color:tomato border-style:dashed.. 2009. 9. 4. [CSS] Style을 이용해서 input 한글/영어 제한 -- 한글모드 -- -- 영문모드 -- -- 오직 영문 모드 -- 이경우에는 한/영 키를 바꿔도 영문만 죽어라 입력됨! 2009. 9. 4. 이전 1 2 다음
