본문 바로가기
IT/CSS

tistory 티스토리 북클럽 스킨 이미지에 테두리 넣기

by The Yun 2022. 5. 5.
728x90
반응형

티스토리 본문에 이미지를 넣어왔는데요. 윤곽선이 없어서 그런지 뭔가 아쉬웠습니다. 네이버의 경우 기능이 있었는데 티스토리리는 없는 듯합니다. 여러사람들의 자료를 찾아 적용해 보았습니다. 저는 북클럽(bookclub) 스킨을 사용하고 있습니다.

다른 분들거 찾아보면서 해보니 현재와 같은 설정으로 진행하였습니다. CSS 설정에 들어갑니다. 행숫자는 다를 수 있습니다. /*Comment*/ 를 찾습니다. 그리고 그 위에 아래와 같은 코드를 넣어줍니다.

.entry-content figure.imageblock { max-width:95%; box-shadow: 0 3px 6px 0 rgba(0,0,0,.32); }/*이미지 테두리 넣기*/

코드 설명은 다음과 같습니다. 

.entry-content figure.imageblock {
max-width:95%; 최대 크기
box-shadow : x축 시작점px y축 시작점px 번짐정도px 선두께px 색상 

적용을 눌러주시면 됩니다. 

아래 사이트에서 테스트가 가능합니다. 

https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow#live_examples

 

box-shadow - CSS: Cascading Style Sheets | MDN

box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산

developer.mozilla.org

 

반응형

댓글