워드프레스 일기의 IT & 기타/CSS 27

워드프레스 사이트에 댓글을 달고 난 후에 살펴보니 아래 그림과 같이 문단 사이 간격이 좁아서 보기가 좋지 않았습니다. 살펴보니 댓글을 달 때 엔터를 입력했지만 태그가 삽입되어 나타나는 현상이었습니다. 워드프레스 br 태그 공백 적용하기 제가 운영하는 워드프레스 사이트에서는 개별 포스트에서 직접 댓글을 달 때 엔터를 치면 문단 태그()가 입력되었지만, 관리자 페이지 내에서 댓글에 답변을 달 때 엔터를 치면 태그가 삽입되었습니다. br 태그에 공백(여백)을 적용하려는 경우 다음과 같은 CSS 코드를 사용할 수 있습니다. br { display: block; content: ''; margin-bottom: 10px; } 위의 코드를 추가하면 사이트 전체의 br 태그에 스타일이 적용되므로 예기치 않은 결과를 ..

네이버 카페에 워드프레스 아바다 테마를 사용하는 사이트에서 앵커로 이동하는 링크 클릭 시 부드럽게 이동하지 않고 클릭과 동시에 이동하는 문제에 관한 질문이 최근 올라온 적이 있습니다. 부드럽게 앵커로 이동하도록 하고 싶은 경우 scroll-behavior 속성을 사용할 수 있습니다. 부드러운 스크롤 - scroll-behavior 속성 기본적으로 다음과 같은 CSS 코드를 추가하면 앵커 이동 시 부드럽게 이동할 것입니다. html { scroll-behavior: smooth; } 워드프레스의 경우 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS에 추가하시면 됩니다. 실제로 아바다 테마에서 이 코드를 적용 시 부드럽게 잘 작동하는 것을 확인할 수 있었습니다. scroll-behavi..

입력 양식에서 입력 필드의 타입을 number로 지정할 경우 해당 필드를 선택하면 숫자를 높이거나 낮출 수 있는 스핀 버튼이 표시됩니다. 이 스핀 버튼(증감 버튼)은 CSS로 숨길 수 있습니다. HTML5 number 타입 입력 필드에서 스핀 버튼을 숨기는 방법 워드프레스 Quform에서 다음 우편번호 스크립트를 적용하여 우편번호를 검색하여 주소를 입력할 수 있는 작업을 진행했습니다. 추가로 전화번호 필드에 숫자만 입력이 가능하도록 설정했습니다. Quform 개발자가 제시하는 코드를 사용하여 해당 필드를 number 타입으로 변경했습니다. 텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기 텍스트 입력 상자에 숫자만 입력 가능하도록 하거나 숫자와 하이픈만 입력을 허용하고 싶은 경우가 있습니다. 이 경우 t..

웹 페이지를 모바일 기기에서 세로 모드가 아닌 가로 모드에 보도록 만드는 경우가 있습니다. 예를 들어, 유튜브 영상 등을 웹 페이지에 삽입하는 경우, 사용자의 모바일 기기가 세로 모드로 설정되어도 가로 모드로 표시되기를 원할 수 있습니다. 웹 페이지가 모바일 기기에서 가로 모드로 표시되도록 하는 방법 웹 페이지가 모바일 장치에서 가로 모드로 강제로 표시되도록 해야 하는 경우가 있을 수 있습니다. HTML5 webapp manifest 사용 웹앱(webapp)에서는 HTML5 webapp manifest를 사용하여 가능합니다. html5rocks.com에 설명되어 있듯이 manifest.json 파일을 사용하여 기기 방향 모드를 강제로 설정할 수 있습니다. json 파일에 다음 라인을 추가하도록 합니다: ..

소제목(헤딩) 앞에 여러 가지 컬러로 된 정사각형을 추가한 워드프레스 사이트를 본 적이 있습니다. 예를 들어, 다음과 같이 소제목 앞에 빨간색 정사각형 도형이 표시되었습니다. 이런 도형을 제목 앞에 특수 기호(■)를 추가하는 것은 그다지 좋은 방법이 아닙니다. 이 상황에서는 CSS 가상요소 :before를 사용하여 일괄적으로 정사각형 도형을 표시할 수 있습니다. CSS 가상요소 :before를 사용하여 텍스트 앞에 정사각형 도형 표시하기 CSS를 사용하여 텍스트 앞에 정사각형 기호를 표시하고 싶은 경우 "How can I use :before property to create a square before a span" 문서에 제시된 CSS 코드를 사용할 수 있습니다. 위와 같이 다양한 컬러의 정사각형 기..

링크의 밑줄 색상은 text-decoration-color라는 CSS 속성을 사용하여 설정할 수 있습니다. 그러면 밑줄 색상을 텍스트 컬러와 다르게 설정하는 것이 가능합니다. text-decoration-color를 사용하여 링크 밑줄 색상 변경하기 기본적으로 밑줄(underline) 컬러는 링크의 텍스트 컬러와 동일하게 설정됩니다. 그러나 링크의 텍스트 색상과 다르게 밑줄 색상을 변경하고 싶은 경우가 있습니다. 이를 위해 대부분 border-bottom 속성을 사용하여 밑줄과 비슷하게 설정해왔습니다. 그러나 border 방법을 사용하지 않고 직접 밑줄 색상을 변경하는 방법이 있습니다. 바로 text-decoration-color 속성을 사용하여 텍스트 데코레이션(이 경우 밑줄)의 컬러를 변경할 수 있습..

요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우가 사용될 것입니다. 또 다른 방법으로 텍스트의 절반 높이에만 형광펜 효과를 주는 것도 가능합니다. 전체 높이에 형광펜 효과를 주는 것은 일반적인 백그라운드 컬러를 적용하면 되므로 여기에서는 밑줄 형태로 형광펜 효과를 주는 방법과 텍스트의 절반 높이에만 형광펜 효과를 주는 방법에 대해 간단히 설명하겠습니다. 목차 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를 사용하여 마우스 오버 시 텍스트를 변경하는 예제입니다. 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..