고독한 방랑 모험가 리느린트

작업표시줄 순서 변경하기 Taskbar Shuffle

리느린트 — Fri, 21 Nov 2008 12:47:43 +0900

작업표시줄 버튼을 항상 일정 순서로 늘어놓는데,
아웃룩 - 네이트온 쪽지함 - 윈도우 탐색기 1, 2, 3 - 포토샵 - 에디트플러스 - 브라우저의 순이다.
컴퓨터를 켜면 항상 차례대로 프로그램을 실행시키며, 특정 프로그램이 오류가 떠서 닫히거나 실수로 닫아버린경우엔...
모든 프로그램을 다 닫아버리고 저 순서대로 실행시킨다-ㅅ -

그런데 요새들어 하나은행 보안 때문에 네이트온이 로그아웃되면서 쪽지함이 멋대로 닫혀버리는 사태가 자꾸만 벌어졌다 ㅠ_ ㅠ
네이트온은 앞에서 2번째라... 네이트온 다시 로그인하고 쪽지함 열고 윈도우 탐색기부터 전부 닫고 차례대로 열고... 하는일이 매우 불편해서 상태표시줄 버튼 순서를 바꿀 수 있는 방법을 찾게 되었다.

Taskbar Shuffle이란 프로그램 ㅇㅁ ㅇ
이제는 네이트온이 멋대로 로그아웃 되더라도 걱정없다/ㅅ /♡

Taskbar Shuffle 프로그램에 대한 설명과 다운로드 링크가 있는 블로그
작업표시줄의 순서를 내맘대로 바꾸자 - Taskbar Shuffle 2.2

브라우저별 맑은고딕체 스크린샷

리느린트 — Thu, 20 Nov 2008 11:12:49 +0900

IE7

FireFox3

Chrome

Netscape

Opera

Safari

IE7을 설치하면서 cleartype을 활성화 한 것 이외에 아무런 설정도 하지 않은 내 컴퓨터에서 찍은 스크린샷.
IE 이외의 브라우저에서는 마치 먹지를 대고 글씨를 쓴 듯한 모양새로, 사이트 전체가 맑은고딕체로 되어있으면 꽤나 눈이 아플 정도 ... ㅠ _ㅠ

클리어타입 튜닝 프로그램으로 이 현상을 해결할 수는 있지만 일반 사용자들 중에 이런 해결 방법이 있다는 사실을 과연 몇명이나 알고 있을까.

클리어타입 튜너 프로그램을 소개하고 있는 블로그
맑은 고딕 가독성이 떨어진다고 느낀다면

d'strict 홈페이지 리뉴얼 오픈

리느린트 — Wed, 19 Nov 2008 22:39:19 +0900

http://www.dstrict.com

파견나와 있는 바람에 오픈 소식을 늦게 들어버렸다.
소스보기를 해보니... 열심히 야근하면서 코딩해둔 페이지들이 적용되긴 했구나 @ _@
초반에 몇페이지 작업하다가 파견나와 버렸는데, 뒷수습은 누가 했는지 알수가 없다.

으으... 까망 바탕에 빨강 포인트에 영어야 ㅠ _ㅠ
완전히 상징적이기만 했던 이전 사이트보다는 정보를 많이 담고 있긴 하지만,
쉽고 편하게 알아볼 수가 없다는게 아쉬운점.

Flash위에 Layer 요소 올리기

리느린트 — Wed, 19 Nov 2008 22:23:37 +0900

Flash 삽입 Tag에 아래 내용을 추가하면 absolute로 문제없이 Layer를 구현할 수 있다.

Tab Menu(탭 메뉴)

리느린트 — Tue, 21 Oct 2008 10:41:14 +0900

탭메뉴.zip

FAQ간단.html

간단하게 하려다 점점 복잡하게 되버린 탭 메뉴, 텍스트랑 이미지버전.

다음 위젯뱅크 불편해-ㅂ -

리느린트 — Mon, 22 Sep 2008 13:04:13 +0900

위젯뱅크에서 클릭만으로 간편하게 티스토리에 포춘쿠키를 달은것 까진 좋았는데.

