나는 늘 깔끔하게 트위터 위젯을 달고 싶었다. 그러나 아무리 트위터 위젯 만들기를 보고 따라해도 깔끔한 위젯이 나오질 않았다. 트위터 위젯 헤더 부분에 정체를 알 수 없는 대빵만한 @daily714님의 트윗 같은 글씨가 그 문제였다. 나는 알지 못했다. 트위터 개발자 페이지에 위젯에 대한 상세한 설명이 있었다는 것을. (이래서 영어를 배워야 합니다.) 아무튼, 이건 html 기초도 모르고 아무튼 이딴 건 1도 모른다. 나는 복사만 해서 내 홈페이지(어디든 html 문서를 사용하는 곳이라면)에 넣고 싶다!!! 라는 사람들을 위한 트위터 위젯 설정값 설명. (설명이 좀 불친절할 수도 있음.)
1. 트위터 -> 설정 및 개인 정보 -> 위젯 -> 위젯 생성 -> 생성 후 아래 코드 추가
show-replies="true/false" : 다른 트위터 계정에 대한 멘션 보이기/안 보이기chrome="noheader nofooter noborders transparent noscrollbar" : 위젯 디자인 요소. 각각 헤더없음/푸터없음/보더없음/배경투명/노스크롤 (여기서 보더 없음이란 트위터 사이사이에 낀 가로줄)theme="dark/light" : 배경&폰트 색상 값. (dark하면 어두운 테마, light하면 밝은 테마)width="px" : 가로 값.height="px" : 세로 값.tweet-limit="1~20"/"undefined" : 탐라에 표시될 트윗 개수. 예시로 1개를 고정하면 height 값 소용없음.link-color="#000000" : 해시태그와 @멘션을 포함한 링크 색상.border-color="#000000" : 위젯 안의 보더 컬러 조정
※. 속성="값"의 형태다. 그러나 나는 아직도 이게 무슨 소린지 모르겠다. 라면 아래 예시글을 보면 좀 더 쉽다.
2. 러스티 홈 메인 페이지에 달린 트위터 위젯 예시 :
▼
[a class="twitter-timeline" href="https://twitter.com/daily714" data-widget-id="699311689565536256" data-theme="white" data-link-color="#cc0000" width="250" height="350" data-chrome="noheader nofooter noborders noscrollbar transparent" lang="ko"]@xxxxxxx 님의트윗[/a][script async src="//platform.twitter.com/widgets.js" charset="utf-8"][/script]
▼
data-theme="white" : 나는 기본 테마를 화이트로 하겠다. (흰색 배경홈에 글자는 검정으로, 이게 아마도 기본값일 거다. 아마도? 아마도.)data-link-color="#cc0000" : @멘션/링크/해시태그 컬러 값을 #cc0000으로 해라.width="250" : 가로 사이즈 250px로height="350" : 세로 사이즈 350px로data-chrome="noheader nofooter noborders noscrollbar transparent" : 헤더없음/푸터없음/보더없음/스크롤없음/배경투명
※. 이대로 소스를 출력하면 테두리가 없다. 그러나 스샷에는 테두리가 있다. 왜냐면 트위터 위젯을 감싸는 다른 태그가 있기 때문임. (예를 들자면 div라는 태그 안에 트위터 위젯이 들어가 있는데, 그 div의 테두리 값이 [border: 1px solid #ddd;] 라는 소리.
※. 나도 데일리 너처럼 테두리를 넣고 싶어!!!!! 라면... (예시므로 너님의 홈페이지엔 적용이 안 될 수도 있다.)
헤더 안에 아래 소스를 넣으세요.따로 css 파일이 있다면 거기에 추가해도 됨. (물론 대괄호[]ㅡ는 전부 <>이거로 바꾸셔야 합니다.)[head][style].twitter_wg {width:너님 트위터 가로값;height:너님 트위터 세로값;border:1px solid #d2d2d2; (두께 1px. 변경 가능 값이 클수록 두꺼움. #16진수컬러값. )padding:0;}[/sytle][/head]
body 태그 안에 너님이 트위터를 넣고 싶은 위치.[body][div class="twitter_wg"]여기에 트위터 소스를 넣는다.[/div][/body]
+ 쓸데없는 설명. (?) class="twitter_wg" 저건 뭐..? 스타일 태그 안에 들어가는 .twitter_wg 을 뜻함. 머리(head) 안에서 스타일(Style꾸미기)를 관장하는 애가 소리치는 거임.
스타일 왈 : class="twitter_wg" 얘한테 가로값을 OOpx로 주로, 세로값을 OOpx로 주고, 보더(테두리) 두께를 1px로 하고 색상을 #d2d2d2로 해!!!!!
이렇게 헤드(head)안의 스타일이 몸뚱아리(body)에게 존나게 소리치는 겁니다. 그럼 몸뚱아리(body)는 "아! 머리에서 이렇게 소리치는 구나! 몸뚱아리를 이렇게 보여야쥐~" 하고 머리에서 소리친 대로 보여주는 겁니다.
+ 스타일 태그 안에 twitter_wg 쓸 때 앞에 온점 [.] 빼먹으면 안 됩니다. 저 온점이 이것은 class = . 라는 뜻이므로.
+ 어려우면 댓글로 질문!
