Kingdom

(메타 퀘스트프로 사이트에 적용된 링크 효과 구현하기) 밑줄 효과 CSS .item { position: relative; width: fit-content; cursor: pointer; } .item .label { position: relative; padding: 4px 0; font-weight: 700; font-size: 14pt; } .item .underline { position: absolute; transform: scaleX(0); transform-origin: bottom right; transition: transform 0.25s ease-out; border-bottom: solid 1px blue; width: 100%; height: 0; } .item:hover .u..

[원출처] text-overflow: ellipsis for firefox http://www.rikkertkoppes.com/thoughts/2008/6/ 제목이나 내용이 긴 경우 뒷부분을 잘라서 말줄임표 ... 로 표시하는걸, PHP 나 자바스크립트로 잘라서 하다가 이제는 CSS text-overflow 를 이용하는 경우가 많습니다. text-overflow 속성의 자르기(clip) 와 말줄임표(ellipsis) 중 ellipsis 를 사용해서 문자열을 잘라낼 수 있습니다. 이 속성을 사용하기 위해서는 overflow 와 white-space 를 아래처럼 지정해 주어야 합니다..ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsi..

인터넷 익스플로러의 골칫거리인 버그 중 하나 입니다; 겪어 보신분도 이미 있으실텐데, 문서의 마지막 글자가 중복되어 하단에 나타나는 버그 입니다. 이는 인터넷 익스플로러6(IE6)은 물론 IE7 에서도 발생합니다. 실제로 저도 예전에 이 버그를 겪었던 기억이... 해결을 못하면서 해당 부분을 지우면서 끝낸 기억이 있군요. -_-; 원인은 float:left 속성과 왼쪽과 오른쪽 DIV 테그 사이에 낀 테그 때문에 이런 현상이 발생합니다. 이 외에 주석으로 인해서도 발생할 수 있다는 군요. 왼쪽 마지막 글자가 복사되는 버그 (위 코드에서는 좀더 알기 쉽게 하기 위해서 border 속성을 추가했습니다. 이에따라 main 스타일의 width 를 202 로 지정되었습니다.) 해결 방법 및 참고 사이트 [PHP ..

우선 아래 코드는 IE 에서는 아주 잘 실행되지만, FF 에서는 가운데 정렬이 안됩니다. 이를 해결하기 위한 방법으로는 3가지가 있는데 사실상 CSS 로 해결하는게 가장 보편적이고 편하겠죠. contents FireFox 용 속성을 이용하는 방법 대부분의 경우에 가장 편하게 쓸 수 있는 방법입니다. 상위 객체에 속성을 주면 하위 객체 모두를 가운데 정렬 시킬 수 있기 때문에 편합니다. 'margin' 을 이용하는 방법 이 경우 정렬 대상이 되는 객체에 속성을 주어야 합니다. 여러 객체를 가운데 정렬 시킬때는 오히려 불편하겠죠. 단, 정렬대상이 DIV 인 경우 DIV 가 'text'가 아니므로 이 방법을 사용해야 제대로 정렬이 됩니다. 테그를 이용하는 방법 CSS 는 크게 손댈일은 없지만 HTML 코드를 ..

아래에 2가지의 CSS를 통해 라운드 테이블을 구현한 방법을 소개 합니다 테이블 + 자바스크립트 사용하는 방법 테이블에 속성에 설정값을 넣고, 자바스크립트로 DOM 객체를 동적 생성하여 구현하는 방법입니다. 이 방법은 테두리 색을 지정할 수 있다는 장점이 있습니다. 그리고 코드가 짧고, 단순하다는 점이 있습니다. 단점은 다른 옵션들은 없기 때문에 직접 코드를 수정해서 바꿔야 합니다. asdasdasd as daw e [링크] SIR - CSS [팁] 이미지 없이 모서리 라운드 테이블 만들어 최신글 구현 Nifty Corners Cube 라이브러리를 이용하는 방법 라운드 테이블을 다양한 옵션을 적용해서 만들 수 있는 라이브러리로 다운로드는 아래 링크에서 받으시면 됩니다. 다운로드 : Nifty Corner..

PHP나 ASP 등에서 문자열을 자르지 않고도 지정된 크기를 벗어나는 문자열을 알아서 정리할 수 있습니다. 인터넷 익스플로러(Internet Explorer, IE), 파이어폭스(FireFox, FF), 오페라(Opera, OP), 사파리(Safari, SF) 모두 호환됩니다. body { white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; } 참고로 긴글을 워드랩을 시키지 않고 한줄료 표시할 때에는 white-space 속성에 nowrap 값을 주면 됩니다. body { white-space:nowrap; }