My Story, My Life

5hoon's Blog is powered by Tattertools

'**Web Programming'에 해당되는 글 8건

  1. 2009/05/11 Javascript 로 float style 지정하기
  2. 2008/08/30 리퍼러 스팸, Referer spam
  3. 2008/08/20 PHP 업로드 제한 풀기
  4. 2008/06/17 xHTML 기본
  5. 2008/05/27 TC용 wp mp3 플레이어 (3)
  6. 2008/04/10 escape 고찰
  7. 2008/03/13 PHP + Mysql 이용한 카운터/리퍼러 로그 만들기 (1)
  8. 2008/03/03 htaccess 작성/설정하기 (4)
1 

Javascript 로 float style 지정하기

**Web Programming/Javascript 2009/05/11 08:23 by 5hoon
Javascript 를 이용하여 Element 의 Style 속성을 변경, 추가할 수 있다.


document.getElementById("id").style.property="value"


property 에는 주로 쓰는 CSS syntax 를 써주면 된다.

다만 background-image 같이 하이픈이 있는경우에는
backgroundImage 로 바꾸어서 써준다.

한가지 예외.. float property 를 쓸려고 보니..
float 는 javascript 에서 이미 사용되고 있는 data type..

잠깐의 검색끝에 알아낸 꼼수 .. -0-

IE의 경우 
object.style.styleFloat

이외의 "우수한" 브라우저에서는
object.style.cssFloat

를 써주면 된다던 ..

다음은 w3school 의 property 목록.
http://www.w3schools.com/HTMLDOM/dom_obj_style.asp

출처 : http://earthcode.com/blog/2006/01/css_floats_programmatically.html
2009/05/11 08:23 2009/05/11 08:23
TAG , , ,
2 Trackback No comments.

리퍼러 스팸, Referer spam

**Web Programming 2008/08/30 06:25 by 5hoon
몇일전부터 제 리퍼러 기록에 비슷비슷한 리퍼러가 기록 되는데 다들 성인사이트로 연결되게 되어 있습니다.
안눌러보면 그만이지만 보기 싫어서 퇴치 방법을 검색해 보았습니다.
몇일간에 실험 결과 더이상 이런 쓰잘대기 없는 리퍼러가 보이지 않아 이렇게 해결책을 올립니다 ^^

리퍼러 스팸이란?
개인 블로그나 홈페이지 운영자들은 자신의 웹페이지에 접근하는 사람들의 정보를 로그로 남길수가 있습니다.
로그에 남기는것중 한가지가 유입 경로, 즉, Referer 로그 입니다.
웹페이지에 오기전에 어떠한 링크를 타고 들어 왔는지 알려주는 정보 입니다.
리퍼러 스팸은 이 기능을 역 이용 하는것입니다.
가짜 리퍼러를 만들어 로그에 자신의 홈페이지 주소가 노출되게 하는것입니다.

어떻게 하는가?
방법은 여러가지가 있다.
가장 간단한 방법은 이미지 링크를 삽입하고 그 주소에는 스팸 공격을 할 웹페이지를 넣으면 된다.
그 페이지에는 아무런 이미지가 뜨지도 않지만 내 홈페이지에는 조금의 트래픽을 유발하게 된다.
IE 를 해킹해서 Referer 정보를 수정 할수도 있다.. 참조 사이트에서 말하기를 IE에 DNS 에러 처리, 검색 페이지 설정, 이상한 툴바 설치 등등을 할수 있는데, referer 라고 못할건 뭐냐고 한다...

어떻게 막는가?
아파치 서버를 사용하고 .htaccess 를 설정할수 있다면 간단히 막을수 있다.
# Options +FollowSymlinks

RewriteEngine On

RewriteCond %{HTTP_REFERER} ^http://(www\.)?site1.com.*$ [OR]

RewriteCond %{HTTP_REFERER} ^http://(www\.)?site2.com.*$ [NC,OR]

RewriteCond %{HTTP_REFERER} ^http://(www\.)?site3.com.*$ [NC,OR]

