[블로그 팁] 블로그 하단 추천 위젯 깔끔하게 정리하기


이제서야 제가 사용하는 방법을 공개하게 되었네요. 오랜만에 블로그 팁에 대한 글을 쓰는 것 같은데요. 오늘은 자칫 잘 못하면 지저분하게 될 수도 있는 블로그 포스트 하단의 추천 위젯들을 깔끔하게 정리하는 방법에 대해서 알아보도록 하겠습니다. 오늘은 약간 HTML에 대한 이야기가 나올 수도 있으니 어렵더라도 끝까지 봐주세요. ^^

블로그를 운영하시는 분들이 많아 지면서 메타 블로그의 숫자도 늘어나게 되었습니다. 메타 블로그란 수 많은 블로거들이 작성한 글들을 모아서 주제별로 보여주는 블로그들의 모임정도 되는 곳입니다. 대표적인 메타블로그 사이트에는 다음뷰믹시, 블로그 코리아, 올 블로그 등이 있습니다. 지금도 조금씩 새로운 메타블로그 사이트들이 생겨나고 있구요.

이런 메타 블로그들이 좋은 글을 선별해내기 위해서 사용하는 방법이 가장 보편적인 방법인 투표에 의한 방법입니다. 보다 많은 독자들이 좋은 글이라고 추천을 한 글, 그 추천수가 많은 글이 좋은 글이라는 기본적인 생각이지요. 반대로 생각하면 블로거 입장에서도 추천을 많이 받는 것이 당연히 좋겠지요.


그래서 여기저기 메타블로그에 가입을 해서 추천 위젯을 블로그에 달아 놓게 됩니다. 정신을 차리면 블로그 하단 부분에 처음 보는 추천 위젯들이 주렁주렁 달려있는 것을 볼 수가 있지요.

하지만 이런 추천 위젯들은 사이즈가 제 멋대로여서 주렁주렁 달아놓으면 블로그에 미관상 좋지 않은 영향을 미칠 수도 있습니다. 들쑥날쑥한 추천위젯들이 제 멋대로 여기저기 달려 있으면 난잡해 보이고 심지어는 블로그 글의 신뢰도까지 떨어뜨릴 수 있습니다.



그래서 하단 위젯을 정리할 필요가 있는데요. 그 동안 몇몇분께서 하단 위젯의 정리 방법을 물어 오셨습니다. 곧 포스팅 한다고만 말을 하고 지금까지 시간을 끌어왔는데요. 다른 블로거 분들도 사용하는 지극히 평범한 방법이니 여러분들도 쉽게 따라 하실 수 있습니다.


꼬마낙타의 블로그 추천위젯 정리법

일단 제가 지금 사용하는 정리 방법은 이렇습니다.



다음뷰와 믹시 추천 위젯이 오른쪽에 붙어 있고, 왼쪽에는 링크프라이스의 CPC 광고가 달려 있습니다. 사실 이 방법은 재아님의 블로그에서 힌트를 얻어서 약간 응용한 것입니다. 재아님의 블로그 포스트도 한번 참조해 보세요. ^^


다음뷰 위젯을 사용 안함


믹시 추천위젯 사용안함



먼저 준비작업을 해야 합니다. 적용시킬 추천위젯( 여기서는 다음뷰와 믹시가 되겠네요. )을 표시안함으로 꺼야합니다. 실제로 사용 안하는게 아니라 티스토리에서 자동으로 스킨에 추천 위젯을 붙여주는 기능을 끄는 거니까 의심안하셔도 되요 ^^

View on 박스와 mixUP 위젯을 표시 안함으로 꺼 주셨다면 이제 더 이상 블로그 하단에 지저분하게 보였던( 그렇게 생각이 되었던 ) 추천위젯들이 보이지 않을 것입니다.




이제 블로그 하단의 추천위젯을 정리 할 차례입니다. HTML/CSS 편집메뉴를 들어갑니다.




skin.html 박스에서 ##_article_rep_desc_## 를 찾습니다. 이 부분은 치환자라는 것으로 실제로 다른 구독자가 여러분의 블로그를 봤을 때, 저 부분이 블로그의 본문 그러니가 블로그 포스트에 해당됩니다. 데이터 베이스에 저장되어 있는 것을 가져 오는 것이죠.

