| CMS/프레임워크 | XE 1.x |
|---|---|
| 개발 언어 | PHP 7.2 |
캐시서버에서 불러온 이미지를 좀더 특별히 알아볼 수 있게 하려고 하는데요..
테두리를 쳤더니.. 좀 많이 이상해서 다른 표시를 해줄 수 있는 방법이 없을까요??
img 이다보니 작은 백그라운드 이미지 같은 것을 적용할 수 없어서요.
본문에 삽입된 이미지에 차별화된 작은 차이점을 만들려고 하는데 아이디어나 css가 잘 떠오르지 않네요... ㅡㅡ;
이렇게 하려는 이유는 늘 캐시서버에서 캐시를 잘하고 있긴 하지만 최근 제가 캐시가 안되도록 일부러 조건을 걸어 놓은 게 있어 캐시가 잘된 것과 안된 것을 구분해서 확인하기 위해서.... 입니다....
댓글 11
엇, 이렇게 하면 되겠지란 생각이 들었는데, 웹지기님 의도를 제가 잘 파악한 건지는 잘 모르겠어요.
1. 캐시서버 이미지에 조건문 걸어서 class 속성 추가 예. img class="cached"|cond="캐시서버 적용중이라는 조건"
2. css로 cached 클래스에 position:relative 적용
3. css로 cached 클래스의 ::after 가상요소에 스타일 적용
.cached::after {
content: '캐시';
position: absolute;
display: block;
top: 4px;
right: 4px;
}
...이런 생각을 한 건데 헛다리 짚은 걸 수도 있겠네요ㅜ
.xe_content img[src*="img.domian.com"]
현재 이렇게 컨트롤 하고 있습니다.
.xe_content img[src*="img.domian.com"]::after
아니면 콜론을 하나만 써도 되구요.
자세한 속성값들은 제가 틀린 걸 수도 있으니 개발자도구에 가상요소가 잡힌다면 요모조모로 만져보시면 될 거 같아요.
::after 를 붙이면 속성 자체가 안먹구요.
::after 를 빼고 하면 속성이 잡힙니다.
그런데 이렇게 해서 위 content: '캐시'; 이 부분이 어디에 나오는지 보이지가 않네요.
.xe_content img[src*="img.domian.com"]::after 이게 안먹어서 적용을 못하네요. 콜론 한개로 해도 마찬가지구요.
img 에는 :after 사용이 안되는것 같네요. ㅡㅡ;
div로 감싸주는 수밖에 없을 것 같은데 그러려면 일이 번다하니 결정하신대로 둥글게 하시는 게 나을 것 같습니다.
그냥 border-radius :5px 주는거로 마무리 해야 겠습니다. 저와 같이 확인목적으로 보지 않으면 잘 티가 안나지만 구분은 잘 되네요.