테이블 태그 1 이랑 이어짐 (http://2liter.tistory.com/29)
※제가 언어능력이 현저하게 떨어지는 관계로 글이 불편하게 느껴질 수도 있겠네요.
그냥..그러려니 하시고 너그러운 마음으로 봐주셨으면 감사할게요.

[* 아 왠지 모르겠는데 다음뷰로 들어오면 제 컴퓨터에선 3번 테이블이 제대로 보이지 않아요.
3번의 선이 왼쪽처럼 보이지 않으면, 다음뷰를 닫고 다시 보시면 제대로 보여요 ~
* 그리고 크롬에서도 선이 제대로 보이지 않...네요.....IE로 접속하시면 잘 보입니당..
참고해주세요 :) ]






소스가 급해서 찾고 들어오신 분들도 있겠고,
하다보면 어느새 자신도모르게 이해가 되는 순간도 있긴하지만,

그래도 테이블 태그를 처음접하고 잘 모르는 분들을 위해
최대한 이해할 수 있도록 설명을 하려고 하니 글이 길어질 것 같네요.
그래도 잘 읽어주세요 :)
데헷?! 앜....손발이 오그리토그리

우선, 어제꺼 복습을 하도록 하겠습니다.

(예제 1.)

<table border="1" cellspacing="0" cellpadding="0" > <tbody> <tr> <td width="100" height="30"> </td> </tr> </tbody> </table>

'테이블 태그 1'에서 테이블태그의 기본형이라고 했던 예제 1이다.

사실은 기본형이 예제 1과 같은 경우도 있고 예제 1과 약간 다르게

<table border=1 cellSpacing=0 cellPadding=0 width=100 height=30> <tbody> <tr> <td> </td> </tr> </tbody> </table>

이런 경우도 있다. (이것을 예제 2로하자.)


↑ 예제 1을 적용시킨 것.

↑ 예제 2를 적용시킨 것.


미묘하게 차이가 있는데, 똑같은 100x30 이어도 크기가 다르다.
사이즈를 재봤을 때, 예제 2의 사이즈가 정확하게 100x30이다.
<td>에 width값과 height값을 넣었을 때와 <table>에 width값과 height값을 넣을 때 왜 달라지는지는 나도 잘 모르겠다.

테이블을 정확히 하고자 한다면 <table>에 width값과 height값을 넣어주는게 바람직하다고 할 수 있겠다.
(나는 버릇을 잘못들여서 예제 1이 편하지만..)

뭐 편한대로 쓰면 될 것 같다.
복습은 여기까지하고, 다음으로 넘어가보자.

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=1 cellPadding=0 bgColor=#424242> <TBODY> <TR bgColor=#ffffff> <TD> </TD> </TR> </TBODY> </TABLE>

위의 50x50짜리 검은색 선으로만 이뤄진 테이블의 태그소스다.
table style을 써도되고 안쓰고 바로 table width=50 height=50 border=0 … 이렇게 써도 되지만,
어떻게 쓰던지 편한대로만 쓰면 된다.
width 가로값
height 세로값
알맞은 픽셀값을 넣어주면 땡~

이 태그소스는 겉보기에 검은색 줄로만 있는 것으로 보이나, 실상은 그렇지않다.
table 전체 배경색깔을 #424242 (검은색에 가까운회색)으로 깐 뒤에,
cellspacing(테이블 안쪽 여백)에 1을 주고,
<tr> 전체에 흰색 배경을 깔아줌으로써 cellspacing값만큼 검은색이 보이게 되는 것이다.
당연히 cellspacing값을 1보다 더 큰 숫자를 주게 될 경우엔 선이 굵게 보이게 된다.

이건 알아도 되고 몰라도 되는거지만, tr에 흰색을 깔아주지 않을 경우엔
이렇게 나오게 된다는거~

tr의 #ffffff 부분을 다른 rgb색상코드로 넣어주면 흰색말고도 다른 색을 깔 수 있다.
요렇게~
이 쯤 알아두시고, 다음으로 넘어가자.

2. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - -

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=1 cellPadding=0 bgColor=#ff375d> <TBODY> <TR bgColor=#ffffff> <TD> </TD> </TR> </TBODY> </TABLE>

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=1 cellPadding=0 bgColor=#ff375d> <TBODY> <TR bgColor=#ffffff> <TD style="BORDER-BOTTOM: rgb(255,255,255) 1px dashed; BORDER-LEFT: rgb(255,255,255) 1px dashed; BORDER-TOP: rgb(255,255,255) 1px dashed; BORDER-RIGHT: rgb(255,255,255) 1px dashed"> </TD> </TR> </TBODY> </TABLE>

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD style="BORDER-BOTTOM: rgb(250,130,170) 1px dashed; BORDER-LEFT: rgb(250,130,170) 1px dashed; BORDER-TOP: rgb(250,130,170) 1px dashed; BORDER-RIGHT: rgb(250,130,170) 1px dashed"> </TD> </TR> </TBODY> </TABLE>