여러분은 블로그 본문 하단에 추천 위젯을 넣어 놓고 싶을 테니까 그 밑에 추천 위젯을 넣도록 하겠습니다. 다음 소스를 복사해서 붙여 넣으시면 됩니다.

<!--- 하단 추천 테이블 시작 -->
<fieldset style="border:3px solid #a1b0db;text-align:center;width:650px;height:250px;padding:0;margin:0 auto;position:relative;">
<legend align="center" style="margin:0 0 0 10px;padding:0 3px; border:1px;color:#3A5FCD">

<a href="http://v.daum.net/user/plus?blogurl=http://plusblog.tistory.com/" target="_new" onfocus="this.blur()" style="background-color:blue;color:white;padding:5 5 5 5;margin:5 5 5 5"> 제 블로그글이 마음에 드신다면 추천을 눌러주세요</a><br /></font>

</legend>
<table width="650" border="0" cellpadding="2" cellspacing="3"  valign="bottom" style="background-color:#FFFFFF">
<tr>
         <td align="center" width="220" height="210" rowspan="2" style="background-color:#FFFFFF">


               이 부분이 여러분이 활용할 수 있는 공간입니다. ^^ 광고를 넣으셔도 되고 다른 추천 위젯들을 작게 만들어서 넣으셔도 됩니다. 저는 광고를 넣었구요

         </td>
  <td align=left style="background-color:#FFFFFF">
<!-- 다음뷰 추천 위젯 삽입 start-->
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox1.swf?nurl=http://plusblog.tistory.com/[ ##_article_rep_id_## ]" width="400" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox1.swf?nurl=http://plusblog.tistory.com/[ ##_article_rep_id_## ]" /></object>
  </td>
  </tr>
<tr>
  <td alig=center style="background-color:#FFFFFF">
<!--믹시업 추천 위젯 삽입 start -->
           <div id="MissFlash_Div">      
 <div class="MF_Left_Float" style="height:89px; margin-left:0;">
                <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='399' height='89' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
                <param name='allowScriptAccess' value='always'/>
<param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=47911&guid=http://plusblog.tistory.com/[ ##_article_rep_id_## ]&rdate=&showhitcnt=1&platform=2'/>
                <param name='quality' value='high'/>
                <param name='wmode' value='window'/>
 <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=47911&guid=http://plusblog.tistory.com/[ ##_article_rep_id_## ]&rdate=&showhitcnt=1&platform=2' quality='high' wmode='window' width='399' height='89' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
                </object>
            </div>
</div>
<!-- 믹시 추천 위젯 삽입 end -->
  </td>
</tr>
</table>
<!--- 하단 추천 테이블 끝 -->



소스가 필요하신 분은 텍스트 파일 형태로 올려놨습니다. 다운로드 받으시거나 위 소스를 복사하시면 됩니다.

위 소스에서 색이 칠해져 있는 부분은 여러분이 바꾸셔야 할 부분인데, 빨간색 부분은 제 블로그로 설정이 되어 있는 부분이니 여러분의 블로그 주소로 바꾸시면 되구요. 중간에 빨간색 글씨가 쓰여져 있는 부분은 추천 위젯 정리 할 때, 왼쪽의 광고가 나오는 부분입니다. 거기에 여러분 나름대로 광고를 넣으시거나 다른 추천 위젯으로 꾸미시면 됩니다. ( 제 광고 소스가 있어서 뺏습니다. )



