티스토리 이미지 테두리 색상을 변경해보자...

안녕하세요. 행복을 노래하는 초매입니다.

 

티스토리를 처음 시작하는데요... 혹시 이미지 테두리 색깔을 어떻게 변경하시는 줄 아시나요?

 

저도 티스토리를 처음으로 시작하는 상황에서 이런 비밀글을 접하게 되었는데요. 그 당시 블로그 변경에 대한 두려움이 있었던 터라 도움을 그리 주지 못했습니다. 그런데 왜 익명의 분이 저에게 테두리 색깔 변경하는 방법을 물어봤을까요? 그 당시에 Blog API 라는 것이 있더라구요. Microsoft Word 를 이용해서 글을 작성해서, 업로드 하면, 블로그에 들어와서 불편하게 작성하지 않아도 워드에서 작성한 그대로 올라가더라구요. 회사에서도 문서를 만들 때 선임이 강조하셔서, 이미지 테두리를 하곤 했었는데, 아마 그 이미지를 보고 질문하지 않았나 생각됩니다. 그러면, CSS 를 이용해서 이미지 테두리 스타일을 변경할 수 있을까?

 

▶ 먼저 소스보기를 실행하자...

자신의 블로그 글 중에서 이미지가 있는 것을 선택합니다. 만약 찾았다면 이미지가 있는 빈 공간에 오른쪽 마우스를 클릭해서 소스보기를 선택합니다.

 

악!!!!!! 오른쪽 마우스 클릭이 안된다...

 

이럴 때 일수록 정신을 똑바로 차리고, 포기하지 마세요. 프로 블로거가 아닌 이상 블로그에 이상한 장치를 하지 않은 이상 어떻게든 소스를 볼 수 있습니다. ㅎㅎㅎ 오늘의 팁은 아마 소스보기가 아닌가 싶네요... ^^

 

▲ 크롬의 경우 오른쪽 상단 ≡  → 도구 → 소스보기 클릭

 

▲ 짜잔... 소스보기 성공

 

크롬을 사용하시는 분이라면 Ctrl + U 단축키를 이용해서 소스보기를 하실 수 있습니다. 아... 오늘의 팁은 이것으로 모두 전달한 것 같군요. 이상으로 포스팅을 마친다면... 서로서로 좋으시겠지만,,,ㅋㅋㅋ 포스팅 제목에 딴지 걸 수 있는 분들이 계실 수도 있는 관계로 계속 진행하도록 하겠습니다.

▶ 이미지 전 후의 글로 위치를 파악하자.

 

▲ 포스팅된 이미지의 앞, 뒤 글을 확인하자.

 

▲ 소스보기에서 유료 문서 편집기라고 검색해보자.

 

이미지의 스타일을 어떻게 설정되어 있는지를 알려면, 이미지 앞 뒤의 단어, 문구를 이용해서 검색하는 방법이 가장 쉽습니다. 이미지는 HTML 로 인코딩되어 포함되어 있는 경우도 있지만, 보통은 서버로 올린 이미지 주소를 링크하는 방법을 사용하거든요. 뭐,,, 이 내용이 어려우신 분들은 개인적으로 물어보세요... 댓글 500개의 깔끔한 대가를 받고 가르쳐드리죠...^^ 소스보기에서 특정 문구로 검색하면, 구문 앞 뒤로 img 태그가 있는 것을 발견 할 수 있습니다.

 

▲ span 태그의 class 명 확인...

 

p 태그는 문단을 구분하는 태그로서 글자를 입력할 때 사용하며, 엔터를 치는 효과를 줄 수 있습니다. span 태그는 아무런 효과는 없지면, 위 이미지처럼 스타일을 지정하면 span 태그로 감싼 텍스트 및 이미지에 스타일을 변경할 수 있습니다. 아무튼 블로그 마다 이름은 다를 테지만, 제 블로그는 img 를 나타내는 태그에 스타일 정보가 없으므로 상위 태그인 span 태그를 보면, style 속성이 있긴 하지만, 이미지 테두리에 대한 값은 없네요. 그 때 의심해야 하는 것이 class 입니다. 그러면 class 는 뭐냐?! 휴우... 모르는게 너무나도 많네요...ㅋㅋㅋ 간단하게 설명하면, 중앙에서 스타일을 관리하기 위한 장치에 대한 ID 라고 보시면 됩니다. 제 블로그의 이미지에 대한 스타일은 imageblock 이라는 class 에 설정되어 있는 것 같네요.

 

▶ 블로그의 HTML/CSS 를 확인해보자.

 

▲ imageblock 으로 검색해보자.

 

블로그의 HTML/CSS 를 수정할 수 있는 화면이 있는데요. 거기서 우리가 찾았던 imagblock 이라는 클래스를 찾아봅시다. 아니 그냥 검색해봅시다. 그러면 위 이미지처럼 imageblock 이 2개가 나오네요. 2개 다 내용을 주~욱 살펴보니, 이미지 테두리에 대한 내용이라고 생각되는 것이 border 라는 것을 직관적으로 알 수 있네요. padding 은 공간을 설정하는 것, text-align 은 텍스트의 배열을 설정하는 것이고, max-width, height 는 너비, 높이를 설정하는 것인데요. 그러면 남은 것이 border 죠~!!!!! 휴우... 참 힘겹게 찾았습니다. 그러면 테두리 두께와 색상을 변경하기 위해서는 어떻게 해야 할까요? 그냥 찾아보세요...ㅋㅋㅋ border 태그라고 검색하시면 엄청 많은 내용이 나올 텐데요. 그 내용을 보시고, 수정하시면 되겠습니다.

 

▶ 블로그에서 확인하자 

▲ 하늘색 테두리를 볼 수 있어요...

 

제가 설정한 것은 하늘색 테두리가 생긴 것을 볼 수 있는데요. 두껍게 하려면 border 속성에서 1px → 5px 로 조정하시면, 조금 두껍게 된 것을 확인하실 수 있을거예요.

 

아... 정말 간단한 내용을 설명하기 위해 많은 이미지와 이야기를 하고 있네요...^^ HTML 과 CSS를 조금 아시는 분이라면, 이런 것들이 얼마나 간단한 것인지 아실 수 있을겁니다... 하지만, 이 내용이 어렵다고 너무 낙심하지 마세요. 전 10년 넘게 이 분야를 공부한 사람이라는 거~~!!!!!! ㅋㅋㅋ

 

이상, 초매였습니다.