-ㅂ - 위젯 한가운데 마우스를 올리면 퍼가기 버튼이 뜨는거, 조금이 아니라 아주 많이 매우 불편하다.
지능적이고 정교한 손놀림으로 퍼가기 버튼을 피해서 클릭하는 사람이 아니라면 (이렇게 할사람이 누가있어 - -)
이건 포춘 쪽지를 열라는건지 퍼가기 기능만 있는건지 알수가 없다.

http://widgetbank.daum.net/

구글 크롬 정말 빨라!

리느린트 — Wed, 03 Sep 2008 11:36:42 +0900

http://www.google.com/chrome/index.html?hl=ko&brand=CHMG&utm_source=ko-hpp&utm_medium=hpp&utm_campaign=ko

설치해서 사용해보고 있는데, 인터넷 회선 속도가 회춘한줄 알았네-ㅂ -
진짜 빠르다~!!!

이메일 코딩 테스트

리느린트 — Tue, 02 Sep 2008 23:03:08 +0900

하나은행 이메일 템플릿과 관련해서 간단하게 테스트를 했다.
이메일 발송은 아웃룩 익스프레스의 편지지 기능을 사용했고,
네이버, 다음, 파란, 네이트, MS아웃룩2007 계정으로 발송하였다.

미처 생각해 내지 못한 요소들이 있을거라 생각되는 간단한 테스트인데도 불구하고
이미 몇몇 요소에서 어려운 점들을 찾아 낼 수 있다.

	네이버	한메일	네이트	파란	아웃룩2007
외부 css	x	x	x	x	o
head css	x	o	o	o	o
inline css	o	o	o	o	o
padding(div에 inline으로)	o	o	o	o	x
padding(table에 inline으로)	o	o	o	o	△
line-height	o	o	o	o	글자가 겹치도록 좁게는 안되고, 매우 넓게는 됨
width	o	o	o	o	table은 가능
height	o	o	o	o	table은 가능
overflow	o	o	o	o	x
float	o	o	o	o	x
absolute	x	o	o	o	x
relative	o	o	o	o	x
background	o	o	x	o	x
image map	o	o	o	o	o
text-align	o	o	o	o	o

아웃룩은 width, height 속성이 div태그에서 전혀 먹히질 않았다.
진아언니가 아웃룩에서 div가 제대로 안된다고 했던 말이 이런거였나보다-ㅂ -!

이메일은 그냥 통이미지를 가로로 동강내서 붙이는게 짱인거 같아.

window.open 옵션

리느린트 — Wed, 20 Aug 2008 13:28:28 +0900

