IT & 기타/CSS
해당되는 글 25건
웹 페이지가 모바일 기기에서 가로 모드로 표시되도록 하는 방법
웹 페이지를 모바일 기기에서 세로 모드가 아닌 가로 모드에 보도록 만드는 경우가 있습니다. 예를 들어, 유튜브 영상 등을 웹 페이지에 삽입하는 경우, 사용자의 모바일 기기가 세로 모드로 설정되어도 가로 모드로 표시되기를 원할 수 있습니다. 웹 페이지가 모바일 기기에서 가로 모드로 표시되도록 하는 방법 웹 페이지가 모바일 장치에서 가로 모드로 강제로 표시되도록 해야 하는 경우가 있을 수 있습니다. HTML5 webapp manifest 사용 웹앱(webapp)에서는 HTML5 webapp manifest를 사용하여 가능합니다. html5rocks.com에 설명되어 있듯이 manifest.json 파일을 사용하여 기기 방향 모드를 강제로 설정할 수 있습니다. json 파일에 다음 라인을 추가하도록 합니다: ..
텍스트 앞에 정사각형 도형 표시하기 (CSS)
소제목(헤딩) 앞에 여러 가지 컬러로 된 정사각형을 추가한 워드프레스 사이트를 본 적이 있습니다. 예를 들어, 다음과 같이 소제목 앞에 빨간색 정사각형 도형이 표시되었습니다. 이런 도형을 제목 앞에 특수 기호(■)를 추가하는 것은 그다지 좋은 방법이 아닙니다. 이 상황에서는 CSS 가상요소 :before를 사용하여 일괄적으로 정사각형 도형을 표시할 수 있습니다. CSS 가상요소 :before를 사용하여 텍스트 앞에 정사각형 도형 표시하기 CSS를 사용하여 텍스트 앞에 정사각형 기호를 표시하고 싶은 경우 "How can I use :before property to create a square before a span" 문서에 제시된 CSS 코드를 사용할 수 있습니다. 위와 같이 다양한 컬러의 정사각형 기..
text-decoration-color를 사용하여 링크 밑줄 색상 변경하기
링크의 밑줄 색상은 text-decoration-color라는 CSS 속성을 사용하여 설정할 수 있습니다. 그러면 밑줄 색상을 텍스트 컬러와 다르게 설정하는 것이 가능합니다. text-decoration-color를 사용하여 링크 밑줄 색상 변경하기 기본적으로 밑줄(underline) 컬러는 링크의 텍스트 컬러와 동일하게 설정됩니다. 그러나 링크의 텍스트 색상과 다르게 밑줄 색상을 변경하고 싶은 경우가 있습니다. 이를 위해 대부분 border-bottom 속성을 사용하여 밑줄과 비슷하게 설정해왔습니다. 그러나 border 방법을 사용하지 않고 직접 밑줄 색상을 변경하는 방법이 있습니다. 바로 text-decoration-color 속성을 사용하여 텍스트 데코레이션(이 경우 밑줄)의 컬러를 변경할 수 있습..
CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법
요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우가 사용될 것입니다. 또 다른 방법으로 텍스트의 절반 높이에만 형광펜 효과를 주는 것도 가능합니다. 전체 높이에 형광펜 효과를 주는 것은 일반적인 백그라운드 컬러를 적용하면 되므로 여기에서는 밑줄 형태로 형광펜 효과를 주는 방법과 텍스트의 절반 높이에만 형광펜 효과를 주는 방법에 대해 간단히 설명하겠습니다. 목차 CSS로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법은 하루일기님의 티스토리 본문 링크 부분 형광펜 밑줄 효과 글을 참고할 수 있습니다. 다음과 비슷한 CSS..
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..
