본문 바로가기

webdesign/CSS

css : @page, @media print, height 100%, ------------------- 프린트 tory84.com/page.php?bbs=dev_html&bbs_idx=10 width: 21cm; min-height: 29.7cm; @page { size: A4 landscape; margin: 0; /*size: landscape;*/ } @media print { .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } viewport 속성 : - 웹브라우저의 화면을 각 디바이스에 최적화 된 크기로 표현해준다... 2017. 12. 9. 03:02 더보기
white-space, word-break white-space normal : 기본값, 공백의 수에 관계없이 한칸으로 설정 nowrap : 브라우저의 폭이나 문단 길이에 상관 없이 줄바꿈을 하지 않습니다. pre : 태그와 같은 공백을 그대로 인정 합니다. word-break break-all:모든 letter 너비에따라 끊기 keep-all:단어별로 끊기 2009. 7. 30. 19:47 더보기
Whatever:hover : 익스플로러 CSS의 hover이벤트 지원 http://frontjang.tistory.com/104 독타입이 표준렌더링 따를때만 제대로 동작함 ssss dddd ssss dddd 2009. 7. 1. 11:15 더보기
css 주석 에러 (utf-8, no BOM 으로 저장되었을때 css 영어로 주석처리) css /* */ 주석처리의 에러 utf-8, 울트라에디트 사용(no bom으로 저장함) /* */ CSS 주석에 "관(한글)"이 포함되면 IE 6에서 CSS스타일이 적용이 안된다. 물론, 파이어폭스와 IE 7 버전에서는 제대로 나옴. ------------------------------------------- utf-8의 경우 css 주석 영어처리해야한다 함 -- ?? - UTF-8로 전환한 후에 CSS 주석이 문제인 경우, 이를 UTF-8 NO-BOM 으로 저장하면 깨지는 현상 없음 확인 2009. 6. 2. 14:16 더보기
비표준태그 <font>를 썼을때 발생할 수 있는 문제 는 HTML 이 4.x 대로 버젼업되면서 사라진 태그이다. 크게 문제 없어보이지만, 역시 비표준태그를 지양해야하는 이유가 있구나.. 싶은 상황이 발생해서 기록. 비표준 태그 지양합시다 :) ---------------------- 구 에디터의 font태그 생성 예 ---------------------- 홈페이지 메인화면에 alt 태그 추가. 위와같이 구 에디터중에 태그를 넣어서 글작성이 되도록 하는 것들이 아직 남아있는데, 이렇게 해서 태그가 아래와같이 삽입되었을 경우 line-height가 스타일시트의 td에 지정된 font-size의 line-height에 맞춰지기때문에 글씨가 클 경우 글이 겹치게 된다. (이때, 태그에 직접 style="line-height:100%"로 지정해도 당연히 수정되지 .. 2008. 7. 29. 11:43 더보기
hr - hr태그로 눈에 보이지 않는 간격 형성하기 라인이 보이지 않는 hr 간격 형성하기 1. border속성을 transparent로 주고, color를 배경색과 일치하게 적용해준다. border와 color 속성을 배경색과 일치하게 적용해준다. -> ie, firefox 모두 ok 2. color를 배경색과 일치하게 적용해준다. -> ie 에서만 ok 3. border와 color 속성을 transparent로 준다. -> firefox 에서만 ok 2008. 7. 3. 22:14 더보기
IE 6 FLOAT된 엘리먼트의 더블마진 버그 해결방법 - 출처 : hyeonseok.com float: left; margin-left: 10px; 과 같은 선언을 할때 left margin 의 값은 10 pixel 이 아닌 20 pixel 이 된다. 때문에 float block 에는 float 된 방향과 같은 방향의 margin 을 사용하지 않아야 한다. 이 현상은 첫번째 float 된 block 에서만 발생을 하며 float 된 block 에 연이어 있는 float block 에서는 발생하지 않는다. display: inline 을 사용하면 이러한 현상을 해결할 수 있다. 2008. 3. 24. 11:00 더보기
IE 6 peek-a-boo bug 처음에는 텍스트가 보이지 않다가 페이지를 다시 로드하면 나타난다. 플로트가 지정되지 않은 엘리먼트 다음에 플로트가 지정된 엘리먼트가 나오고 그 다음 플로트를 해제하는 엘리먼트가 있을때 나타난다. 플로트를 해제하는 엘리먼트가 플로트된 엘리먼트와 접하게 되면 그 사이에 있는 플로트가 지정되지 않은 엘리먼트가 상위 엘리먼트의 배경색 뒤나 배경이미지 뒤로 사라져버리고 이 페이지를 다시 로드해야만 나타난다. 해결법 상위 엘리먼트의 배경색이나 배경이미지 제거 2. 플로트된 엘리먼트와 접하는 엘리먼트가 플로트를 해제하지 않도록 하는 방법 3. 컨테이너 엘리먼트에 크기값을 지정 line-height 를 지정 4. 플로트된 엘리먼트의 position 속성값을 지정하고 컨테이너에 relative를 지정 -------- 출.. 2008. 2. 21. 07:50 더보기