IT & 기타/CSS

해당되는 글 21건 가로형 세로형 가로형2 목차형

IT & 기타/CSS 2020.05.09. 00:23 (8)

CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법

요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우가 사용될 것입니다. 또 다른 방법으로 텍스트의 절반 높이에만 형광펜 효과를 주는 것도 가능합니다. 전체 높이에 형광펜 효과를 주는 것은 일반적인 백그라운드 컬러를 적용하면 되므로 여기에서는 밑줄 형태로 형광펜 효과를 주는 방법과 텍스트의 절반 높이에만 형광펜 효과를 주는 방법에 대해 간단히 설명하겠습니다. 목차 CSS로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법은 하루일기님의 티스토리 본문 링크 부분 형광펜 밑줄 효과 글을 참고할 수 있습니다. 다음과 비슷한 CSS..

IT & 기타/CSS 2020.04.23. 00:01 (2)

CSS로 텍스트 라인 수 제한하는 방법

상황에 따라 텍스트 라인 수를 줄이고 싶은 경우가 있습니다. CSS로 텍스트 라인 수 제한하는 방법을 사용하면 비록 제약이 있지만 제일 간편한 것 같습니다. 목차 CSS로 텍스트 라인 수 제한하기 이 티스토리 블로그의 포스트 타이틀이 너무 긴 경우 모바일 기기에서 광고가 가리는 현상이 나타나는 것을 발견했습니다. 이렇게 광고가 가리게 되면 애드센스 정책 위반이 될 가능성이 있습니다. 텍스트 라인 수를 하나로 제한하려면 다음과 같은 CSS 코드를 사용할 수 있습니다. div{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 이 코드를 적용하면 말 줄임 기호(ellipsis)가 생성되고 자연스럽게 한 줄로 줄어듭니다. 2줄 이상으로 줄이려..

IT & 기타/CSS 2020.04.07. 18:10

[CSS] 부모 컨테이너 크기가 제한된 div의 너비를 전체 폭으로 확장하는 방법

이 티스토리 블로그에는 PC에서 마우스를 스크롤하면 메뉴가 상단에 고정되는 스크립트가 적용되어 있습니다. 하지만 상단에 고정될 때 메뉴의 크기가 맞지 않아서 보기가 좋지 않았습니다. 위의 그림과 같이 메뉴 부분의 크기가 전체 폭이 아니어서 조금 어색하게 표시되고 있습니다. 귀찮아서 이 문제를 미루고 있다가 간단한 CSS 코드를 넣어 해결했습니다. 이제 PC에서 스크롤해도 왼쪽 부분이 잘리는 현상이 발생하지 않습니다. 부모 요소의 크기가 제한되어 있는 상황에서 하위 요소의 크기를 화면 폭에 맞게 확장하려는 경우 다음 글들을 참고하여 시도해볼 수 있습니다. Expand a div to fill the remaining width (div를 확장하여 남아 있는 너비를 채우는 방법) Full Browser Wi..

IT & 기타/CSS 2020.03.26. 00:01 (5)

텍스트 링크에 마우스 오버 시 텍스트 변경하는 방법 [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..

IT & 기타/CSS 2019.11.12. 12:11 (15)

이미지 무한 회전 애니메이션 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..

IT & 기타/CSS 2019.10.22. 10:50 (15)

CSS: 대문자로 또는 소문자로 바꾸는 속성 - text-transform

제목이나 인용구의 모든 글자가 대문자로 표시되는 경우가 있습니다. 그런 경우 CSS의 text-transform 속성을 사용하여 소문자로 변환할 수 있습니다. text-transform 속성을 이용하여 대문자 또는 소문자로 변환하더라도 본래의 텍스트는 그대로 유지됩니다. (즉, 브라우저상에서만 대문자 또는 소문자로 변환되어 표시됩니다.) text-transform 속성 정의 및 사용법 text-transform 속성은 텍스트의 대소문자 표시 형식을 제어합니다. 기본 값: none 상속: Yes 버전: CSS1 JavaScript 문법: object.style.textTransform="uppercase" 한글에서는 대소문자가 없으므로 이 속성은 한글에는 영향을 미치지 않습니다. 브라우저 호환성 CSS 문..

IT & 기타/CSS 2019.10.20. 06:34

p 태그에 마진(margin) 여백이 적용되지 않는 경우

인용구(Blockquote) 내의 태그에 여백(margin)이 적용되지 않는 문제가 종종 발생합니다. 예를 들어, 워드프레스 Newspaper 테마의 인용구(blockquote)에서 태그에 margin-top이나 margin-bottom을 적용해보아도 먹히지 않았습니다. p 태그에 마진(margin) 여백이 적용되지 않는 경우 이 문제에 대하여 검색해보니 stackoverflow의 Margin-top not working for and tag? ( 태그와 태그에서 Margin-top이 작동하지 않는 문제) 글에서 이 문제를 다루고 있습니다. Margin Collapsing이라는 문제와 관련이 있는 것 같습니다. Margin Collapsing은 "여백 상쇄", "마진 겹침" 등으로 번역되어 있네요. Ma..