CSS만으로 티스토리 블로그 검색결과 없음 메시지 출력하는 방법
블로그 스킨을 리뉴얼하고 이것 저것 테스트 하다가 검색 결과가 없을 때, 아래의 스크린샷에서 처럼 검색 결과가 없다는 메시지도 없이 단순히 빈공간만 나타나는 것을 발견했습니다.
자바스크립트나 제이쿼리를 이용하면 특정 요소안에 내용이 없을 때, 다른 내용을 나타나게 할 수 있겠지만, 저나 저와 같은 초보분들에게쉬운일은 아니죠. 사실 공개된 jquery 소스가 있으면 가져다 쓸 생각이었지만 티스토리에 알맞은 소스를 찾기가 어려워 머리를 굴려봤습니다. 그러다 생각해낸 방법이 CSS의 가상선택자 :empty 를 사용하는 겁니다. 해당 선택자 공간안에서 필요한 내용을 포함해야 한다는 제약이 있어서 화려하게 꾸밀수는 없지만 아래처럼 간단한 안내문구 정도는 출력할 수가 있습니다.
저는 다른 사람이 만든 티스토리 스킨을 사용해본 적이 없어 검색결과를 출력하는 부분이 어떤 HTML구조 설계되었는지 잘 모르지만, 가상선택자 :empty 를 이용해 내용을 출력하는 원리는 아래의 예제와 같습니다.
위에서 처럼 원하는 특정한 요소에 가상선택자 :empty 를 사용하여 스타일을 다르게 지정할 수 있습니다. 이제부터는 응용입니다. 우리는 티스토리가 제공하는 [##...##] 치환자 내부에 포함되어 있는 HTML코드를 임의로 조정할 수가 없기에 CSS만으로도 텍스트의 내용을 삽입할 수 있는 방법을 찾아야 합니다. 가상선택자 :after 와 :before 의 content 속성이 적절하겠네요. 가상 선택자 :empty 와 :before 또는 :empty 와 :after 를 조합하여 해당 요소에 내용이 비어있을 때, content를 본문에 넣어주면 끝입니다. 생각보다 간단하죠. 제 블로그 스킨같은 경우에는 아래와 같이 작업했습니다.
여기서 주의할 점 두가지가 있습니다.
아래의 스크린 샷에서처럼 비어있어야 하는 요소에 공백(스페이스바 또는 줄바꿈 또는 탭 공간)이 있으면 empty 선택자가 비어있다고 인식하지 않습니다. 아마도 엄밀히 말하면 공백 조차도 컴퓨터가 해석해야 하는 언어이기 때문인 듯 합니다. 그래서 skin.html 에서 비어있기를 희망하는 요소의 여는 태그와 닫는 태그 사이에는 그 어떤 것도 있어서는 안됩니다.
위 처럼 코드를 예쁘게 정렬하면 불필요한 탭공간이 포함되므로 :empty 선택자가 빈공간으로 인식하지 않습니다.
아래에서 처럼 한 줄로 태그를 붙여서 나열하여 요소 사이에 공백이 없도록 만들어줘야 합니다.
두번째로 주의할 내용은 가상선택자 :before 와 :after 의 content 속성에 영어가 아닌 한글을 입력하게 될 경우, CSS 문서가 UTF-8로 인코딩 되어있어야 한글이 깨지지 않고 잘 출력됩니다. 만약 content 속성에 한글을 포함했는데 깨진다면, 텍스트 에디터를 이용해 인코딩을 UTF-8로 바꿔서 저장하시면 됩니다.
회사에서 전쟁을 마치고 거기에다가 10시까지 교육을 받고와서 적는 글이라 제대로 이해할 수 있게 적었는지 모르겠네요. 만약 저 처럼 검색결과 없음 따위의 안내 메시지가 없어서 허전하신 분은 글을 잘 읽어보시고 도전해보세요. 이해가 안되는 내용은 댓글로 달아주시면 최대한 답변해드리겠습니다. 읽어주셔서 감사합니다. :D
CSS 선택자에 따라 지원이 가능한 브라우저의 종류와 버전이 다릅니다.
사용하고자 하는 CSS를 캔아이유즈에서 확인해보세요.
'공부 > 디자인/그래픽' 카테고리의 다른 글
| 워드프로세서 양식을 순수 HTML 코드로 바꾸는 방법 (1) | 2015.07.16 |
|---|---|
| 티스토리 본문 영역만 텍스트 드래그 허용하기 (7) | 2015.07.04 |
| 기획자를 위한 필수 화면설계도구 Power Mockup (0) | 2015.01.15 |
