검색결과 리스트
IT/Web에 해당되는 글 9건
- 2011/09/14 티스토리에 페이스북 소셜 댓글 달기! (2)
- 2011/03/20 Internet Explorer 9(ie9) 써보기!
- 2010/12/14 HTML5 Form 간략히 훑어보기
- 2010/12/09 HTTP Method의 종류
- 2010/12/06 CSS 3 Selector
글
티스토리에 페이스북 소셜 댓글 달기!
IT/Web
2011/09/14 23:00
게시글에 소셜 댓글이 달린 모습
최근 블로그에 페이스북 소셜 댓글(Facebook Developers > Social Plugins > Comments)을 달았다. 혹시나 어려워 하실 수 있는 분들을 위해 소셜 댓글을 다는 방법을 공유해본다!
저쪽에 보이는 링크를 클릭한다.
위의 페이지에서 Comments 부분을 클릭!
코드는 html에 삽입할 수 있는 스크립트 형태로 되어 있으므로,
나중에 바꿔도 상관이 없으므로 일단, Get Code를 클릭한다.
위의 사진과 같이 HTML5와 XFBML을 선택할 수 있다.
HTML5를 지원하지 않는 브라우저를 사용하는 사람들을 위해,
일단 XFBML로 선택한다.
XFBML를 사용하기 위해선, 아래에 있는 xmlns 코드도 복사해서 붙여넣어야 한다.
티스토리 관리자 페이지에서 HTML/CSS 편집으로 들어간다.
일단, xmlns 코드를 다음과 같이 붙여 넣는다.
xmlns가 뭔지 궁금하신 분들을 위해 간단히 설명하자면,
<fb:...>과 같은 커스텀 태그(Custom Tag)를
사용하기 위한 정의(Define) 부분이다.
(그래도... 뭔말인지 어려우려나...)
이제 댓글 부분의 코드를 적당한 위치에 붙여넣는다.
본인은 위 그림과 같이 트랙백 윗부분에 삽입시켰다.
여기서 중요한 것은 href 부분이다.
href 부분을 바꿔주지 않으면, 게시글 마다 동일한 댓글이 달리게 된다.
따라서, href를 각 게시물 주소를 줘야하기 때문에,
위 그림과 같이 치환자를 사용하였다.
해당 치환자는 티스토리 블로그의 게시글 링크 주소를 의미한다.
위와 같이, 본인 블로그 주소 + 치환자를 넣어주게 되면,
각 게시물마다 고유한 댓글이 달리게 된다.
num_posts 부분은 보여주는 댓글의 갯수.
width 부분은 플러그인 창의 길이이다.
궁금한 점이 있으시면, 댓글을 달아주시면 친절히 설명해드리겠습니다.
덧. 누군가 댓글을 달아도 내가 일일히 확인하지 않으면 알 수가 없다. 알림 서비스라도 있으면 좋으련만...
'IT > Web' 카테고리의 다른 글
| 티스토리에 페이스북 소셜 댓글 달기! (2) | 2011/09/14 |
|---|---|
| Internet Explorer 9(ie9) 써보기! (0) | 2011/03/20 |
| HTML5 Form 간략히 훑어보기 (0) | 2010/12/14 |
| HTTP Method의 종류 (0) | 2010/12/09 |
| CSS 3 Selector (0) | 2010/12/06 |
| JSON 값 가져 올 때 Syntax Error가 난다면? (0) | 2010/11/29 |
글
Internet Explorer 9(ie9) 써보기!
IT/Web
2011/03/20 21:09
얼리 어답터(?)답게 ie9을 써보기로 하였습니다. 평소엔 크롬을 사용하고 있는터라. 그동안 버려두었던 ie가 얼마나 빨라지고 편리해졌나 살펴보기로 하였습니다. (다른 블로그 분들 처럼 전문적인 비교 분석 데이터는 없습니다. ㅋㅋ)
웹 표준이라고는 잘 안 지켜지고, 심지어 자신의 버젼별로 HTML의 레이아웃도 달라지는 ie가 과연 아름다움에 눈을 떴을까요?
어째서인지, 작업 중이 프로그램을 모두 저장하고 닫게 만들어 버립니다.
흠... 고작 웹 브라우저 하나 설치하는데 재부팅하는 수고까지 가져야 하나 의문이 드는 대목입니다. 영... 맘에 안 드는 MS 형님들
설치가 완료되었습니다. 심플한 듯, 크롬을 베낀듯 안 베낀듯 특이한 UI입니다. 주소 표시줄 오른 쪽에 탭을 위치시켰네요. 크롬에 적응을 한 상태라 좀 불편합니다. 위에 공간도 남는데, 크롬처럼 위쪽에라도 탭을 위치시키지...
일단, 웹 표준을 지켰다는 MS의 말처럼, 크롬이나 파폭과 같은 레이아웃이 나오기는 합니다만, 아직 자바스크립트는 처리가 덜 되었는지, 가끔 자바스크립트 오류를 나타냅니다. 한 예로는 티스토리에서 스킨 위자드로 스킨을 변경하면 무한 리프레쉬가 되고 마네요.
사실 HTML5도 지원하고, 웹 표준도 지킨다기에 ie9을 설치해보았으나, 좀 더 사용해 봐야 알 것 같네요. 파폭이나 크롬처럼 편리한 부가 기능도 없고, 아직은 MS가 좀 더 노력해야 하지 않나 싶습니다.
'IT > Web' 카테고리의 다른 글
| 티스토리에 페이스북 소셜 댓글 달기! (2) | 2011/09/14 |
|---|---|
| Internet Explorer 9(ie9) 써보기! (0) | 2011/03/20 |
| HTML5 Form 간략히 훑어보기 (0) | 2010/12/14 |
| HTTP Method의 종류 (0) | 2010/12/09 |
| CSS 3 Selector (0) | 2010/12/06 |
| JSON 값 가져 올 때 Syntax Error가 난다면? (0) | 2010/11/29 |
글
HTML5 Form 간략히 훑어보기
IT/Web
2010/12/14 15:15
최근 새로운 표준안인 HTML5에 대한 관심이 지대하다. 여러가지 태그(Tag)와 속성을 추가하였고, 다양한 기능, 특히 이미지와 비디오 부분에서 많은 발전이 있었다. 또한, 모바일 플랫폼에서의 가능성을 크게 보고 있다.
<form method="post">
<fieldset>
<legend>검색</legend>
<input type="search" placeholder="검색어를 입력해주세요." size="30"/>
<input type="submit" value="검 색"/>
</fieldset>
<fieldset>
<legend>Profile</legend>
<dl>
<dt>Name (Text Type)</dt>
<dd><input type="text" required="required" placeholder="Fill me …"/></dd>
<dt>Gender (Radio Type)</dt>
<dd>
<input type="radio" name="gender" id="gd1"/><label for="gd1">Male</label>
<input type="radio" name="gender" id="gd2"/><label for="gd2">Female</label>
</dd>
<dt>Email (Email Type)</dt>
<dd><input type="email" pattern="[^ @]*@[^ @]*"/></dd>
<dt>Homepage (URL Type)</dt>
<dd><input type="url" /></dd>
<dt>Telephone (Tel Type)</dt>
<dd><input type="tel" maxlength="15"/></dd>
<dt>Date of birth (Date Type)</dt>
<dd><input type="date" value="1980-01-01"/></dd>
<dt>Now is... (Datetime Type)</dt>
<dd><input type="datetime" /></dd>
<dt>This month is... (Month Type)</dt>
<dd><input type="month" /></dd>
<dt>This week is... (Week Type)</dt>
<dd><input type="week" /></dd>
<dt>What time is it now? (Time Type)</dt>
<dd><input type="time" /></dd>
<dt>Date of birth[Your country] (Datetime-local Type)</dt>
<dd><input type="datetime-local" size="30"/></dd>
<dt>Age (Number Type - min 0, step 1)</dt>
<dd><input type="number" value="17" min="0" step="1" /></dd>
<dt>Average Grade (Number Type - min 0.5, max 4.5, step 0.5)</dt>
<dd><input type="number" value="3.5" min="0.5" max="4.5" step="0.5" /></dd>
<dt>Inclination (Range Type - min 0, max 2, step 1)</dt>
<dd>Progressive <input type="range" min="0" max="2" step="1"/> Conservative</dd>
<dt>Favorite Color (Color Type)</dt>
<dd><input type="color"/></dd>
<dt>Hobby (Checkbox Type)</dt>
<dd>
<input type="checkbox" name="hobby" id="hb1"/><label for="hb1">Games</label>
<input type="checkbox" name="hobby" id="hb2"/><label for="hb2">Baseball</label>
<input type="checkbox" name="hobby" id="hb3"/><label for="hb3">Reading</label>
</dd>
<dt>Profile Photo (File Type)</dt>
<dd><input type="file"/></dd>
<dt>Introduce yourself! (Textarea)</dt>
<dd><textarea></textarea></dd>
</dl>
</fieldset>
</form>
캔버스 기능을 테스트 해보았다. 아래의 자바스크립트로 myCanvas라는 ID를 가진 Canvas 엘리먼트에 그림을 그리고 글자를 써보았다.
var elem = document.getElementById('myCanvas');
if (elem && elem.getContext) {
var context = elem.getContext('2d');
if (context) {
context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.lineWidth = 4;
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
context.fill();
context.stroke();
context.closePath();
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 100, 100);
context.font = '70px Tahoma';
context.strokeText('This is Canvas Element!', 100, 150);
}
}
Form을 테스트 해보자. 이번 Form 엘리먼트 중에서 맘에 드는 것은 range type, date type등 새로운 타입이 생긴 것과 placeholder라는 속성을 두었다는 것이다.
<input type="search" placeholder="검색어를 입력해주세요." />
라고 설정을 해두었는데, 아래 그림과 같이 구현이 되어있다. 필드에 값이 채워지면 자동으로 없애준다. 전에는 Javascript+CSS로 구현했던 기능이 속성 하나로 구현되니 얼마나 편한지 모르겠다. 각각의 Input 엘리먼트들이 지원해주는 속성에 대해서는 여기를 참조하도록 하자.
'IT > Web' 카테고리의 다른 글
| 티스토리에 페이스북 소셜 댓글 달기! (2) | 2011/09/14 |
|---|---|
| Internet Explorer 9(ie9) 써보기! (0) | 2011/03/20 |
| HTML5 Form 간략히 훑어보기 (0) | 2010/12/14 |
| HTTP Method의 종류 (0) | 2010/12/09 |
| CSS 3 Selector (0) | 2010/12/06 |
| JSON 값 가져 올 때 Syntax Error가 난다면? (0) | 2010/11/29 |
글
HTTP Method의 종류
IT/Web
2010/12/09 16:25
- HTTP Method의 정의
일단, HTTP Method가 무엇인가 알아보자. 간단하게 설명하면 HTTP 프로토콜은 TCP와 UDP 프로토콜을 기반으로 하여 웹에서 사용하는 프로토콜로서 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식을 말한다. HTTP Method는 말 그대로 서버에 요청을 보내는 방법이다.
- HTTP Method의 종류
HTTP 명세서에 따르면 HTTP Method에는 8가지의 명령이 있다. OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT가 있다. 각각의 사용은 아래와 같다.
- OPTIONS
- 요청한 URL에 어떠한 메소드 요청이 가능한지 묻는다.
- GET
- URL에 해당하는 정보의 전송 요청을 보낸다.
- HEAD
- URL에 해당하는 정보의 전송을 요청하지만, GET과는 다르게 정보의 Meta 정보만을 요청한다.
- POST
- 서버가 처리할 수 있는 자료를 보낸다. GET으로 보낼 수 없는 자료들에 대해 전송할 때 사용한다.
- PUT
- 자료를 전송하여 해당 URL에 자료를 저장한다.
- DELETE
- 해당 URL의 자원, 정보를 삭제한다.
- TRACE
- 이전까지 요청한 정보들의 목록을 요청한다.
- CONNECT
- 프록시가 사용하고, 연결을 요청한다.
기존의 웹 플랫폼에서는 GET, POST Method를 사용하여 통신을 해왔는데, RESTful 서비스에서 GET, POST, PUT, DELETE Method를 가지고 동일 URL로 각각의 동작을 처리하는데 사용하고 있다.
'IT > Web' 카테고리의 다른 글
| Internet Explorer 9(ie9) 써보기! (0) | 2011/03/20 |
|---|---|
| HTML5 Form 간략히 훑어보기 (0) | 2010/12/14 |
| HTTP Method의 종류 (0) | 2010/12/09 |
| CSS 3 Selector (0) | 2010/12/06 |
| JSON 값 가져 올 때 Syntax Error가 난다면? (0) | 2010/11/29 |
| 이제 대세는, HTML5? (0) | 2010/02/02 |
글
CSS 3 Selector
IT/Web
2010/12/06 10:49
웹 스타일 작업을 하다보면 자꾸 까먹게 되는 Selector가 있다. Type일 경우는 어떻게 했더라가 제일 많이 까먹는 부분이었는데, 검색을 하다보니 오랜만에 후리자님(일방적으로 아는 학교 선배 ㅋㅋ)이 잘 정리해두신 자료를 찾았다. 바로 공유~ ㅋㅋ
[바로보기]
구글 문서 도구 http://bit.ly/g00grF
[FILE]
__Selectors.pdf
'IT > Web' 카테고리의 다른 글
| HTML5 Form 간략히 훑어보기 (0) | 2010/12/14 |
|---|---|
| HTTP Method의 종류 (0) | 2010/12/09 |
| CSS 3 Selector (0) | 2010/12/06 |
| JSON 값 가져 올 때 Syntax Error가 난다면? (0) | 2010/11/29 |
| 이제 대세는, HTML5? (0) | 2010/02/02 |
| 전자정부 프레임워크 (2) | 2009/12/23 |