RewriteCond %{HTTP_REFERER} ^http://(www\.)?site4.com.*$ [NC]

RewriteRule \.*$ http://www.other-page.com [R,L]


site 의 주소만 추가하면 되고
첫 site 뒤에는 [OR]
마지막 site 후엔 [NC]
나머지는 [NC, OR] 을 붙여 주어야 한다.

마지막 줄에는 이 스패머들이 공격을 시도 할때 보여줄 웹페이지 주소를 설정하는것이다.
그냥 간편하게 403 Forbidden 에러를 보여주고 싶으면
RewriteRule .* - [F,L]

로 마지막줄을 수정하면 된다.

참조 사이트 : http://www.spywareinfo.com/articles/referer_spam/
PS : 더 간단해 보이는 방법을 트랙백에 걸어 놓았습니다 ^^;;;
2008/08/30 06:25 2008/08/30 06:25
TAG , , , , , , , ,
1 Trackback No comments.

PHP 업로드 제한 풀기

**Web Programming 2008/08/20 00:54 by 5hoon
호스팅 업체를 변경후 직접 php.ini 파일 수정 권한을 가지게 되었습니다..

그래서... 텍스트큐브 블로그 첨부파일이 요즘 파일 크기가 많이 큰데...

어느정도 파일 크기가 커지면 잘 안되더군요..

php.ini파일에서 수정하던 줄은..
upload_max_filesize = 10M;


한참 검색후 답이 나오더군요..
두줄더 추가 수정 하게 되었습니다

max_execution_time = 30     ; Maximum execution time of each script, in seconds
post_max_size = 10M ; Maximum size of POST data that PHP will accept.


업로드 에 걸리는 시간과 Post 방식으로 업로드 하기에 그 제한까지 늘려주면 되더군요..
max_execution_time = 0 으로 설정하면 무한대라는군요..
어쨋든 이제 더 넉넉히 업로드 할수 있겠습니다 ^^
2008/08/20 00:54 2008/08/20 00:54
TAG , , , , ,
No trackbacks No comments.

xHTML 기본

**Web Programming/HTML 2008/06/17 06:24 by 5hoon
오늘부터 Web Programming 의 기초부터 한번 써볼려 합니다.
목차
1. HTML의 기본구조
2. Head 에 들어가는 태그
    i. Title
3. Body 에 들어가는 태그
    * Block Element vs Inline Element
    i. p, 문단
    ii. heading, 제목
    iii. hr, 수평선
    * Attribute, 속성
    iv. anchor, 링크
    v. br, 줄바꿈
    vi. img, 이미지
    vii. em, strong, 강조
4. 기타
    * Comment, 주석
    * Validation, 인증
1. HTML 의 기본 구조
xHTML 에 앞서 웹 페이지에 가장 기본이 되는것은 HTML 입니다.
HTML 은 Hypertext Markup Language 의 줄임말로 웹페이지의 기본 내용과 구조를 담고 있습니다.

HTML파일 안에 내용들에는 HTML 태그들이 그 내용들을 둘러싸고 있습니다. 즉.
<태그>내용</태그>

이런 구조로 HTML 파일을 작성하게 됩니다.

xHTML은 HTML에서 한단계 업그레이드(?)된 버젼으로 2000년도에 W3C (World Wide Web Consortium) 의 표준으로 자리잡게 됩니다.
기나긴 역사 이야기는 생략하고..

xHTML의 기본 페이지 구조는 이렇게 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        페이지의 정보
    </head>
    <body>
        페이지의 내용
    </body>
</html>

즉, head 태그 안에는 HTML 페이지에 대한 각종 정보가 들어가 있고, body 태그 안에는 HTML 페이지의 내용이 들어가게 됩니다.
이러한 HTML 파일들은 .html 의 확장자를 가지게 됩니다.

2. head 에 들어가는 태그들..
기본적인 태그로는 title 태그가 있습니다.
즉 페이지의 제목을 알려줍니다.
<title>My Story, My Life :: </title>
이렇게 적용하였을 경우 이렇게 보여지게 됩니다.
사용자 삽입 이미지