window.open('url,'name','feature');
window.open('http://www.naver.com','naver','width=400,height=500,location=yes');

옵션 목록

※ 기본값은 yes이다.
하지만 한개라도 속성을 적용할 경우, 그 속성을 제외한 나머지 속성은 기본값이 모두 no가 된다.
※ no=0, yes=1과 같다.

height : 높이
width : 너비
top : 상단에서의 거리
left : 좌측에서의 거리
resizable : 창크기 조절
scrollbars : 스크롤 바
menubar : 상단 메뉴
toolbar : 상단 툴바
location : 주소 입력창
directories : 연결
status : 하단 상태바
fullscreen : 전체 화면

※ 팝업창 닫기 스크립트

window.close();

Java 설치하기

리느린트 — Wed, 20 Aug 2008 13:00:56 +0900

자바2 스탠다드 에디션 SDK 설치하기(1.3 이상 버전)
http://java.sun.com/javase/downloads/previous.jsp
에디트 플러시스템-고급-환경변수에 추가하기
1. Path에 자바 bin 폴더 추가
2. classpath 새로 등록 (.;)

스샷과 함께 자세한 설명이 있는 블로그
http://mayu.tistory.com/15

클릭하면 하얗게 사라져 안보이는 페이지

리느린트 — Mon, 21 Jul 2008 14:04:50 +0900

이전에 진행했던 프로젝트중...
html만으로는 너무나도 멀쩡했던 페이지가 개발에 넘겨진 뒤
팝업창 띄우는 자바스크립트가 삽입된 링크를 클릭 하는 순간!
position: relative 를 먹인 요소를 제외하고는 전부 사라져버려 하얀 도화지처럼 되어버렸다-ㅂ -

IE7에서만!!! IE6도 아니고!!!
@#)!@!%*)@)!^34112#%)!@(%#_!%(_#!@%#^!!

z-index나 position: relative, display: block, display: inline, width 등을 사용해봐도 마찬가지였는데,
전체를 감싸는 div에

#wrap {height: 1%;}

로 해결..했지만, 뭐가 문제였던거지;ㅂ ;

자바스크립트 트리 메뉴

리느린트 — Tue, 10 Jun 2008 14:47:10 +0900

tree8.zip

좀 더 추가적인 기능을 해보고싶은데 잘 안된다 ㅠ_ ㅠ
더더 열심히 해야지~

1. 마음에 드는 이미지로 간단한 엠블렘 만들기

리느린트 — Mon, 02 Jun 2008 10:40:35 +0900

★ 라게 재오픈 축하합니다 ★

(1) 이미지 고르기

엠블렘으로 제작하고 싶은 그림파일을 고르세요.
되도록 작고 깨끗하면서도 선명한 이미지가 엠블렘으로 만들기에 좋아요.

저는 네이버 월페이퍼에서 마음에 드는 그림을 골랐어요.
<그림1>이라고 정하고 설명할께요.

<그림1>

(2) 그림파일 열기

포토샵에서 File-Open 메뉴를 이용하여 엠블렘으로 만들 그림파일 <그림1>을 엽니다.

(3) 엠블렘 크기
라그나로크의 엠블렘 크기는 24*24 pixels입니다. 그 크기는 이정도예요.
<그림1>은 엠블렘 크기에 비해 너무 크죠?
그래서 <그림1>을 이 네모안에 알맞은 크기의 그림으로 만들어 보겠습니다.

(3) 이미지 자르기

빨간 네모안의 이 툴을 선택하면 마우스 포인터가 이렇게 변합니다.
이때부터 그림의 일정부분을 영역으로 만들 수가 있어요.
바로 이렇게...

점선이 보이시죠? 툴을 선택하여 마우스 포인터가 이렇게 된상태에서 빨간 화살표 방향대로 끌어당기면 영역이 선택된답니다.

라그나로크 엠블렘은 크기가 24*24pixels(이하 픽셀)로 정사각형 모양이지요.
선택을 정사각형으로 하기 위해서는 빨간 화살표 방향대로 끌어당길때 Shift키를 누르면서
끌어당겨 줍니다.

영역이 선택된 상태에서 상단메뉴의 image - crop 을 실행하면 선택한 많큼만 이미지가 남게 됩니다.

그리고나서 상단메뉴의 Image - Images Size 메뉴를 이용해 너비 24 높이 24의 이미지로 줄여주면 되죠.

이렇게 된답니다.
예쁜 하트모양 엠블렘이 되었네요^ _^

(4) 테두리 넣기

위에서 본대로 만들어진 그림도 충분히 엠블렘이 될 수가 있어요.
그런데 뭔가 허전하네요.
테두리를 넣으면 좀더 깔끔하게 될 것 같아요!

일단 테두리로 쓸 색깔을 정합니다.

빨간 네모안의 네모를 선택하면 아래와 같은 화면이 생깁니다.
컬러피커 창이라고 부릅니다.

엠블렘 이미지와 비슷한 톤의 색깔이면 잘 어울리겠죠?
그래서 전 이 색깔을 선택했어요 ■ (#514E45)
OK를 누르고 그림으로 돌아옵니다.

Ctrl+A를 눌러주면 그림화일의 전체가 선택영역으로 선택되어집니다.

이상태에서 상단메뉴의 Edit - Stoke 메뉴를 선택하면 Width를 정할수가있어요.

테두리의 두께를 정하는거랍니다.
엠블렘은 이미지가 작은 편이기 때문에 1~2정도가 알맞습니다.
1로 정하고 OK를 눌러보세요!

이런 이미지가 되었어요.
깔끔한 엠블렘이 되었죠?

포토샵CS3를 이용한 엠블렘 만들기

리느린트 — Mon, 02 Jun 2008 09:58:36 +0900

이 가이드는 포토샵CS3을 기준으로 만들어졌기 때문에
포토샵의 다른 버전과 맞지않는 부분이 있을수도 있습니다 ㅇㅅㅇ!

1. 마음에 드는 이미지로 간단한 엠블렘 만들기
2. 배경색이 투명한 엠블렘 만들기(준비중)
3. 도트 이미지를 응용하여 엠블렘 만들기
4. 텍스트로 꾸민 엠블렘 만들기(준비중)
5. 저장하기(준비중)

Moving Box Green 스킨 가운데 정렬하기

리느린트 — Fri, 16 May 2008 10:11:21 +0900

style.css

수정할게 너무 여러개여서 css 첨부하였습니다!

관리자모드의 스킨 - 직접올리기 - 파일업로드에서 위 파일을 업로드하면 됩니다.

position: relative의 역할 및 현상

리느린트 — Tue, 06 May 2008 14:57:22 +0900

요소의 위치 변경

left, right, top, bottom과 함께 사용하여 해당 요소의 위치를 변경할 수 있다.

absolute를 reset

absolute는 Browser를 기준으로 top, left의 위치가 잡히는것이 기본이지만 position: relative를 사용한 부모 요소가 있을경우 이것을 기준으로 한다.

z-index를 reset

position: relative를 가진 요소가 다른 z-index를 가진 요소보다 높은 z-index를 가지면 이 요소의 자식요소들은 다른 높은 z-index요소들보다 위쪽에 표시된다.

position: static인 요소에 z-index를 주고 싶을 때

요소들의 기본 position은 static인데, z-index는 relative와 absolute에서만 쓸 수 있기 때문에 상하관계를 위해서 z-index를 부여하고 싶은 경우 사용한다.

특정 상황의 해결책

반투명 png위에 올려진 그림이 Click되지 않는 경우 Click되게 만들때

-margin으로 겹쳐있는 요소에 주는 영향

예제1 : inline 요소

body {padding: 0 0 0 500px;}
span {margin: 0 -20px 0 0;}
span.div1 {background: red;}
span.div2 {background: blue;}
span.div3 {background: green;}

<span class="div1">123456789</span>
<span class="div2">123456789</span>
<span class="div3">123456789</span>

인라인 요소가 마이너스 마진으로 겹쳐있는 경우

겹쳐진 부분의 글자가 겹치거나 짤리거나 하는 현상을 보이는데, 이때 한 요소에 position: relative를 주게되면

body {padding: 0 0 0 500px;}
span {margin: 0 -20px 0 0;}
span.div1 {background: red;}
span.div2 {background: blue; position: relative;}
span.div3 {background: green;}

<span class="div1">123456789</span>
<span class="div2">123456789</span>
<span class="div3">123456789</span>

겹치지 않고 자신의 영역을 확보해 버리거나 하는 경향이 있는 것 같다.

예제1 : float된 block 요소

body {padding: 150px;}
div {float: left; width: 100px; height: 40px; margin: 0 0 0 -50px;}
div.div1 {background: red;}
div.div2 {background: blue;}
div.div3 {background: green;}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

한개의 블록요소에 position: relative를 주면

body {padding: 150px;}
div {float: left; width: 100px; height: 40px; margin: 0 0 0 -50px;}
div.div1 {background: red;}
div.div2 {background: blue; position: relative;}
div.div3 {background: green;}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

마치 z-index를 준 것 처럼 가장 상위에 위치해 버린다.

jun : 글쎄요 -_- 아마도 float때문에 흐트러진게 아닌가 싶은데요
리느린트 : float이요!?
jun :
우선은 position을 쓰며 없던 z-index가 생겨서 아무것도 없는 애보다는 위로 가요
거기서 float을 하면 애들이 좀 겹치는데 그중에서 위로 올라온게 아닌가 싶어요
이런식으로 사용하면 브라우저마다 좀 틀려서 제대로 사용하긴 힘들껄요

dom 메소드로 table 작성시 유의점

리느린트 — Tue, 29 Apr 2008 09:23:38 +0900

ceateElement를 사용하여 <tr>을 생성할때에는
<tr>이 <thead>, <tbody>, <tfoot> 중의 부모를 반드시 가져야한다.
즉, <table>태그 바로 밑에 <tr>을 사용하였을경우, 화면에 내용이 표기되지 않는다.
insertRow를 사용할때에는 상관이 없다.

브라우저별 childNodes 갯수

리느린트 — Fri, 25 Apr 2008 00:35:12 +0900

※ 디스트릭트 홀딩스 WP팀의 DOM script 스터디 과제였습니다.

익스플로러 6

# 이 소스의 body 자식 노드 갯수 : 2개
body 아래 가장 상위의 블록 엘리먼트만 자식노드로 취급하는 듯…

오페라

# 이 소스의 body 자식노드 갯수 : 7개

오페라, 첫번째 자식 엘리먼트의 줄바꿈도 노드로 인식 예제

# 이 소스의 body 자식노드 갯수 :4개

# 이 소스의 body 자식노드 갯수 :5개

# 이 소스의 body 자식노드 갯수 :5개

# 이 소스의 body 자식노드 갯수 :5개

# 이 소스의 body 자식노드 갯수 6개

# 이 소스의 body 자식노드 갯수7개

파이어폭스

# 이 소스의 body 자식노드 갯수5

ol 엘리먼트 start 속성

리느린트 — Fri, 18 Apr 2008 16:24:24 +0900

라고 작성하면 숫자가 1이 아닌 start속성에 넣어준 값으로 시작한다.
패딩값과 숫자표시를 알아보기 위해 li를 10000개 복사해서 붙여넣었던 추억이 생각나는구만 ㅠㅠ

나만의 코딩 default 파일

리느린트 — Fri, 18 Apr 2008 16:09:07 +0900

mylibrary3.zip

유미는 집에서 공부해요~!

리느린트 — Fri, 21 Mar 2008 14:20:01 +0900

진아가 디스트릭트에 입사했을때, 정말 범상치않은 포스를 풍겼다...
일도 없는데 애가 공부하느라고 집엘 안가는거야;ㅁ ;!!!
밤 8시 9시까지 남아서 공부를 하다가 집에 들어가는 것이었다 후덜덜...
바로 한달전에 입사했던 나는 매일 같이 칼퇴근하는 즐거운 생활을 누렸는데 [...ㅋㅋㅋ]

열심히 공부하는 진아를 좋게 본 이사님이 지영언니에게
'진아가 남아서 참 공부를 열심히 하네~'
같은 말을 했나보다.
그때 지영언니는 이렇게 말했다고 한다...
'유미도 집에가서 공부해요~'
덜덜... 물론 틀린 말은 아니었지만...
타인이 보기엔 왠지 유미 감싸주기같은 변명같은 한마디;ㅁ ;

요새 일이 없어서 (난 왜 일복이 없는거지... 일하고 싶은데 일일일-ㅂ -) 매일같이 공부하다 보니 문득 그때 그일이 떠올랐다.

Editplus 자동완성

리느린트 — Thu, 13 Mar 2008 11:53:38 +0900

예를들어, div + 스페이스바 를 입력하면, <div></div> 태그가 자동으로 생성되는 기능을 설정하는 에디트플러스용 파일.
빠르고 편리하긴 하지만... 쓰다보면 중독이 되는거같다ㅠ_ ㅠ
아는분께선 홈사이트에서도 비슷한 기능을 썼었지만, 스스로가 게을러지는것 같아서 요샌 날코딩 하신다고 한다.

프로그램의 플러그인을 통하여 요령껏 빠른 코딩하는 것이 좋을지, 날코딩으로 스스로의 실력과 타자속도를 높이는것이 좋을지 생각을 해보았지만 둘다 장단점이 있는 것 같아 병용하는게 어떨까 생각했다.
시간의 초를 다투는 급한 프로젝트에서는 자동완성 기능을, 그리고 시간이 여유로울땐 날코딩을^ -^

에디트플러스 - 도구 - 기본설정 - 파일 - 설정및 구문강조에,
파일종류를 HTML로 선택하여 자동완성 부분 오른쪽의 [...] 을 눌러 파일의 경로를 설정해준다.
CSS도 마찬가지로 파일종류를 CSS로 선택하여 경로를 설정해준다.

css charset

리느린트 — Wed, 12 Mar 2008 09:58:21 +0900

@charset "utf-8";

접속할때마다 랜덤하게 이미지 보이기

리느린트 — Wed, 20 Feb 2008 10:34:05 +0900

random_img.zip

링크 영역이 잡히는 것에 대한 고민

리느린트 — Thu, 14 Feb 2008 11:10:23 +0900

처음엔 책에서 배운대로.. a링크를 block 시키고 배경에 이미지를 까는 방법을 써보고 싶어서 링크가 이렇게 잡혔었다.
(해보고 싶다는 이유만으로 왜그렇게 했던거지 나는...)
그러자 바로 팀장님의 조언!!
"링크가 왜 이렇게 잡혀요;ㅂ ;!!"
(지영팀장님은.. 아리아 컴퍼니의 아리시아씨 같은 사람;;)

그래서 다시 이렇게 변경;ㅂ ;
이건 단순히 나의 호기심이 불러일으킨 사건이었지만..

의미있는 마크업을 위해서 링크영역을 희생해야 하는 일이 발생하기도 하는것 같다.
예를들면 text-indent:-9999px 같은 이미지대치 기법 같은거..
파폭에선 왼쪽 끝까지 영역이 잡힌다^ ^;;

링크의 영역은 어떤의미에서 어떤역할을 하고 어떤 부분이 중요한걸까..?

ol 태그 숫자표시 테스트

리느린트 — Fri, 01 Feb 2008 11:21:13 +0900

ㅋㅋㅋㅋ LIMA냥과 함께한 녹아다 테스트 ㅋㅋㅋ
ol 태그를 쓰면 ul과 불릿 왼쪽 여백이 틀려보인다.

리스트1
리스트2
리스트3

리스트1
리스트2
리스트3

이런 현상에서 나온 발상인데 ~ㅋㅋㅋ

별다른 스타일을 주지 않았을때에 ol 태그의 숫자는 4자리수 즉, 9999가 넘으면 글자가 짤린다 ㅋㅋㅋㅋ
10000의 경우 0000, 10001의 경우 0001 ㅋㅋㅋㅋㅋ

새로고침 해야만 잘보이는 현상

리느린트 — Wed, 05 Dec 2007 22:27:46 +0900

박스 가로길이, 배경그림 등이 깨져 보이다가
새로고침이나 화면이동, 탭이동 등의 동작후엔 정상적으로 보이는 현상은
문제가 되는 박스의 width값이 정해져 있지 않은 경우에 나타날 수 있다.
잘못 코딩한 것은 아니지만 익스플로러에서 최초 접속시 이상하게 보일 수 있으므로 다음과 같이 해결!

문제가 되는 박스의 width값을 px단위로 지정

자바스크립트로 z-index 조절하기

리느린트 — Mon, 03 Dec 2007 11:50:19 +0900

zindex.html

common.js

리느린트 — Mon, 03 Dec 2007 11:23:43 +0900

common.js

flicker현상 없애기
setPng24 (ie6에서 png 반투명 처리 스크립트)
addLoadEvent
getElementsByClassName
insertAfter
addClass (클래스 전체를 바꾸지않고 추가만 하기)
displayLayer (레이어 팝업 열고 닫기)
popLink (팝업창에서 부모창으로 링크열기)
folder (내용 열고 접기)
tabDisplayCls, tabActCls (클래스 치환 탭메뉴)
tabDisplayImg, tabActImg (이미지 치환 탭메뉴)

IE6에서 textarea에 글쓰면 상자 가로길이가 늘어나는 버그

리느린트 — Fri, 30 Nov 2007 17:38:30 +0900

overflow:auto를 삭제한다.
textarea의 width값을 px단위로 고정시킨다.