요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우가 사용될 것입니다. 또 다른 방법으로 텍스트의 절반 높이에만 형광펜 효과를 주는 것도 가능합니다. 전체 높이에 형광펜 효과를 주는 것은 일반적인 백그라운드 컬러를 적용하면 되므로 여기에서는 밑줄 형태로 형광펜 효과를 주는 방법과 텍스트의 절반 높이에만 형광펜 효과를 주는 방법에 대해 간단히 설명하겠습니다. 목차 CSS로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법은 하루일기님의 티스토리 본문 링크 부분 형광펜 밑줄 효과 글을 참고할 수 있습니다. 다음과 비슷한 CSS..
상황에 따라 텍스트 라인 수를 줄이고 싶은 경우가 있습니다. CSS로 텍스트 라인 수 제한하는 방법을 사용하면 비록 제약이 있지만 제일 간편한 것 같습니다. 목차 CSS로 텍스트 라인 수 제한하기 이 티스토리 블로그의 포스트 타이틀이 너무 긴 경우 모바일 기기에서 광고가 가리는 현상이 나타나는 것을 발견했습니다. 이렇게 광고가 가리게 되면 애드센스 정책 위반이 될 가능성이 있습니다. 텍스트 라인 수를 하나로 제한하려면 다음과 같은 CSS 코드를 사용할 수 있습니다. div{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 이 코드를 적용하면 말 줄임 기호(ellipsis)가 생성되고 자연스럽게 한 줄로 줄어듭니다. 2줄 이상으로 줄 이..
이 티스토리 블로그에는 PC에서 마우스를 스크롤하면 메뉴가 상단에 고정되는 스크립트가 적용되어 있습니다. 하지만 상단에 고정될 때 메뉴의 크기가 맞지 않아서 보기가 좋지 않았습니다. 위의 그림과 같이 메뉴 부분의 크기가 전체 폭이 아니어서 조금 어색하게 표시되고 있습니다. 귀찮아서 이 문제를 미루고 있다가 간단한 CSS 코드를 넣어 해결했습니다. 이제 PC에서 스크롤해도 왼쪽 부분이 잘리는 현상이 발생하지 않습니다. 부모 요소의 크기가 제한되어 있는 상황에서 하위 요소의 크기를 화면 폭에 맞게 확장하려는 경우 다음 글들을 참고하여 시도해볼 수 있습니다. Expand a div to fill the remaining width (div를 확장하여 남아 있는 너비를 채우는 방법) Full Browser Wi..
텍스트 링크에 마우스를 올렸을 때 텍스트를 변경하고 싶은 경우 다양한 방법으로 가능합니다. 다음은 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: button {width:6em} button:hover s..
로고나 이미지를 연속적으로 회전시키는 애니메이션 효과를 주고 싶은 경우 다음과 같은 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..
제목이나 인용구의 모든 글자가 대문자로 표시되는 경우가 있습니다. 그런 경우 CSS의 text-transform 속성을 사용하여 소문자로 변환할 수 있습니다. text-transform 속성을 이용하여 대문자 또는 소문자로 변환하더라도 본래의 텍스트는 그대로 유지됩니다. (즉, 브라우저상에서만 대문자 또는 소문자로 변환되어 표시됩니다.) text-transform 속성 정의 및 사용법 text-transform 속성은 텍스트의 대소문자 표시 형식을 제어합니다. 기본 값: none 상속: Yes 버전: CSS1 JavaScript 문법: object.style.textTransform="uppercase" 한글에서는 대소문자가 없으므로 이 속성은 한글에는 영향을 미치지 않습니다. 브라우저 호환성 CSS 문..
인용구(Blockquote) 내의 태그에 여백(margin)이 적용되지 않는 문제가 종종 발생합니다. 예를 들어, 워드프레스 Newspaper 테마의 인용구(blockquote)에서 태그에 margin-top이나 margin-bottom을 적용해보아도 먹히지 않았습니다. 이 문제에 대하여 검색해보니 stackoverflow의 Margin-top not working for and tag? ( 태그와 태그에서 Margin-top이 작동하지 않는 문제) 글에서 이 문제를 다루고 있습니다. Margin Collapsing이라는 문제와 관련이 있는 것 같습니다. Margin Collapsing은 "여백 상쇄", "마진 겹침" 등으로 번역되어 있네요. Margin Collapsing에 대한 자세한 정보는 Mozi..
이 블로그에는 현재 지난주에 공개된 Book Club이라는 스킨이 적용되어 있습니다. Book Club 스킨에서 사이드바에 '최근 댓글' 위젯을 표시하면 댓글들이 리스트 불릿(List Bullet) 없이 표시되어 댓글들을 구분하는 것이 조금 불편하게 되어 있습니다. 댓글들을 쉽게 구분할 수 있도록 리스트 불릿(리스트 마커)를 CSS로 추가해보았습니다. 하지마 크롬에서는 리스크 불릿이 정상적으로 표시되었지만 IE에서는 불릿 뒤에 줄바꿈(line-break)이 추가되어 엉성하게 보였습니다. 이 문제에 대해 리서치해보니 문제의 원인이 댓글에 적용된 링크(hyperlink) 때문이라는 것을 알게 되었습니다. 다음과 같이 anchor 요소에 display: inline;을 적용하니 문제가 해결되었습니다.ul li..
페이지의 오른쪽 또는 왼쪽에 고정되는 퀵메뉴나 소셜바(Social bar), 사이드바 등을 만들 때 다음과 같이 CSS의 fixed를 사용하면 편리합니다.width: 160px; /* Set the width of the sidebar or side tab */ position: fixed; /* Fixed Sidebar or Side Tab (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 0; /* Stay at the top */ right: 0; /* Stay at the right */ 위와 같은 코드를 사용하면 브라우저의 오른쪽에 해당 요소가 고정됩니다. 퀵메뉴나 어떤 요소를 콘텐츠 바로 옆에 고정되도록 만들고 싶은 경우가 있을 ..
이 블로그의 사이드바를 본래 오른쪽에 배치했지만 어제 하루 동안 왼쪽으로 이동시켜보았습니다. 사이드바가 왼쪽에 있으니까 매우 어색하게 느껴지네요. SEO(검색엔진최적화) 측면에서는 사이드바가 오른쪽에 있는 것이 유리한 것으로 알려져 있습니다. 왼쪽 사이드바와 오른쪽 사이드바: 어느 것을 선택해야 할까? Flexible Box 레이아웃 모델의 하위 속성인 flex-direction 속성을 이용하면 수월하게 사이드바 위치를 바꿀 수 있습니다. flex-direction 속성에는 4가지 값을 사용할 수 있습니다. row (기본값): 텍스트 방향과 동일 row-reverse: 텍스트 방향과 반대 column: row와 동일하지만 상->하 방향 column-reverse: row-reverse와 동일, 상->하 ..
최근댓글