각종 브라우저에 표시되는 title



3. body 에 들어가는 태그들..
* Block Element vs Inline Element
Body 에 들어가는 태그는 크게 두 종류로 나눌수 있습니다.
첫번째로 살펴볼것은 Block Element 라고 불립니다.
블록을 전부 차지한다는 뜻으로, 한 화면에 큰 블록을 차지하게 됩니다.
이런 태그로는 paragraph (문단), list (목록), table (표) 등등이 존재합니다.
이러한 태그를 연달아서 사용할 경우 브라우저에서 임의적으로 두 블록 사이에 여백을 두게 됩니다.

이에 상응하여 Inline Element 는 블록이 아닌 작은 영역에 사용됩니다.
주로 작은 효과를 주기 위해 사용됩니다.
이러한 태그들중에는 Bold (진하게), Italic (기울림), Image (이미지) 등등이 존재합니다.
이러한 태그들을 사용하기 위해서는 Block Element 안에 넣어서 사용해야 합니다.
한 Block Element 안에 또 다른 Inline Element 는 허용이 되며 또한 Inline Element 안에 또 다른 Inline Element 를 넣어서 사용할수 있습니다 .

이제 몇가지 body 태그를 살펴보면서 block element 와 inline element의 차이를 보겠습니다.

i. P 태그 (Block)
Paragraph 의 약자로 문단을 나타낼때 쓰는 태그입니다.
<p>안녕하세요 ^^       반갑습니다.
제 블로그에 방문해 주셔서 감사합니다.
또 놀러와                              주세요</p>

결과
안녕하세요 ^^ 반갑습니다. 제 블로그에 방문해 주셔서 감사합니다. 또 놀러와 주세요
(HTML 에서는 띄어쓰기, 즉, white space 를 무시합니다)

ii. Heading 태그 (Block)
제목이라고 볼수 있습니다. h1, h2, ..., h6 까지 존재합니다.
<h1>My Story, My Life</h1>
<h3>My Story, My Life</h3>
<h6>My Story, My Life</h6>

결과

My Story, My Life

My Story, My Life

My Story, My Life


iii. Hr 태그 (Block)
Horizontal Rule 태그라 하여 페이지 전체에 수평선(?) 을 그리게 됩니다.
또한 hr 태그는 특별히 닫는 태그가 없기에 다른 방식으로 표기됩니다. 즉,
<hr />
이렇게 쓰게 됩니다.
결과는..


* Attribute, 속성
이제 몇가지 Inline Element 를 살펴 보게 될텐데요,
그전에 HTML 태그의 속성을 좀더 알아보도록 하겠습니다.

HTML 의 몇몇 태그들은 Attribute (속성) 이라는 추가 정보를 포함할수 있습니다. 즉,
<element attribute="value" attribute="value" ... >Content</element>

가 되는것입니다.

iv. Anchor, 링크 (Inline)
페이지에 링크를 걸때 사용합니다. 짧게 a 로 씁니다.
href: 링크를 눌러 도착할 곳, 절대경로나 상대경로 두가지다 사용가능합니다.
title: 링크에 대한 설명입니다.
<a href="http://google.com/">구글</a>
<a href="http://google.com/" title="검색하기">구글 검색</a>
이렇게 쓰게 됩니다.
결과는..

구글
구글 검색
(구글 검색에 마우스만 올려보세요 ^^)

v. br, 줄바꿈 (Inline)
HTML 에서 많은 띄어쓰기나 엔터를 무시하게 됩니다. 엔터를 사용하기 위해선 br 태그를 넣어 줍니다.
title: 링크에 대한 설명입니다.
<p>안녕하세요<br />반갑습니다<br />자주오세요~</p>
br은 닫는 태그가 따로 없기에 <br /> 으로 써주게 됩니다.
결과는..

안녕하세요
반갑습니다
자주오세요~


