티스토리 사진 테두리 적용 / imageblock

글을 쓰면서 사진과 코드를 번갈아 작성하다보니 배경색이 비슷한 경우가 많아서

어떤게 사진이고 어떤게 코드인지 헷갈린다

 

위에가 캡쳐임

 

그래서 사진에 테두리를 적용하면 덜 헷갈릴 것 같아 구글링 해보니 CSS에서 imageblock을 수정하면 된단다

코드블럭을 수정하면서 배운 지식을 활용해 수정을 해보자

 

블로그 관리 > 꾸미기 > 스킨 편집 > html 편집 > CSS 탭에서 imageblock을 검색한다

띠용

imageblock을 검색하면 .imageblock이라는 코드가 나와야 하는데 없다

하여간 오디세이 스킨 맘에 안든다 제대로 되는게 없네

다시 구글링을 했다

 

꿀팁을 발견했당

크롬 브라우저에서는 검사도구를 이용해 클래스와 값들을 확인할 수가 있다는 것이다

우오오옹

 

크롬 검사도구

크롬에서 Ctrl + Shift + i를 누르면 검사도구가 나오고 오른쪽 상단의 검사 도구 아이콘을 누르거나 Ctrl + Shift + c를 누르면 검사를 할 수 있다

그냥 블로그 아무데나 마우스를 가져다 대면 위의 그림처럼 오브젝트의 정보가 팝업창으로 나오고 클릭하면 해당하는 코드가 오른쪽에 표시된다

 

코드

내 블로그에서는 사진이 figure 태그의 imageblock 클래스인 것 같다.

그런데 imageblock에 대한 코드가 CSS 편집 탭에 없다

값을 추가해야 하나보다

다른 사람들은 entry-content 클래스에서 값을 수정하거나 추가하는 것 같은데

내 경우에는 코드 블럭을 적용할 때 보니 entry-content는 없고 article-view가 있다

아마 본문의 내용에 해당하는 클래스가 오디세이 스킨은 article-view인가보다.

다시 게시글을 검사도구로 살펴보았다

 

정답!

뭔진 잘 모르겠지만 일단 내가 생각한게 대충 맞는듯

 

따라서 article-view에 figure.imageblock의 값을 추가해보았다

/* imageblock : 사진 테두리 */
.article-view figure.imageblock{
	border:10px;
	border-style:solid;
	border-color:#f00;
}

이렇게 적용하고 나니까!

 

강렬한 레드

성공했땅

적용이 됐나 편하게 확인하기 위해 빨간색으로 했다

정열적이다

 

의도했던 것은 사진의 모서리가 아니라 좀 떨어진 곳에서 테두리가 있었으면 좋겠는데 잘 모르겠다

CSS 편집 너무 어렵다 처음하는거라...

그리고 사진 밑에 설명까지 같이 테두리가 쳐져서 별로 보기가 안좋다

 

오 글을 쓰다 보니 혹시 하는 마음에 속성에 padding값을 추가 했더니 보기 좋게 되었따!!!!

 

오 맘에 들어

이제 속성만 맘에 들게 정리하면 되겠다.

그림자 효과를 추가해서 조금 더 있어보이게 만들었다

최종적으로 작성한 코드는 다음과 같다

 

/* imageblock : 사진 테두리 */
.article-view figure.imageblock{
	padding:20px;
	box-shadow: 0px 0px 10px #ddd;
	border:1px solid #ddd
}

※ < box-shadow: 좌우-offset 상하-offset 그림자두께 그림자색상 >이니 참고하세여 ※

적용결과는 !

 

멋져부러

이렇게 나온다

훌-륭

 

블로그 너무 어렵다

프로그래밍을 하는건지 블로그를 공부하는건지 CSS를 공부하는건지 🤔🤔