style="border-bottom: rgb(250,130,170) 3px dotted; border-left: rgb(250,130,170) 3px dotted; border-right: rgb(250,130,170) 3px dotted; border-top: rgb(250,130,170) 3px dotted"

응용하면 이렇게도 가능하다~ㅎㅎ 1px dashed를 3px dotted로 했을 때 이러한 예쁜 점이 나오게 되는 것ㅎㅎ

style="border-bottom: rgb(250,130,170) 1px solid; border-left: rgb(250,130,170) 1px solid; border-right: rgb(250,130,170) 1px solid; border-top: rgb(250,130,170) 1px solid"

마치 1번과 같게 보이지 않는가? table에 배경색을 깔아주고 cellspacing값을 주고 tr에 흰색을 깔아주는 것과
눈으로 보는 결과는 같게 나온다 ㅇㅇ

자, 그럼 테이블 선 모양, 색상, 굵기, 크기 바꾸는 법은 여기까지.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - -


도움이 되셨으면, 손가락버튼 꾹~! 눌러주시와요~
궁금한 점 있으시면 제가 알고있는 선에서 성실히 대답해드리겠습니다.
아는건 별로 없지만..OTL

그냥저냥 쓰려다보니 알게돼서, 실제로 이게 제대로 알고있는건가 의문이 들긴하지만
요즘 책도 판타지소설만 읽다보니 책포스팅도, 일상 포스팅도 할 게 없어서 테이블태그를 한 번 써볼까한다.
뭐 누가볼까 싶지만... 말 재주가 없어서 말투가 딱딱하고 재미없을지도..


테이블 태그의 기본 구성은 이렇다.

(예제 1.)

<table border="1" cellspacing="0" cellpadding="0" > <tbody> <tr> <td width="100" height="30"> </td> </tr> </tbody> </table>

<table>과 </table> 사이에
<tbody>,</tbody>와 <tr></tr>, <td></td>가 들어가는 것이다.

그렇다면 <table>과 </table>의 차이인 '/' 바로 이 것, 이 것은 끝맺음? 정도로 생각하면 될 듯하다.

테이블 시작~ 테이블 시작 끝!
마찬가지로, tbody, tr, td도 시작과 끝이 있다. 시작과 끝은 한 세트.

그럼 테이블 태그를 하기 앞서서 알아야 할 것이 있는데 각각의 용어들이다.

▲ 제일 먼저 작업해야 할 것이다.
관리자 페이지의 환경설정에서 글 주소를 '숫자형식(예 - http://블로그주소/숫자)로 선택하고 '저장'
꼭!
이렇게 해야 뒷탈이 없다 =ㅅ=


다피님의 IT 리포트 페퍼린즈 블로그에서 페이스북 소셜 플러그인 설치방법을 보고 그대로 따라해봤다 ㅇㅇ
http://paperinz.com/2207

딱히 페이스북을 하는건 아니지만, 
따로 운영하는 블로그에 써먹어야되서.. 테스트할 겸 내 블로그에 적용해보았다.
지금부터는 페이스북 댓글 플러그인 다는 과정 ↓


먼저, 페이스북에 로그인을하고 개발자페이지의 앱으로 들어간다.
https://developers.facebook.com/apps

새 앱 만들기를 클릭해서 새 앱을 만든다. (이걸 꼭 해야함)

적당한 앱 이름이랑 facebook terms에 agree 체크해주고 계속하기

보안확인하고 확인~

그러면 이러한 창이 뜨는데, app domain에 tistory.com을
website의 사이트 URL에 자신의 블로그 주소를 적으면 된다.
나의 경우 http://2liter.tistory.com/ 으로 기입했다.
그리고 '변경 내용 저장'

Changes saved. 쏼라쏼라쏼라
이렇게 뜨면 잘 변경이 적용된 것.
※저런 창이 뜨지 않고 오류가 난 경우에는 페이스북계정에 핸드폰 인증을 했는지 알아보길 바람.
(계정인증이 되어있어야함)

다 되었으면 개발자문서>core concepts>social plugins 로 들어가서

comments를 클릭~

그리고 Get Code!

복사~ 하고 적당한 메모장에 임시로 붙여넣는다.

그리고 아까전에 만들었던 앱의 ID를 복사해서

▲ 위 이미지처럼 넣어주면 된다.
all.js#appId=앱아이디(숫자15자리)&amp;xfbml=1

▲ 그 다음으로, 위 이미지의 드래그 된 부분 'example.com'에 http://를 제외한 자신의 블로그주소+치환자를 적어주면된다.
관련 포스팅들을 보다보니, 블로그에 따라 치환자가 다를 수도 있다고 하는데,
내 블로그의 치환자는 임. 그래서 그냥 넘어감.

