블로그머니에 올리는 글의 이미지 테두리 색상을 추가하자...

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

티스토리에 올리는 글 이미지 테두리 색상을 변경하는 글을 오늘 올렸는데요. 그리고 블로그머니에도 글을 올렸드랬죠...^^ 그런데 블로그머니에는 이미지 테두리가 없어서 글을 보는 내내 좀 불편했는데요. 그 불편을 해결하고자 조금 들여다 보니,,, 그 해결책을 찾을 수 있었습니다.

 

▶ 소스보기를 이용하자

▲ 블로그머니에 올린 이미지입니다. 이미지에 테두리가 없죠~잉...

 

위 이미지에 보는 것과 같이 블로그머니도 마찬가지로 소스보기를 이용하면 되는데요. 편리하게 소스를 볼 수 있는 버튼이 있네요...^^ 브라우저에서 제공하는 전체적인 소스가 아니라 본문에 적용되는 글에 대한 HTML/CSS 를 볼 수 있는 건데요. 이 버튼을 이용해서 본문 이미지에 대한 CSS 가 어떻게 적용되어 있는지 한번 살펴보아야 합니다.

 

▲ 소스 버튼을 누르면 HTML 코드가 나옵니다.

 

▶ img 태그를 찾자

▲ img 태그를 찾고, class 명을 눈여겨봅니다. ^^

 

보통 이미지는 img 태그로 표현되기 때문에 img 태그를 찾아봅니다. 위 이미지처럼 img 태그가 있죠~잉... img 태그에 사용된 스타일을 점검해봅시다. id와 class 2개가 있는 것을 볼 수 있는데요?? id 와 class 는 개념은 다르지만, 스타일을 적용시킬 때 비슷한 역할을 한다고 보시면 됩니다. 티스토리처럼 중앙에서 관리하는 CSS 파일에 접근 할 수 없기 때문에 본문에 style 을 지정할 수 있는 환경을 설정해야 합니다. 아래 이미지를 보시죠..

 

▲ txc-image 스타일을 지정합니다.

 

CSS 파일에 접근 할 수 없기 때문에 style 태그를 이용해서 환경을 만들어 줍니다. 그 환경 아래 .txc-image 클래스 스타일을 설정하면 되는데요. 여기서 포인트는 .(마침표)를 꼭 찍어야 한다는 점이죠...^^ 이것이 클래스 txc-image 스타일을 의미하는 중요한 표현이기 때문이죠. 전에 쓴 글과 마찬가지로 border 스타일로 설정한 다음, 블로그 머니 본문 사이즈에 맞게 max-width와 height 를 설정해줍니다. 이것을 지정하지 않으면 이미지가 본문 크기보다 큰 경우 잘리는 불상사가 발생할 수 있습니다...ㅎㅎㅎ

 

▲ 위와 같이 이미지에 테두리가 생겼습니다.

 

위 이미지와 같이 이미지에 테두리가 생겼는데요. border 스타일을 변경하게 되면, 색상, 두께, 선 표현방식을 변경할 수 있으니까요... 조금만 공부해서 자신이 원하는 스타일로 변경하시기 바립니다.

 

혹시 본문내부에 스타일을 지정한다고 해서 부담되는 건 아니시죠... 관리자님?!?!? ^^ㆀ 비슷한 주제라서 연달아서 한번 작성해보았네요. 주말 잘 보내셨나요? 월요일 멋지게 시작해보자구욧~! ^^

 

이상, 초매였습니다.