IT & 기타/CSS
해당되는 글 21건
CSS로 텍스트 라인 수 제한하는 방법
상황에 따라 텍스트 라인 수를 줄이고 싶은 경우가 있습니다. CSS로 텍스트 라인 수 제한하는 방법을 사용하면 비록 제약이 있지만 제일 간편한 것 같습니다. 목차 CSS로 텍스트 라인 수 제한하기 이 티스토리 블로그의 포스트 타이틀이 너무 긴 경우 모바일 기기에서 광고가 가리는 현상이 나타나는 것을 발견했습니다. 이렇게 광고가 가리게 되면 애드센스 정책 위반이 될 가능성이 있습니다. 텍스트 라인 수를 하나로 제한하려면 다음과 같은 CSS 코드를 사용할 수 있습니다. div{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 이 코드를 적용하면 말 줄임 기호(ellipsis)가 생성되고 자연스럽게 한 줄로 줄어듭니다. 2줄 이상으로 줄 이..
[CSS] 부모 컨테이너 크기가 제한된 div의 너비를 전체 폭으로 확장하는 방법
이 티스토리 블로그에는 PC에서 마우스를 스크롤하면 메뉴가 상단에 고정되는 스크립트가 적용되어 있습니다. 하지만 상단에 고정될 때 메뉴의 크기가 맞지 않아서 보기가 좋지 않았습니다. 위의 그림과 같이 메뉴 부분의 크기가 전체 폭이 아니어서 조금 어색하게 표시되고 있습니다. 귀찮아서 이 문제를 미루고 있다가 간단한 CSS 코드를 넣어 해결했습니다. 이제 PC에서 스크롤해도 왼쪽 부분이 잘리는 현상이 발생하지 않습니다. 부모 요소의 크기가 제한되어 있는 상황에서 하위 요소의 크기를 화면 폭에 맞게 확장하려는 경우 다음 글들을 참고하여 시도해볼 수 있습니다. Expand a div to fill the remaining width (div를 확장하여 남아 있는 너비를 채우는 방법) Full Browser Wi..
텍스트 링크에 마우스 오버 시 텍스트 변경하는 방법 [CSS]
텍스트 링크에 마우스를 올렸을 때 텍스트를 변경하고 싶은 경우 다양한 방법으로 가능합니다. 다음은 CSS를 사용하여 마우스 오버 시 텍스트를 변경하는 예제입니다. CSS를 사용하여 텍스트 링크에 마우스 오버 시 텍스트 변경하는 방법 HTML: 회사소개 CSS: .hover-me a {font-size: 15px;} .hover-me a:hover { font-size:0; } .hover-me a:hover:before { content: 'About Us'; background-color: red; font-size:15px; } 실제 작동을 jsfiddle에서 확인해볼 수 있습니다: Demo. 아래의 예제에서는 마우스 허버 시 display:none을 적용하는 방식입니다. HTML: 3 replies..
이미지 무한 회전 애니메이션 CSS
로고나 이미지를 연속적으로 회전시키는 애니메이션 효과를 주고 싶은 경우 다음과 같은 CSS 코드를 활용할 수 있습니다. HTML 코드: CSS 코드:#rotating_img { -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } 실제 작동을 다음 jsfiddle에서 확인해볼 수 있습니다. http://jsfiddle.net/1uj0e74r/ 위의 코드는 다음 Stackoverflow 글에서 인용했습니다. 다음 글에서 자세한 내용을 살펴보시기 바랍니다. CSS3 Conti..
