웹표준화 썸네일형 리스트형 이미지 바꿔치기_접근성이 뛰어난 이미지탭 롤오버 ----------------------------------------------------------------------- Home Guide Magazine Archives ----------------------------------------------------------------------- 더보기 이미지 바꿔치기_파크방법 숨기고자하는 텍스트의 text-indent값으로 아주 큰 음수값을 지정 화면상에 텍스트가 있기는 하지만 아주 큰 값을 갖고 있어서 해상도가 매우 높은 모니터에서도 절대 보이지않는다 #phark { height: 26px; test-indent: -500px; background: url(phark.gif) no-repeat; } The Phark Method 더보기 이미지 바꿔치기_LIR방법 텍스트를 감추기위해 display 속성을 사용하는 대신 텍스트를 포함하는 태그의 높이를 0을 지정하고 padding-top값을 바꿔치기할 이미지와 같은 값으로 지정 별도의 span을 슬 필요가없다. ---------------------------------------------------- #lir{ padding:90px 0 0 0; overflow:hidden; background: url(lir.gif) no-repeat; height: 0p; /* 대부분의 웹브라우저를 위한 명령 */ height: 90px; /*IE5를 위한 명령*/ } Leahy/Langridge Image Replacsment ---------------------------------------------------- 대.. 더보기 이미지 바꿔치기_FIR방법 css의 background(혹은 background-image)속성을 사용해 텍스트 대신 이미지를 표시하도록함 id값을 부여해 이 머리글을 css로 완벽하게 제어 ------------------------------------------ #fir {width:200px; height:50px; background: url(fir.gif) no-repeat;} #fir span{display: none;} Father Image Replacement ------------------------------------------ 마크업을 수정하지않고 css로 이미지를 지정했지 때문에 css를 지원하지 않는 블주어나 장치에서는 이미지 텍스트를 확실하게 표시 마크업을 수정할 필요없이 css파일만 수정하면 쉽게.. 더보기 텍스트 스타일_문단 들어쓰기 -------------------- p{text-indent:3em} -------------------- 들여쓰기 너비의 단위로 em을 사용애 글꼴 크기에따라 상대적으로 조절되게함 더보기 텍스트 스타일_소형 대문자 ------------------------- font-variant: small-caps; ------------------------- 소문자의 경우 크기는 유지하면서 글씨모양은 대문자로 표시되는 것을 말한다. 더보기 텍스트 스타일_텍스트변형 -------------------------- text-transform:uppercase; -------------------------- 원본 마크업을 수정하는 번거로움없이 css만을 수정해 웹 페이지의 특정 엘리먼트나 사이트 젠체의 텍스트를 우너하는대로 대문자나 소문자로 지정할 수 있다. 더보기 인쇄를 위한 스타일_인쇄용 스타일 시트 만들기 인쇄용 스타일 사트를 만들때 기억해야할것은 대상이되는 매체이다. 웹페이지를 다루는 것이기 때문에 브라우저 창과는 달리 픽셀 기반 단위는 최선의 선택이 아니다. 더보기 인쇄를 위한 스타일_화면 스타일과 인쇄 스타일 분리하기 하나의 문서애 두개의 css파일을 지정해 하나는 화면용으로 사용하고, 하나는 인쇄용으로 사용한다고 가정 ----------------------------------------------------------------------- ----------------------------------------------------------------------- 더보기 인쇄를 위한 스타일_@media, @import ------------------------------------------------ ------------------------------------------------ 더보기 인쇄를 위한 스타일_미디어타입 -------------------------------------------------------------------- 더보기 css적용하기_대체스타일 rel속성에 alternate stylesheet 적용 title 속성을 같이 사용하여 각각의 스타일시트에 이름을 주어 나중에 선택할 수 있게 함 --------------------------------------------------------------------------- 더보기 css적용하기_일반 스타일(lo-fi)과 고급 스타일(hi-fi) 구버전의 웹브라우저에게 css를 감추도록 @import 규칙을 활용 css의 캐스케이드(cascade) 효과를 사용해 먼저 구버전과 최근 버전의 웹브라우져에서 모두 인식할 수 있는 일반스타일을 지정하고 그 다음에 @import를 사용해 고급 css스타일을지정한다. -------------------------------------------------------- 더보기 css적용하기_외부스타일시트와 @import 동시사용 더보기 css적용하기_@import 사용 @import "style.css";}}> 더보기 css적용하기_외부스타일시트 사용 반복수정의 어려움이없음 캐쉬저장 --------------------------------------------------------- --------------------------------------------------------- 더보기 css적용하기_문서안에서 style엘리먼트를 사용 임베디드 스타일시트라 부름 선언문을 실제 html문서 내에서 작성 캐시가 되지않음 동일스타일을 여러번 많은 문서에 사용했을때 중복수정의 어려움이따름 개발단계의 테스트시기에 적합함 더보기 리스트의 고급기능_리스트유형 css의 list-style-type 속성을 이용해 스타일을 지정한다. decimal : 1,2,3,4,5등 숫자(기본값) upper-alpha : 알파벳대문자 lower-alpha : 알파벳 소문자 upper-roman : 로마 대문자 lower-roman : 로마 소문자 none : 숫자를 붙이지않음 더보기 구문표현 엘리먼트_abbr, acronym ------------------------------------------------------------------- XHTML NATO ------------------------------------------------------------------- 강제로 지정할때 css ------------------------------------------------------------------- abbr{speak:spell-out;} acronym{speak:normal;} ------------------------------------------------------------------- 여러번 동일 페이지내에서 반목될때는 한번만 정의할것을 권고 더보기 구문표현 엘리먼트_cite 저자나 출판사 등의 출처 인용을 표시하기 위한 태그 이탤릭으로 표시됨 더보기 이전 1 2 다음