이 작업이 중요한데, 이 작업을 해야만, 각 글 마다 각각의 댓글창이 달리게 되기 때문이다.
(이 작업 안하면 각 글마다 똑같은 댓글창이 따라다님)

▲ 계속해서, example.com이 있던 자리에 http://를 제외한 내 블로그주소+치환자를 대입한 모습
2liter.tistory.com[★##_article_rep_link_##]
↑치환자에서 별빼세요;

정리하면 이렇게 되겠습니다.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=앱아이디&amp;xfbml=1"></script><fb:comments href="블로그링크치환자" num_posts="2" width="가로길이(픽셀단위)"></fb:comments>

num_posts="숫자" 는 댓글창에 보일 댓글의 수
width="숫자" 는 pixel단위로, 댓글창의 가로길이

여기까지 사전작업은 끝! 이 났다. 
 

사전 준비작업이 끝났으면, 티스토리 블로그 관리자 페이지에 들어가서 [ 스킨> HTML/CSS편집 ]

넣고 싶은 위치에 붙여넣어주면 된다.

▲ 이 부분에 들어가게 된다. HTML/CSS편집 창에서 편집창을 쭉 보면 대강 느낌이 올거다;;
스크롤을 쭉 내리다가보면

<!-- 포스트 본문 내용 --> <div class="article"> </div><!-- close article --> <div class="author"> <span class="text">posted by</span> </div> ★ <!-- 태그트레일 -->

이렇게 보이는데 ★ 별 있는 데에 사전에 미리준비해둔 소스코드를 붙여넣으면 된다.
저렇게 친절하게 <!-- 쏼라쏼라 --!> 안에 메모해둔 흔적이 있으니 그 흔적을 보고 대충 여기가 어디쯤이구나 생각하고 대입해보면 된다. 

▲ 적용한 모습
일단 각각의 글에 각각의 댓글창이 달리는지 확인 할겸 흑역사? 게시글에 test 댓글을 달아놨다.

▲ 그리고 블라인드를 보고왔다 게시글에서 test댓글이 달려있는지 확인
했다... 음 test가 없으니 제대로 달린게 맞는게군.
음음..
그래그래

끝!

그리고 위에 캡쳐 이미지를 보면 좋아요도 달아놨는데..
그것도 포스팅하려고 했는데..
나중에.. 

얼마 전에 utorrent를 설치했다가 모르고 utorrent toolbar까지 깔아버렸다... 이건 뭐.. 삭제하려고해도 계속계속 나타나고, 레지스트리 값을 다 지울려고 해도 마지막 하나가 지워지지 않고... utorrentbar 삭제를 검색해서 나온 '답'들을 다 따라해봤는데도 안되더라. 그래서 영어에 쥐약인데 마지막으로 utorrent bar uninstall chrome 이라 검색했더니... small "u"는 없었지만  일단 주소 창 옆의 저 녀석을 발견. (붉은 네모친 부분) 우클릭을 하니 제거가 뜨네그려... 허허허...이렇게 쉬운 것이었나. 제거다 이샛퀴야 내가 너 때문에 이 아까운 저녁시간을..ㅠㅠ ㅂㅂ ★☆짜잔☆★

네이버 검색을 해서 두 번의 헛다리를 짚은 결과 네이버 '고스트'카페에서 프로그램을 발견. Advanced ZIP Password Recovery 4.0.exe   0. 설치방법은 간단하다. 중간에 레지스트레이션 키 넣으라고 할 때 시리얼에 적힌 키 값을 복사/붙여넣기 하면 된다. 1. 실행화면 동그라미 친 부분을 클릭하거나 Open을 클릭해서 압축을 풀 zip파일을 선택한다. 2. 불러오고 난 후 '붉은 네모'친 부분 Start 를 클릭한다. [참고] All caps latin [A-Z] A부터 Z까지 All small latin [a-z] a부터 z까지 All digits [0-9] 숫자 All special symbols [!@...] !나 @같은 모든 특수기호 Space 공백 All printable 위에꺼 다. 체크하고 싶은 항목에 체크하고 스타트하면 된다. 어차피 암호를 푸는 입장이니까 암호가 대문자만 썼는지, 소문자도 썼는지 숫자도 썼는지, 빌어먹을 기호까지 썼는지는 모르니까 처음부터 다 체크하고 거는 방법도 방법이라면 방법. (대신 시간이 오래걸린다. )     **그리고 한 가지 짚고 넘어가야할 게 있다면 '암호의 길이' 인데 기본 최대값이 5라, length값을 지정해주지 않으면 5 이상의 비번을 풀지 못할 때가 있다. 그럴 때 Length에서 암호의 최소길이(문자수)와 최대길이를 지정해줄 수 있다. 3. 체크해준 값과 지정해준 길이 안에서 하나하나 대입해가며 열심히 찾다가 다 찾으면 이런 창이 뜬다. '붉은 네모'친 부분이 패스워드이다. 암호 7자리로 테스트해봤는데 잘 된다.