티스토리 본문 이미지 테두리 그림자 적용 해제하기
- 블로그 운영/티스토리 팁
- 2019. 5. 19. 00:05
안녕하세요. 콘마니입니다!
JB SKIN 167을 적용하고 포스팅을 하다 보니까 본문 바탕이 흰색이라 흰색 바탕의 이미지를 올리면 본문 바탕과 구분이 잘 안 됩니다. 그래서 테두리를 적용하는 것이 깔끔하겠다 싶어서 폭풍 검색 후에 적용을 했습니다.
이미지가 본문 배경색하고 같으면 위와같이 구분이 잘 안되서 헷갈리는데 이미지에 테두리를 적용하여 구분이 잘 됩니다. 저는 테두리를 적용하는게 깔끔하다고 생각하지만 개인의 취향에 따라서 다르게 생각하실 수도 있을거 같습니다.
먼저 CSS에 들어갈 소스에 대해 알아 보겠습니다.
1 | .imageblock { border-width : 1px; border-style : solid; border-color : #FF0000; } | cs |
- border-width : 선의 굵기
- border-style : 선의 형태
- border-color : 선의 색상
1 | .imageblock { border: 1px solid #FF0000; } | cs |
간단하게 줄여서 이렇게 소스를 사용해도 됩니다.
블로그 관리 홈 → 스킨편집 → html 편집 → CSS 순으로 이동 합니다
위 이미지는 CCZ-CROSS 스킨의 CSS 입니다. 본인이 기억 하기 쉬운 곳에 소스를 넣으시면 됩니다.
만약 테두리가 본문 이외에 모든 곳에 적용이 된다면 본문 영역의 클래스명을 찾아봅시다. 블로그 관리 홈 → 스킨편집 → html 편집 → HTML 순으로 들어가서 밑에 소스 있는데 빈 곳을 마우스로 클릭하고 키보드 Ctrl + F 눌러서 치환자
안녕하세요. 콘마니입니다! JB SKIN 167을 적용하고 포스팅을 하다 보니까 본문 바탕이 흰색이라 흰색 바탕의 이미지를 올리면 본문 바탕과 구분이 잘 안 됩니다. 그래서 테두리를 적용하는 것이 깔끔하겠다 싶어서 폭풍 검색 후에 적용을 했습니다. 이미지가 본문 배경색하고 같으면 위와같이 구분이 잘 안되서 헷갈리는데 이미지에 테두리를 적용하여 구분이 잘 됩니다. 저는 테두리를 적용하는게 깔끔하다고 생각하지만 개인의 취향에 따라서 다르게 생각하실 수도 있을거 같습니다. 먼저 CSS에 들어갈 소스에 대해 알아 보겠습니다. 간단하게 줄여서 이렇게 소스를 사용해도 됩니다. 블로그 관리 홈 → 스킨편집 → html 편집 → CSS 순으로 이동 합니다 위 이미지는 CCZ-CROSS 스킨의 CSS 입니다. 본인이 기억 하기 쉬운 곳에 소스를 넣으시면 됩니다. 만약 테두리가 본문 이외에 모든 곳에 적용이 된다면 본문 영역의 클래스명을 찾아봅시다. 블로그 관리 홈 → 스킨편집 → html 편집 → HTML 순으로 들어가서 밑에 소스 있는데 빈 곳을 마우스로 클릭하고 키보드 Ctrl + F 눌러서 치환자 를 검색 합니다. CCZ-CROSS의 스킨을 참고로 살펴보면 클래스명이 e-content post-content fouc 입니다. 스킨편집에 CSS로 들어가서 1번 소스로 해보고 안된다면 2번 소스를 넣어 줍시다. 전 JB SKIN 167 이미지 테두리 설정 할때 처음에 블로그의 모든 이미지에 테두리가 적용이 되어서 이 방법으로 해결을 했었는데 지금 다시 설정을 해보려니까 본문에만 테두리가 적용이 되고 모든 이미지에는 적용이 안 되더군요. 역시 HTML과 CSS는 어렵습니다.
1. border-width : 선의 굵기는 숫자만 조절해서 마음에 드는 걸로 하시면 되니 패스 하겠습니다. 2. border-style : 선의 형태는 위와 같이 설정 할 수 있습니다. 3. border-coler : 선의 색상은 위와 같이 설정 할 수 있습니다. 아래 네이버색상코드표를 참고 하면 편리 합니다. 이 소스는 설명하기 위해서 임의로 만든 겁니다. x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) blur : 그림자를 흐릿하게 만듭니다. 값이 클수록 더 흐려집니다. color : 그림자의 색상을 설정합니다. 소스는 이런 식으로 CSS에 넣으시면 됩니다. 그림자와 테두리 효과를 같이 사용하신다면 이렇게 같이 써주시면 됩니다. 이미지에 적용하면 이런식으로 나옵니다. 이런식으로 소스를 주석처리 하면 CSS에는 아무런 영향이 없게 됩니다. 주석처리는 나중에 다시 효과를 쓸 때 유용하게 쓸수 있지만 다시 쓸 일이 없다면 아예 삭제를 하시면 됩니다.cs cs cs cs cs cs cs
CCZ-CROSS의 스킨을 참고로 살펴보면 클래스명이 e-content post-content fouc 입니다.
1 2 | .e-content post-content fouc img { border: 1px solid #FF0000; } .e-content img { border: 1px solid #FF0000; } | cs |
스킨편집에 CSS로 들어가서 1번 소스로 해보고 안된다면 2번 소스를 넣어 줍시다. 전 JB SKIN 167 이미지 테두리 설정 할때 처음에 블로그의 모든 이미지에 테두리가 적용이 되어서 이 방법으로 해결을 했었는데 지금 다시 설정을 해보려니까 본문에만 테두리가 적용이 되고 모든 이미지에는 적용이 안 되더군요. 역시 HTML과 CSS는 어렵습니다.
1. border-width : 선의 굵기는 숫자만 조절해서 마음에 드는 걸로 하시면 되니 패스 하겠습니다.
2. border-style : 선의 형태는 위와 같이 설정 할 수 있습니다.
3. border-coler : 선의 색상은 위와 같이 설정 할 수 있습니다. 아래 네이버색상코드표를 참고 하면 편리 합니다.
1 2 | .imageblock { box-shadow: x-position: 5px y-position: 5px blur: 5px spread: 5px; color: #8C8C8C; } | cs |
이 소스는 설명하기 위해서 임의로 만든 겁니다.
x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수)
y-position : 세로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수)
blur : 그림자를 흐릿하게 만듭니다. 값이 클수록 더 흐려집니다.
color : 그림자의 색상을 설정합니다.
1 | .imageblock { box-shadow: 5px 5px 5px 5px #8C8C8C; } | cs |
소스는 이런 식으로 CSS에 넣으시면 됩니다.
1 | .imageblock { box-shadow: 5px 5px 5px 5px #8C8C8C; border: 1px solid #FF0000; } | cs |
그림자와 테두리 효과를 같이 사용하신다면 이렇게 같이 써주시면 됩니다.
이미지에 적용하면 이런식으로 나옵니다.
1 | /* .imageblock { box-shadow: 5px 5px 5px 5px #8C8C8C; } */ | cs |
이런식으로 소스를 주석처리 하면 CSS에는 아무런 영향이 없게 됩니다. 주석처리는 나중에 다시 효과를 쓸 때 유용하게 쓸수 있지만 다시 쓸 일이 없다면 아예 삭제를 하시면 됩니다.
'블로그 운영 > 티스토리 팁' 카테고리의 다른 글
| 티스토리 모바일 앱링크 오류 해결방법 (2) | 2019.12.18 |
|---|---|
| 티스토리 카테고리 전체 글 숫자 보이게 하는 법 (4) | 2019.12.10 |
| 티스토리 캡처 이미지 업로드 시 흐릿하게 나오는 현상 해결 (0) | 2019.11.30 |
| 티스토리 본문 제목 선정 네이버 광고 키워드 도구 활용 (0) | 2019.05.26 |
| 티스토리 반응형 스킨 유료 JB SKIN 167 구매 리얼후기 (0) | 2019.05.18 |