본문 바로가기

전체 글52

외부 스타일시트 all 모든 미디어 속성에 사용. 별도로 지정하지 않으면 기본값으로 사용. aural 발음 장치, 스크린 리더기, 그 외의 다른 오디오 문서 해석 장치에 사용 braille 점자용 화면에 사용 embossed 점자용 프린트에 사용 handheld 핸드폰이나 PDA와 같은 휴대용 디지털 기기에 사용 print 프린트하거나 프린트 미리보기에 사용 projection 프로젝터에 사용 screen 웹브라우저에 사용 tty 고정폭 문자열을 가지는 장치용 (텔레타이프, 터미널, 저사양의 휴대용 기기 등). tty 미디어 타입의 경우 픽셀 단위를 사용하면 안됩니다. tv TV에 사용 출처:http://hooney.net/2005/06/27/146/ 2017. 1. 25.
Font size 비교표 Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 2.. 2017. 1. 25.
CSS를 이용한 resize width:ｅxpression(this.width > 550 ? this.width = 550 : void(0)); max-width:550px; 게시판의 경우 첨부한 이미지 크기가 게시판의 가로 사이즈 보다 클 경우 게시판의 레이아웃을 깨뜨리게 되는데요.. 스크립트도 이미지를 원하는 크기 이하로 만들 수도 있는데요.. onload를 사용해야 되서 다른 스크립트와의 충돌이나 페이지가 다 로드된 후에 리사이즈 되기 때문에 속도가 느려서 원래의 사이즈로 뿌려졌다가 다시 작아지는 현상을 보여줍니다.. 그런데 스타일로 리사이즈를 하면 스크립트 방식보다 빠르고 타 스크립트와의 충돌할 경우도 없기 때문에 안전합니다.. 일단 ie5.0~ ie7.0,fifrefox.opera,safari 모두 적용 되구요. W3C V.. 2017. 1. 25.
투명 style filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4; 2017. 1. 25.
CSS 기본 세팅 Base.css 설명 태그 속성 설명 body {margin:0;padding:0;background-color:#fff;font-size:12px;font-family:굴림,gulim,sans-serif;color:#333;} 배경 color 필수 hr {display:none;} 레이아웃 구분(top/left/contents/footer)에만 적용 img,fieldset {border:0 none;} dl,ul,ol,li {list-style:none;} h1,h2,h3,h4,h5, dl,dt,dd, ul,li,ol, th,td, p,blockquote, form,fieldset,legend {margin:0;padding:0;} table {border-collapse:collapse;} 서로 이웃.. 2017. 1. 25.
font-family 설정시 주의해야 할 점. CSS 제작시 font-family: 돋음; 이라고 하면 안 되고, font-family: 돋음, Dotum, Baekmuk Dotum, Undotum, Apple Gothic, Latin font, sans-serif; 이라고 해야 한다. 돋음과 Dotum을 같이 써야 하는 이유는 비한국어 Windows (최소한 9x/ME)에서는 MS IE조차도 ‘돋음’을 인식하지 못 하기 때문입니다. Apple Gothic은 Mac OS X에 들어 있는 sans-serif에 해당하는 한국어 글꼴 이름입니다. 표 4에서 라틴 글꼴을 비교한 표가 있는데, Windows Corefonts는 다른 OS에서도 사용할 수 있습니다. 출처:http://hooney.net/2005/04/06/32/ 2017. 1. 25.
Table empty cell 문제 해결 Tip border-collapse:collapse;empty-cells:show 빈 cell의 테두리를 보여줄것인지 감출것인지를 지정한다. 값 show | hide | inherit 기본값 show 적용대상 'table-cell' 엘레멘트들 상속 상속됨 퍼센테이지 지정불가 미디어 Visual Value show : 비어있는 cell의 테두리를 보여준다. hide : 비어있는 cell의 테두리를 감춘다 2017. 1. 24.
새로운창 위치 조정하기 2017. 1. 24.
스크롤 따라다니는 레이어 NZEO 자유게시판 Animate 2017. 1. 24.

티스토리툴바