vi. img, 이미지 (Inline)
그림을 넣을때 쓰는 태그 입니다. 여러가지 속성 이 존재합니다.
의무적으로 필요한 속성에는 두가지가 있습니다.
src : 이미지의 경로를 나타냅니다
alt : 이미지를 로드 하지 못하였을경우 대신 보여줄 텍스트를 표기합니다.

<img src="/attach/1/1521917863.jpg" alt="Title 제목" />
img 또한 닫는 태그가 따로 없기에 Self Closing 을 해야 합니다.
결과는.. <이미지 로드 성공할 경우>
Title 제목

<이미지 로드 실패할 경우>
Title 제목

vii. Em, Strong 태그 (Inline)
em: Emphasized text - 강조된 텍스트
strong : Strongly Emphasized text - 아주 강조된 텍스트
일반적으로 em 을 사용할시 글자가 기울림 효과가 나타나고 strong 을 사용할시 진하게 표시됩니다.
<p>제 <em>블로그</em>에 <strong>자주자주</strong> 놀러와 <em><strong>주세요</strong></em></p>
이 같이 inline Element 를 여러번 사용할수도 있습니다.
결과는..

제 블로그에 자주자주 놀러와 주세요

결과를 보면 블로그란 글자는 기울림이, 자주자주 라는 글자는 진하게, 그리고 주세요는 기울림과 진하게가 동시에 적용된것을 볼수 있습니다. (em 이 먼저오나 strong 이 먼져 오나 상광없습니다.
즉, <em><strong>내용</strong></em> 과 <strong><em>내용</em></strong> 은 동일합니다.


4. 기타
* 주석
HTML 코드 안에 주석이나 설명을 달아 놓을때는 <!-- .. --> 을 사용하게 됩니다.
body 뿐만 아니라 아무곳에서나 다 적용이 가능합니다.
<p>안녕하세요~ 또 오<!-- 지마 -->세요</p>

결과는..

안녕하세요~ 또 오세요



* W3C XHTML Validator
자신의 xHTML 페이지가 제대로 코딩 되었는지 확인하는 방법입니다.
body 뿐만 아니라 아무곳에서나 다 적용이 가능합니다.
<p>
  <a href="http://validator.w3.org/check/referer">
    <img src="http://www.w3.org/Icons/valid-xhtml11" alt="validate" />
  </a>
</p>

결과는..

validate

이런 이미지가 하나 뜨게 됩니다.
validator.w3.org 에가서 직접 코드를 인증 받을수도 있고
이 코드를 넣어 놓고 클릭할시 자동으로 인증 페이지로 연결해 줍니다.
이 인증 방식은 매우 까다롭기(?) 때문에 몇몇 브라우져 에서 정상 작동할지언정 여기서 인증이 되지 않을수도 있습니다. 다만 친절히 어디가 잘못 되엇는지 알려주기 때문에 쉽게 고칠수 있습니다.


마무리..
다음 글에서는 작성한 HTML의 겉모습을 꾸밀수 있는 CSS 에 대해 서술해 보겠습니다.
유용한 링크들 : W3C school - HTML 태그 목록 - 링크
2008/06/17 06:24 2008/06/17 06:24
TAG , , , , , , , , , , , , , , , , , , ,
No trackbacks No comments.

TC용 wp mp3 플레이어

**Web Programming 2008/05/27 04:15 by 5hoon
한참동안 수정하고 맹글고....
처음 만들어 보는 플러그인이라 내 서버에서만 작동 하는지도 모르겠지만...
플러그인 다운은 http://textcube.org/plugin/624 에서 가능하다.

설치 방법 보기


이리 저리 사용하면 된다...

기본설정 설명


색설정/미리보기


확인 보기



2008/05/27 04:15 2008/05/27 04:15
TAG , , , , , , ,
1 Trackback 3 Comment

escape 고찰

**Web Programming 2008/04/10 08:11 by 5hoon
뭘 만들다 보니.. textarea 에 있는 텍스트를 URL 로 보내야 되어야 했다..
그러나 URL 에 !@#$% 같은 특수한 문자들을 바로 보낼경우 이상하게 된다.
예를 들어 가끔 띄어쓰기가 주소창에 %20 으로 되어 있는것을 본 경우가 있었을 것이다..

RFC¹ 1738 문서에 Uniform Resource Locators 즉 URL 에 대해 서술하고 있다.
내용인즉, URL에는 US-ASCII character set의 일부분만 사용 할수 있게 제한 하는 것이다.
사용 가능한 Character 들은 alphanumerics [0-9a-zA-Z] (숫자, 영문 대소문자), 그리고 특수문자 [$-_.+!*'(),] (괄호 제외) 만이 가능하다.

쓰다보니 URL 과 URI 그리고 URN 의 차이점에 대해 보게 되었는데 이건 다른 포스팅에서 서술하겠다.

어찌되었든 그래서 인코딩 되어야 하는 Character 는 몇가지가 있다.
* ASCII Control characters (아스키 컨트롤 문자열)
    이유 : 이 문자들은 표시가 불가능하다.
    문자 : ASC II 에 00-1F hex (0-31 dec) 그리고 7F hex (127 dec)

* Non-ASCII characters (비 아스키 문자열)
    이유 : 이 문자열들은 아스키 문자가 아니기 때문에 URL에 사용이 불가능하다.
    문자 : 비 아스키 문자와 ASC II 의 절반 80-FF hex (128-255 dec)

* Reserved characters (예약된 문자열)
    이유 : 이 문자열들은 이미 URL 에서 다른 용도로 사용되고 있다.
    문자 : Dollar ("$")
             Ampersand ("&")
             Plus ("+")
             Comma (",")
             Forward slash/Virgule ("/")
             Colon (":")
             Semi-colon (";")
             Equals ("=")
             Question mark ("?")
             'At' symbol ("@")

* Unsafe characters (안전하지 않은 문자열)
    이유 : 몇몇 문자열들은 URL 에서 잘못 인식될수도 있다.
    문자 : 띄어쓰기 : 띄어쓰기를 여러번 할경우 몇몇 띄어쓰기가 읽히지 않을수도 있다.
             ", <, > : HTML 문서에서 사용 URL 을 쓰기위해 사용되는 문자열들이다.
             # : HTML에서 이미 Anchor 로 사용되는 문자열이다.
             % : URL에서 escape 문자로 사용되는 문자열이다.
             {, }, |, \, ^, ~, [, ], ` : 어떤 시스템들에서는 다른 방식으로 표현 될수 있다.

즉, 이런 문자열을 사용하기 위해서는 이 문자열들을 다른 방식으로 표현해 내야 한다. 이것을 URL escape 문자라고도 한다.

이문제로 혼자 한시간 동안 끙끙하다가...
이웃 블로거에게 물어보니.. escape 라는 기본 펑션에 대해 알게 되었다..

Javascirpt 에는 escape(), encodeURI(), encodeURIComponent() 이 세가지 함수들이 있다.
비슷한 작업을 하지만 조금씩 다르게 작용한다.

escape();
MSDN² Jscript Reference에 의하면..
The escape method returns a string value (in Unicode format) that contains the contents of [the argument]. All spaces, punctuation, accented characters, and any other non-ASCII characters are replaced with %xx encoding, where xx is equivalent to the hexadecimal number representing the character. For example, a space is returned as "%20."
즉, 비 아스키 문자열을 %xx 의 형태로 변형 해주는 함수 이다. xx 에는 문자열을 나타내는 16진수가 들어간다.

encodeURI():
MSDN Jscript Reference에 의하면,
The encodeURI method returns an encoded URI. If you pass the result to decodeURI, the original string is returned. The encodeURI method does not encode the following characters: ":", "/", ";", and "?". Use encodeURIComponent to encode these characters.
URI에 사용되는 URI로 변환해주는 함수이다. ":", "/", ";", "?" 는 변환하지 않는다.

encodeURIComponent():
MSDN Jscript Reference에 의하면,
The encodeURIComponent method returns an encoded URI. If you pass the result to decodeURIComponent, the original string is returned. Because the encodeURIComponent method encodes all characters, be careful if the string represents a path such as /folder1/folder2/default.html. The slash characters will be encoded and will not be valid if sent as a request to a web server. Use the encodeURI method if the string contains more than a single URI component.
URI에 사용되는 URI로 변환해주는 함수이다. 모든 문자열을 변환해주기에 조심해서 사용해야한다.

이 세가지 함수가 각각 변환해주는 문자열의 종류가 각각 다르다.
예를 들어 ~!@#$%^&*(){}[]=:/,;?+\'"\\ 란 문자열을 각각 변환하면
escape(): %7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C
encodeURI(): ~!@#$%25%5E&*()%7B%7D%5B%5D=:/,;?+'%22%5C
encodeURIComponent(): ~!%40%23%24%25%5E%26*()%7B%7D%5B%5D%3D%3A%2F%2C%3B%3F%2B'%22%5C
이렇게 변환 된다.

즉, 정리하자면.
escape() 는 @*/+
encodeURI() 는 ~!@#$&*()=:/,;?+'
encodeURIComponent() 는 ~!*()'
를 변환해 주지 않는다.

다음은 URL Escape Code 정리

URL Escape Code



¹ RFC : Request for Comments, RFC는 새로운 연구, 발명이나 인터넷 기술에 적용되는 방법들을 써놓은 문서들을 일련번호를 매겨 배포한다. 위키피디아. RFC. RFC 1738.

² MSDN : Microsoft Developer Network, The portion of Microsoft responsible for managing the firm's relationship with developers. 위키피디아. MSDN.

링크 : MSDN JScript Reference - escape(), encodeURI(), encodeURIComponent()

출처 : URL Encoding, xkr.us / javascript, HTML Coded Character Set, URL Escape Code
2008/04/10 08:11 2008/04/10 08:11
TAG , , , , , , , , , , , , ,
2 Trackback No comments.

PHP + Mysql 이용한 카운터/리퍼러 로그 만들기

**Web Programming 2008/03/13 18:05 by 5hoon
PHP 와 Mysql 을 사용하여 Counter 나 Referral 로그를 만드는 방법임니다..

본문을 설명하기에 앞서..
Referral 이 뭔지 물으시는 분들이 많기에..

Referral 이란



우선 만들기를 위해서는 두 단계가 필요합니다.
PHP 코드를 만드는 단계와
MySql 에 테이블을 셋업 하는 단계로 나누어 집니다.

리퍼러 기록을 만드는 법부터 살펴 보겠습니다.

리퍼러 보기


Counter 도 비슷한 방법으로 사용이 가능합니다.

카운터 보기


부록..

저장한 데이타 보기


반나절 삽질한 결과물 입니다...
2008/03/13 18:05 2008/03/13 18:05
TAG , , , , , , ,
No trackbacks 1 Comment

htaccess 작성/설정하기

**Web Programming 2008/03/03 13:00 by 5hoon
1. htaccess 를 이용한 디렉토리/페이지에 인증 비밀번호 걸기

more..



2. htaccess 를 이용한 에러 페이지.

more..


3. 외부링크 차단하기

more..


4. 특정 ip 차단하기

more..


5. 서브 도메인 설정하기.

more..


6. 디렉토리내 파일 목록보기.

more..



2008/03/03 13:00 2008/03/03 13:00
TAG , , , , , ,
1 Trackback 4 Comment
1 
BLOG main image
My Story, My Life
내가 사는 이야기
by 5hoon

공지사항

링크

| 방명록 | 블로그 |

카테고리

전체 (107)
**My Life (39)
**Mathematics (14)
**Multimedia (42)
**Programming (4)
**Web Programming (8)

달력

«   2012/05   »
일 월 화 수 목 금 토
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

링크

textcubeDesignMyselfget rss
5hoon's Blog is powered by Tattertools / Designed by qwer999 from DesignMyself.net
background image from uvavu