어둠을 가지고도 가진 한 줄의 효과 - 블로그 광고와 본문 사이 줄 긋기

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

요즘에는 날씨를 잘 모르겠네요. 어두워져서 추워질 것 같더니, 점점 밝아지면서 더워지고,,, 봄이 아닌 겨울 같은 느낌입니다. 제 블로그도 봄이 아닌 겨울처럼 차가워요...ㅎㅎㅎ

 

블로그를 보다 보니, 광고와 본문 글 내용이 그대로 이어져 있다보니,,, 무언가 이상한 생각이 들었습니다. 다른 분들은 큰 제목을 적는 경우도 있고, 맑은 고딕 반전 글꼴로 광고와 본문을 구분하는 경우도 있는데요. 저는 간단하게 어두운 한 줄로 깔끔하게 정리하도록 하겠습니다. 디자인을 잘하는 사람이 아니고서는 심플한게 가장 좋죠...

 

"The Simple is Best..."

 

라는 말도 있잖아요...^^

 

▶ 일단 블로그의 상태를 보자.

 

 

위 이미지는  제가 작성한 글의 일부인데요... 광고와 본문 내용이 다닥다닥 붙어있어서 뭔가 이뻐보이지 않네요. 이런 상태로 몇달을 계속 포스팅 했는데... 갑자기 이런게 생각난 이유는 무엇일까요? 디자인을 바꿀 때가 된 것이 아닐까요? ㅎㅎㅎ

 

▶ HTML/CSS 소스를 보자.

티스토리의 경우 관리자에 보면, HTML/CSS 편집 이라는 것을 제공해서, 관리자가 마음대로 블로그를 꾸밀 수가 있죠? 그러면, HTML/CSS 편집을 클릭해서 블로그의 HTML 부분을 살펴봅시다. 광고의 경우 제가 삽입했기 때문에 위치를 정확히 알수 있죠? 만약 모르시겠다면 article_rep_desc 로 한번 검색해보시죠. [샵샵_article_rep_desc_샵샵] 이라는 것을 볼 수 있습니다. ( # 를 샵 이라는 한글로 작성하신 이유는 잘 아시겠죠? ^^? )

 

[샵샵_article_rep_desc_샵샵] 은 티스토리에서 본문 HTML/CSS, script 를 넣기 위한 예약어이기 때문에 HTML이나 본문 내용에 작성하실수 없습니다. 왜? 전지전능한 티스토리 회사만 사용할 수 있는 예약어이기 때문이죠... 뭐,,, 금지어죠...ㅋㅋㅋ

 

지금 티스토리 글쓰기를 통해 작성하시는 글이 [샵샵_article_rep_desc_샵샵] 으로 치환되어 우리 눈에 보이게 되는 것이죠. 아무튼 본문 예약어 위에 줄을 긋는다면 될 것 같다는 생각은 드시나요? 생각이 안되신다면,,, 오늘과 내일 사이의 존재하는 깜깜한 밤에 생각을 갈아 입으세요...ㅋㅋㅋ

 

▶ 소스를 추가해보자.

 

 

정답은 위 이미지 빨간줄로 표시해두었습니다. 보통 스타일만 적용하려고 한다면 아무 색깔이 없는 DIV 태그를 이용합니다. 이해가 안되세요? 그럼 외우세요...ㅎㅎㅎ div 태그에 간단하게 style 을 지정합니다. style 의 내용을 한번 살펴볼까요?

 

height: 10px 

→ 일단 10px의 높이 공간을 확보한다는 의미

border-top: 1px solid #ccc

→ 10px 공간을 확보한 빈 공간 중 상단에 1px로 #ccc 색상으로 고정된 선을 그려라 라는 의미

margin-top: 20px

→ margin, padding, border 개념은 CSS를 공부하셔야겠네요.

    간단하게 광고와 div 태그 사이에 20px 크기로 공간을 띄우는 역할을 합니다.

 

▶ 미리보기로 확인해보자.

 

 

자... 소스를 수정하고 미리보기를 하니, 떡하니 한 줄이 생겼습니다. 광고와 본문과 간격을 주고, 줄을 긋고 나니,,, 뭔가 이쁘고 만족스러운 느낌이 드네요...ㅎㅎㅎ 아주 화려한 효과는 아니지만, 간단하게 줄 한 줄로 말로 표현못했던 애매한 부분을 해결한 듯한 느낌이네요...^^ 혹시 티스토리 블로그를 가지고 계신 분이 있다면 조금씩 변화를 줘보세요.. 재미있잖아요...

( 참고로 너무 고치다가 블로그 접속이 안될 수도 있습니다. ㅎㅎㅎ )

 

이상, 초매였습니다.