2011. 4. 28. 01:43ㆍIT/Tistory Tips
지금까지 사용하던 CCL 표시를 약간 수정했다. 글 오른쪽 위의 CCL 표시 부분에 마우스 커서를 올리면 CCL 표시 부분 아래에 작은 화살표가 추가된 것을 확인할 수 있다. CSS 롤오버로 CCL 표시하기 글을 참고 해서 소스 코드를 복사한 다음, 이 글에서 이야기하는 내용을 약간 수정하기만 하면 된다.
먼저 HTML 코드는 이전과 같다. CSS 롤오버로 CCL 표시하기 게시물에 나온 HTML 코드를 그대로 복사해서 사용한다. 그리고 CSS만 아래의 코드로 교체한다.
| CSS 코드 |
|---|
.license{text-align:right;cursor:help;position:relative;margin:5px 0}
.license span.ccl{margin-left:-999em;position:absolute;padding:.5em;background:#ffa;border:1px solid #FFAD33;text-align:left;line-height:1.3em;margin-top:0;margin-bottom:0;text-indent:0}
.license:hover span.ccl{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:5px 5px 5px rgba(0,0,0,0.1);-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.1);-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.1);position:absolute;right:-1em;bottom:2.5em;z-index:99;width:100px}
.license a{cursor:help}
.license span.ccl span.ccl_yes{color:#4682B4}
.license span.ccl span.ccl_no{color:crimson}
.license:hover span.ccl:before {content:"";position:absolute;bottom:-7px;left:50px;border-width:7px 7px 0;border-style:solid;border-color:#ffad33 transparent;display:block;width:0}
.license:hover span.ccl:after {content:"";position:absolute;bottom:-6px;left:51px;border-width:6px 6px 0;border-style:solid;border-color:#ffa transparent;display:block;width:0}
|
붉은 글씨로 표시된 부분이 새로 추가된 스타일이다. :before과 :after는 가상 선택자로 해당 요소 이전과 이후에 적용할 스타일을 지정하는 부분이다. 이 두 가지 가상 선택자로 CCL 풍선 아래 화살표 모양을 만든다.
content:""는 내용을 지정하는 부분인데 :before와 :after를 이미지 표시를 위해 사용했으므로 내용이 없도록 비워뒀다. position:absolute는 절대 위치를 지정하는 것이다. bottom:-7px, left:50px은 화살표 모양 크기와 가로 위치를 지정하는 부분이다. 그 외 항목을 전부 설명하려면 너무 길어지니 간단히 정리해보자. :before에서 테두리 일부를 7픽셀로 지정하고 그 색을 짙은 오렌지로 지정했다. :after에 테두리 일부를 6픽셀로 지정하고 그 색을 옅은 노랑으로 지정했다. before 다음에 after가 적용되며 자연스레 짙은 오렌지색 7픽셀 두께 테두리 위에 옅은 노랑 6픽셀짜리 테두리가 덮어씌워진다. 그래서 결과적으로 1픽셀 두께의 짙은 오렌지색 두께와 화살표 모양의 옅은 노랑색만 남는다. 흠, 복잡하군. 원리는 다음에 기회가 되면 자세히 설명하겠다. 어쨌든 붉은색 CSS 부분을 추가하면 CCL 말풍선에 화살표가 생긴다.