그리고 녹색으로 칠해져 있는 부분은 '[' 글자와 '##' 글자 사이에 공백문자가 하나 있습니다. '[ ##..' 이렇게 되어 있는 것을 빈칸을 없에고 '[##' 이렇게 만들어 주시면 됩니다. 뒤 쪽도 마찬가지로 '## ]' 이렇게 되어 있는 부분은 '##]' 이렇게 만들어 주시면 됩니다. 공백을 지워야 제대로 적용이 되니 주의하시기 바랍니다. ^^ ( 블로그 글을 쓸 때에도 치환자가 적용이 되어서 부득이하게 이렇게 썼습니다. 올려놓은 텍스트 파일에는 치환자가 제대로 되어 있으니 참조하시기 바랍니다.

참고 !!

여러분의 글 주소가 글 제목이 들어가는 형태로 되어 있다면, http://plusblog.tistory.com/[ ##_article_rep_id## ]가 아니라 http://plusblog.tistory.com[ ##_article_rep_link## ] 라고 해야 한다고 합니다. 

id가 link로 바뀌었고, 블로그 주소와 치환자 사이에 '/' 가 없어졌습니다.

주의하시기 바랍니다. ^^


마지막으로 믹시 추천 위젯에 muid라는 번호가 있습니다. 이 번호는 따로 알아내야 하는데, 다음을 따라하시면 쉽게 얻을 수 있습니다.



믹시에 로그인을 합니다. 상단에 빨간색으로 되어 있는 마이믹시를 클릭합니다.





마이믹시 화면 왼쪽에 등록된 블로그를 클릭합니다.
만약 등록된 블로그가 여러개라면 스킨을 편집하고 있는 블로그를 선택합니다.


그러면 화면이 바뀌면서 주소창의 주소가 바뀌는데, media/ 다음에 오는 숫자가 바로 여러분 블로그의 muid가 되겠습니다. 이 숫자를 아까 편집하고 있던 HTML에서 muid에 해당하는 곳에 넣어주시면 됩니다. ^^




그리고 미리보기를 클릭해서 어떻게 적용이 되었는지를 봅니다.
적용이 잘 되었다면 이렇게 나옵니다. ^^

이게 기본 뼈대이고 여기서 여러분의 HTML지식을 이용해서 여러가지 응용을 할 수 있습니다. 세부적인 응용은 추후로 미루거나 여러분의 손에 맡기도록 하겠습니다. ^^

이제 블로그 하단 추천 위젯 부분이 깔끔해 지셨나요? ㅎㅎ

가독성을 높여라, 내 블로그 글자 크기 변경하기


블로그 뿐만아니라 모든 글에 대해서 적용 되는 좋은 글의 조건 중 하나가 바로 가독성입니다. 읽는 사람으로 하여금 얼마나 글이 눈에 잘 들어오는가, 이것이 좋은 글이 가지는 특징 중에 하나라고 할 수 있는데요. 따라서 많은 블로거 분들이 가독성이 높은 글에 대해서 연구하고 가독성이 높은 글쓰기를 원하시고 있습니다.

가독성이 높은 글에는 여러가지가 있을 수 있는데요. 문장이 간결해서 한눈에 한 문장이 잘 들어오는 글이 가독성이 높기도 하고, 쉬운 단어들을 이용해서 설명을 할 경우 전문지식이 없는 분들도 잘 이해 할 수 있는 글이 될 수 있습니다. 또 빽빽한 글로만 쓰지 말고 적절한 이미지나 동영상 같은 멀티미디어를 구석구석에 집어 넣어 이해를 돕는 것도 가독성을 높이는 방법이 될 수 있습니다.


하지만 그런 글의 구성은 따로 배우지 않는 한 초보자 분들께서 따라하기가 힘들 수 있습니다. 좋은 글을 쓰기 위해서는 글을 많이 써봐야 하기 때문이지요.

Kayısı-Apricot
Kayısı-Apricot by Marchnwe 저작자 표시비영리변경 금지


하지만 초보분들도 쉽게 가독성을 높이는 방법이 있습니다. 바로 글의 포맷을 변경하는 것 입니다. 글의 포맷에는 문장간 간격이라든가 글자의 크기, 글꼴의 종류 등이 있습니다. 사람들에게 잘 읽히는 글꼴과 글자 크기가 있는데, 여러분의 블로그를 좀 더 가독성이 좋게 만들기 위해서는 적당히 큰 글자크기와 보기 좋은 글꼴을 선택하는 것이 중요합니다.

이번 시간에는 여러분 블로그의 기본 글자크기와 글꼴 등을 바꿀 수 있는 방법을 알아보도록 하겠습니다.


글자 크기를 바꾸어 보자.

 티스토리의 가장 큰 매력중에 하나가 바로 HTML/CSS 코드가 수정 가능하다는 것인데요. 블로그의 기본 글자크기와 글꼴도 이 기능을 통해서 설정 할 수 있습니다.



[관리자 메뉴] 에서 [스킨] - [HTML/CSS 편집] 기능을 선택합니다.



style.css 부분에서 .article 로 시작하는 부분을 찾습니다. 그 곳이 여러분이 글을 썼을 때 글이 어떻게 보여지는지에 대한 설정입니다.

font-size 부분에서 11pt 부분의 숫자를 알맞은 숫자로 바꿉니다. 저도 원래는 10pt였는데 다소 작은감이 있어서 보기 편하게 11pt로 바꾸었습니다. 참고로 제 스킨의 경우 10pt, 11pt, 12pt는 다음과 같이 보입니다.



여러분 입맛에 맞는 글자 크기를 선택하시기 바랍니다. 저의 경우 11pt 정도가 딱 알맞은 것 같아서 11pt로 세팅을 해 놨습니다. ^^

그 동안 제가 쓴 글을 보면서 글자 크기가 너무 작은게 아닌가 생각을 했었습니다. 실제로 다른 블로거 분들이나 인터넷 뉴스 등과 비교를 해봐도 다소 작아보이더군요. 그래서 이번 기회에 기본 폰트사이즈를 하나 키워봤습니다. 예전에 비해서 가독성이 좀 나아진 듯 합니다만, 다른 글꼴 등을 계속 찾으면서 좀 더 가독성을 향상 시켜봐야겠습니다. ^^

여러분은 가독성을 위해서 어떤 작업을 해보셨나요?



티스토리 팁 - 다음뷰 애드박스 ( Daum View Ad Box ) 정리하기



블로그를 하면서 다음뷰를 접한지 얼마 안 되었는데요. 다른 블로거 분들을 보니 "다음뷰 애드박스"라는 것을 달고 계시더라구요. 뭔가해서 찾아봤는데, 다음뷰에 가입한 블로거분들이 이 애드박스를 달게 되면 랭킹에 따라서 활동 지원금을 주는 새로운 수익 모델이라고 합니다.


다음뷰 애드를 적용하면 본문의 상단에 적절하게 섞여서 애드박스가 등장하게 되는데요. 하지만 대부분의 블로거 분들이 제목과 본문 사이에 애드센스 광고 단위를 2개씩 게재하고 있기 때문에 애드박스를 적용하게 될 경우 애드박스가 보기 안 좋게 추가됩니다.


위에서 보듯이 (1) 번과 (2) 번이 구글의 애드센스 광고단위이고 (3)번이 다음뷰 애드박스의 광고 단위입니다.
본문의 도입 부분이 찌그러져서 시작하기 때문에 약간 답답함을 느낄 수 있습니다. 게다가 다음뷰 추천 버튼도 시작 부분에 달아 놔서 더욱 더 답답함이 느껴지는데요.


오늘 티스토리 팁에서 할 일은 이렇게 보기 않 좋은 배치를 좀 더 보기 좋게 바꿔 보자는 것입니다. 좀 더 자세히 말하면 구글 애드센스 광고 단위인 (2) 번을 없에고 그 자리에 다음뷰 애드박스인 (3)번을 배치해 보도록 하겠습니다. ( 지금도 많은 블로거 분들이 구글 애드센스 단위 한개와 다음뷰 애드박스를 나란히 배치해서 보기 좋게 만들어 놓고 계십니다. )


다음뷰 애드박스 정리하기

이번 티스토리 팁에서도 스킨 설정을 건드려야 합니다. 관리자 페이지에서 [스킨] -> [HTML/CSS 편집] 메뉴로 들어갑니다. 이 메뉴에 대한 자세한 설명은 다음 링크를 참조하시기 바랍니다.


스킨 편집메뉴의 skin.html 부분에서 구글 애드센스가 출력되는 부분, 혹은 본문이 출력되게 되는 치환자를 찾습니다. 티스토리에서 본문 치환자는 "" 입니다. "[Ctrl] + F" 를 이용해서 찾으시면 더 빨리 찾을 수 있습니다.


구글 애드센스를 게재하고 계신 분들은 아마 본문 주변이 위와 같이 되어 있을 겁니다.
""이 본문을 출력하는 것이고 그 위에 구글 애드센스 코드를 출력하는 HTML코드가 출력되고 있습니다. ( <table><tr><td> 이 부분은 없는 분도 계실텐데 없어도 상관없습니다. 전부 뜯어 고칠테니까요 ^^ )

자 "" 윗 부분을 다음과 같이 고칩니다.

<div align="center" style="float:left">

구글 애드센스 코드 1 --- (1)번 부분

</div>

이러면 일단 기초는 다져진 것인데요. 아직 [저장] 버튼을 누르지말고 [미리보기] 버튼을 눌러서 어떻게 출력 되는지 보고 넘어갑니다.

주의

[미리보기] 버튼은 괜히 있는게 아닙니다. [저장]버튼을 누르면 수정 결과가 바로 반영이 되기 때문에 잘 못된 수정의 경우, 망할 수도 있습니다. 항상 [미리보기] 버튼으로 확인하는 습관을 들여야 합니다. ^^


자, 바로 저장을 하면 저 같은 경우엔 이런 식으로 화면이 출력이 됩니다. (1) 번 광고 단위가 왼쪽으로 붙고 나머지는 본문의 영역으로 인식되어 본문이 출력되기 때문입니다. ( CSS를 아시는 분은 'float'의 특징을 아시겠지요 ^^ ) 또 본문의 시작부분의 오른쪽으로 애드박스가 띄워지기 때문에 위 화면처럼뜨게 됩니다.

이런 현상을 제거하는 방법은 (1) 번 애드센스 광고역역의 넓이를 적당하게 조절하면 되는데요. 다음과 같이 따라하시기 바랍니다.

<div align="center" style="float:left;width:410px">

구글 애드센스 코드 1 --- (1)번 부분

</div>

<div> 태그의 style 속성 안에 애드센스 (1)번 단위의 너비 조절을 해주는 부분을 추가해 주면 됩니다. 제 블로그의 경우 410px로 설정을 해주니 보기 좋게 위로 잘 올라가더라구요. 블로그마다 본문 출력 영역의 너비가 다르기 때문에 이 부분을 잘 조절하면서 보기 좋게 맞춰주셔야 합니다.


width 속성을 너무 크게 주면 위 사진처럼 애드박스가 들어갈 공간이 부족하기 때문에 밑으로 밀려납니다. width 속성을 늘리다 위 처럼 어긋나게 되면 조금씩 줄여 주세요. 그러다보면 깔끔하게 보이는 사이즈가 있을 겁니다. ^^

주의

나중에 본문의 폭을 편집하게 될 때, 아마도 또 깨질 겁니다. 그 때는 다시 width 를 조절해 주시면 되니 걱정하지 마시기 바랍니다. ^^


<div align="center" style="float:left;width:410px">

구글 애드센스 코드 1 --- (1)번 부분

</div>

다시 위 소스코드를 적용한 모습을 보면,


자 이제 깔금하게 구글 애드센스와 다음뷰 애드박스가 나란히 배치된 것을 볼 수 있습니다. ^^
참고로 구글 애드센스 광고 단위를 2개에서 한개로 줄였다고 해서 광고 수익이 절반으로 줄어 들지는 않는 것으로 보입니다.
일단 많은 블로거 분들이 이런식으로 배치를 하고 있고, 구글 애드센스 수익보다 다음뷰 애드박스에서 얻어지는 활동 수익금이 더 많은 경우가 있기 때문에 이런 식으로 배치하는게 더 이익이라고 할 수 있습니다.


인쇄쟁이님의 글을 읽어보시면 그닥 영향이 없음을 알 수 있습니다.
어짜피 클릭할 사람은 클릭하고 그렇지 않은 사람은 이렇건 저렇건 보기만 좋으면 된다는 말이죠 ^^
그래도 수익이 조금 줄긴 할 테니 적용 여부는 잘 생각하시기 바랍니다. ^^
해당 광고단위를 다른 곳으로 옮기셔도 됩니다. ㅎ



 요즘 주변을 보면 많은 사람들이 블로그를 하는 걸 볼 수 있습니다. 블로그가 점점 대중화 되어가고 있다는 증거겠지요. 초창기 블로거들은 지금처럼 포털 사이트에서 제공하는 블로그 서비스가 없었기 때문에 스스로 블로그를 설치해서 ( 설치형 블로그 ) 써야 했습니다. 그렇기 때문에 그들은 웹 언어인 HTML을 배우게 되었습니다.

 하지만 요즘은 가입형 블로그 서비스 ( 네이버 블로그, 티스토리, 이글루스 )가 블로거의 대다수를 차지하고 있기 때문에 HTML을 몰라도 블로깅을 하는데에 문제가 없습니다. 그럼에도 불구하고 여전히 블로거가 HTML 태그를 알아야 하는 몇가지 이유가 있습니다.



Girasoles para los amigos  / Sunflowers for the friends
Girasoles para los amigos / Sunflowers for the friends by Claudio.Ar (not too much online) 저작자 표시비영리동일조건 변경허락



1. 표현력

 첫 번째 이유는 바로 표현력입니다.  블로그는 기본적으로 웹에 내용을 배포하는 형태이니다. 모든 내용들이 HTML의 형태로 웹에 발행을 하게 됩니다. 물론 가입형 블로그 서비스에서는 스마트 에디터가 내용을 자동으로 HTML로 바꿔 주기는 합니다. ( 예를 들면 티스토리 글쓰기 화면에서 여러분은 그저 여러가지 버튼을 사용해서 글을 작성합니다. 마치 "워드 프로세서"를 사용하듯이 말이죠. 하지만 궁극적으로 그 내용들은 HTML로 변형되어 발행됩니다. )

 하지만 이렇게 스마트에디터에 기대어 글을 쓰기만 하면, 내가 원하는 것을 정확히 표현 할 수 없을 때가 많이 있습니다. ( 그렇기 때문에 대부분의 에디터가 직접 HTML을 편집 할 수 있는 기능을 제공합니다. 티스토리 에디터 역시 직접 HTML을 조작 할 수 있게 하죠. ) 블로거가 HTML 태그를 모르고 스마트 에디터에만 기댄다면 그 블로거의 표현 능력은 스마트 에디터의 표현 능력보다 못 한 상태가 됩니다. ( 최대한 잘 써봐야 스마트 에디터의 표현 능력까지 겠죠. )

 따라서 자신이 원하는 내용을 좀 더 정확하게 인터넷에 표현하기 위해서 블로거는 HTML 태그를 배울 필요가 있습니다.



Scientific FUTAB
Scientific FUTAB by Samyra Serin 저작자 표시비영리동일조건 변경허락



2. 디자인 편집 능력

 두 번째 이유는 디자인의 편집 능력입니다. 표현 능력의 연장선이라고 할 수 있는데, 가입형 블로그 서비스의 경우 ( 가령 네이버 블로그를 예로 들면 ) 종종 블로그의 디자인을 바꿀 수 없을 때가 많이 있습니다. 혹은 맘에 드는 블로그 스킨을 그냥 적용하는 정도 밖에 되지 않습니다.

 하지만 티스토리와 같이 스킨을 직접 편집 할 수 있는 블로그의 경우에는 HTML 태그를 알아야 수정하기가 편합니다. ( 아니라면 남이 올려놓은 스킨 편집 포스트를 보고 그냥 따라하는 정도 밖에 되지 않겠죠. ) 예를 들면 여러분의 블로그에 애드센스를 설치하려고 할 때, <table> 태그를 알아 두면 좀 더 멋진 디자인으로 설치 할 수가 있습니다. ( 본문 상단에 애드센스를 두개 삽입하는 것 처럼 )

 여러분의 블 로그를 좀 더 편하고 예쁜 디자인으로 바꾸려면 HTML 태그를 배워야 합니다.



Bigui, Beagle
Bigui, Beagle by ¡arturii! 저작자 표시비영리변경 금지



3. 표준의 중요성

 HTML은 표준이 있습니다. 모든 웹브라우저는 이 HTML 표준을 잘 판독하고 화면에 표시 할 수 있어야 합니다. ( 물론 IE를 비롯한 몇몇 웹 브라우저에는 독자적인 HTML 형식이 있을 수 있고, 모든 웹 브라우저가 HTML 표준을 만족하는 것은 아닙니다. ) 게다가 웹에 접속하는 기기가 PC나 노트북에서 모바일 기기로 옮겨 가면서 HTML 페이지가 모바일 기기에서도 읽힐 수 있을 필요성이 생겼습니다.
 
 다시 말하면 웹 표준에 맞추어서 작성된 HTML 문서는 모바일 기기에서도 잘 읽힙니다. 하지만 표준이 아닌 특정 웹 브라우저에서만 동작하는 웹 페이지는 모바일 기기에서는 동작을 안하거나 잘 못 동작 할 수 있다는 것입니다. ( 모바일 웹 브라우저는 표준에 맞게 제작이 될 테니까요 ^^ )

 즉, 모바일 기기를 통해 웹에 접속한 방문자를 위해서라도 HTML 표준에 맞는 글 작성이 필요합 니다.



Horta d'en Rahola
Horta d'en Rahola by . SantiMB . 저작자 표시비영리변경 금지



4. CSS나 javascript 를 배우기 위한 기본적인 지식

 HTML을 아시는 분들도 CSS나 javascript 라는 것에는 생소 할 수 있습니다. 역할을 간단히 말하자면 HTML은 웹 페이지의 구조, 즉, 사람의 몸이라고 할 수 있구요. CSS는 그 위에 입는 옷이라고 할 수 있습니다. javascript는 사람의 근육으로 어떤 동작을 할 수 있을지에 대한 역할을 수행합니다.

 사람이 어떤 동작을 하건, 어떤 옷을 입건 몸이이 없다면 아무것도 아니겠지요. 정확히 말하면 몸이 없으면 입을 수도 동작을 할 수도 없죠. 마찬가지입니다. HTML을 모르고서 CSS를 배울 수 없고 좋은 javascript 프로그래머가 될 수 없습니다.

 블 로그의 운영적인 측면에서 보자면, 블로그를 좀 더 이쁘게 ( CSS를 이용해서 ) 만들고, 좀 더 많은 기능들을 ( javascript를 이용해서 ) 구현하기 위해서는 HTML을 배워야 합니다.


Colours
Colours by Lincolnian (Brian) (family illness - back soon) 저작자 표시동일조건 변경허락


  좋은 블로그를 만들기 위해서 가장 중요한 것은 물론 컨텐츠입니다. 어떤 컨텐츠를 만들어 내느냐가 그 블로그에 가장 중요하고 필요한 요소이지만 HTML을 공부해서 좀 더 이쁜 블로그를 내 맘대로 만들 수 있는 능력도 좋은 블로그를 만들 수 있는 하나의 방법이 아닌가 생각됩니다.



 오늘 드디어 스킨을 바꿨습니다. 3단형 스킨에서 2단형 스킨으로 옮겨 왔는데요.

예전의 스킨



 3단형 스킨을 쓸 때에는 뭐랄까.. 약간 답답한 느낌이 있었습니다.
 포스트의 본문이 왼쪽으로 치우져있고 오른쪽의 사이드바들이 본문을 억누르고 있는  느낌이었죠.
 게다가 해상도가 낮은 컴퓨터에서는 한 화면에 다 들어오지도 않더라구요.
 
 

바꾼후의 스킨



 약간 넓어 진 느낌이 나네요.
 이 스킨을 기본으로 해서 서서히 제 입맛에 맛는 스킨으로 바꿔나가려고 합니다. ^^
 녹색 배경이 약간 이상하게도 느껴졌었는데, 시원하게 흰색 베이스로 갈아 탔습니다. ㅎㅎ
 
 스킨도 바꿨으니 새마음 새출발로 블로깅을 하도록 하겠습니다. ^^




티스토리 팁 - 이미지 테두리를 없에보자.




 티스토리 블로그 스킨중에 이미지에 테두리를 만들어주는 스킨이 있습니다. 하지만 이런 경우 의도하지 않게 보기가 안 좋은 경우가 많습니다.

이미지에 테두리가 있는 경우



부자연스럽고 보기도 않좋은 이런 이미지 테두리를 없에 버리고 싶지만 방법을 몰라서 방치해둔 분들이라면 따라하시기 바랍니다.




일단 HTML/CSS편집 메뉴로 들어갑니다. 그리고 Ctrl + F를 눌러서 imageblock을 찾습니다.




imageblock에 대해 스타일이 정의 되어 있습니다. 여기서 border:1px 로 되어 있는 부분을 border:0px로 고칩니다. 그리고 저장한 뒤 블로그로 돌아가 보시면,




테두리가 제거 된 것을 보실 수 있습니다.


+ Recent posts