본문 바로가기
반응형

Web Programing!/HTML / CSS20

HTML5 지원하지 않는 브라우져 적용하기 (HTML5 Shiv) HTML5 지원하지 않는 브라우져 적용하기 (HTML5 Shiv) 익스플로러 8.0 이하 버전은 시맨틱 태그를 전혀 지원하지 않기때문에 다음의 javascript 라이브러리를 태그 사이에 넣어 넣어 줘야 한다. 2014. 6. 14.
[CSS] 텍스트 처리 - text-overflow:ellipsis; / white-space: nowrap; / word-break:break-all; [CSS] 텍스트 처리 - text-overflow:ellipsis; / white-space: nowrap; / word-break:break-all; text-overflow:ellipsis; - 글자 길이가 width 길이를 넘기는 경우 ‘...’으로 표시해주는 기능입니다. white-space: nowrap; - 글자가 width값을 넘기는 경우 자동으로 줄 바꿈 되지 않게 해주는 기능입니다. word-break:break-all; - 영문/숫자가 박스 밖으로 넘어갈때 박스 사이즈에 맞게 줄바꿈해주는 기능입니다. 2014. 6. 13.
[CSS] 나눔고딕 웹폰트 사용하기 [CSS] 나눔고딕 웹폰트 사용하기 웹 폰트 문제 해결. @font-face troubleshooting. @font-face 규칙은 CSS3에 새로 추가된 웹 글꼴 명세입니다. 표시하려고 하는 글꼴이 시스템에 없는 경우 웹 서버에서 글꼴을 내려받아 화면에 표시해 주는 방법인데요. 마이크로소프트가 독자적으로 IE 6~8 브라우저에 지원하던 명세였는데 W3C에 제안하여 현재 CSS3 표준 초안이 되었습니다. 그러나 현실에서 사용하려면 다음과 같은 몇 가지 문제를 확실히 알고 있어야 합니다. IE 6~8 브라우저는 *.eot 형식의 글꼴만 지원한다. 하지만 W3C가 권장하는 형식은 *.woff 이다. IE 9 브라우저는 *.eot 형식과 *.woff 글꼴을 모두 지원한다. Chrome, Safari, Fir.. 2012. 7. 17.
visibility:hidden과 display:none의 차이점 웹 화면상에서 필요 없는 부분이나 a:hover 부분을 보이지 않게 하기 하기 위하여 visibility:hidden 과 display:none을 하는 경우가 종종 있습니다. 이것들의 차이는 차이점이 하나 있습니다. display:none을 하게 되면 html 은 구조상에서 사라 지게 되고 visibility:hidden의 경우에는 단지 눈에만 보 이지 않을 뿐 자기의 영역을 고수 하여 다른 것들의 위치 선정에 영향을 주게 된다는 것입니다.  a b 기존의 이런 소스를 실행하면 이렇게 나옵니다. 하지만 스타일 시트에 visibility:hidden; 을 추가 해주면 위와 같이 영역이 포함 된 상태로 나오나, display:none;과 같은 경우에는 아래와 같이 그 영역을 잡아 먹고 올라와서 b가 보여.. 2011. 12. 2.
반응형