웹미니 - 블로그: 팁공유

레이블이 팁공유인 게시물을 표시합니다. 모든 게시물 표시

2009년 6월 18일 목요일

[텍스트큐브]텍스트큐브닷컴 초대장 배포합니다.

웹미니에서 3번째 발송하는 초대장입니다.

나날이 발전하고 있는 텍스트큐브(http://www.textcube.com/) 입니다.
블로그를 이전할 마음이 있거나, 새롭게 블로그를 만드실분들은 마구마구 초대장 신청해주세요.

총 4장입니다.

댓글에 초대장 받으실 이메일만 남겨주세요.^^ (이메일은 텍스트큐브의 아이디가 됩니다.)

감사합니다.

2009년 4월 30일 목요일

[텍스트큐브]텍스트큐브 초대장을 배포합니다.

웹미니에서 두번째로 배포하는 초대장이네요..

텍스트 큐브에서는 6차 초대장이 되겠습니다.

초대장은 3장만 배포하며, 받으실 이메일 주소를 댓글로 남겨주세요.

감사합니다.

2009년 4월 15일 수요일

[CSS]크로스브라우징 input 박스

input 박스에는 여러가지가 있습니다. (라디오,체크박스,텍스트박스등)

여기에서 라디오 박스와 체크박스는 IE와 타브라우저에서 외곽여백의 차이가 있습니다.

이런경우를 잘모르는 웹디자이너 같은 경우 무조건 자기디자인 데로 해달라고 요구하곤하죠.. 그것도 익스에만 맞춰달라면서...참피곤한 경우죠. 물론 디자이너 입장에서는 그게 정답이고, 퍼블리셔 입장에서 맞춰주는것도 해야할일중에 하나일수는 있습니다. 그래서 협업이 중요한거 같습니다.

여튼 이럴때 해결방법입니다.

먼저 소스를 살펴보겠습니다.

위와 같은 소스를 출력하면 다음과 같습니다.

익스와 파폭,사파리는 기본적으로 4px 이라는 외곽여백이 존재하며, 오페라는 3px 여백이 있었습니다.

세로여백은 top 라인에서 익스는 2px, 파폭과 사파리는 3px, 오페라는 0px 여백이 있었습니다. (여기서 사파리는 버전이 4입니다.)

그럼 여백을 초기화 해보기로 합시다.

여기에서 초기화 방법도 여러가지겠지만, 저는 테스트로 * 를 사용했습니다.

body, table, div, input {margin:0; padding:0;} 이런식으로 해줘도 됩니다. 어떤방법이던간에 중요한건 input 에 여백을 0 으로 만드는겁니다.

익스를 제외하고 타브라우저에서는 여백이 줄어든걸 볼수있습니다. (역시 익스는 끄덕없습니다. 어쩔~ -.-)

input 에 여백을 주지 않을경우는 많은 차이가 없었지만, 여백을 0 으로 하니 브라우저마다 보여지는 차이가 커졌습니다.

그럼 이걸 어떻게 맞출까? 방법은 여러가지 겠지만 class 로 input 에 직접 적용해보겠습니다. (물론 여백은 0 으로 했을때 입니다.)

가로 여백(1px) 은 익스와, 파폭, 사파리가 동일하고, 오페라는 2px 벌어졌습니다. 그리고 세로 여백은 사파리를 제외하고 모두 동일해졌습니다.
너무 붙어있는거 같으니, 조금 여백을 주도록하겠습니다.

.input_m {width:13px; height:13px; margin-right:4px; vertical-align:middle;}

사파리에서 약간의 차이가 있긴하네요. 이래서 핵이 필요한가 봅니다. -.-

위처럼 했는데도 디자이너가 모든브라우저에서 확인후 "어 사파리에서 텍스트가 조금 올라겠네요?" 라고 태클을 걸어온다면, 깔끔하게 핵을 써주세요. (체크와 라디오박스에서 핵사용없이 1px 오차도 없게 하는 방법이 있으면 알려주세요.)

다른방법으로는 * {margin:0; padding:0;} 을 준상태에서 익스만 여백이 그대로이기때문에 익스만 margin-right:-4px 로 주는 방법도 있긴합니다. (익스전용 핵을 사용해야겠죠)

어떻게 초기 구조화를 할건지는 제작할 사이트의 특성을 보고 판단하시기 바랍니다. ex) input 전체에 적용할것인가, 아님 class로 뺀후 부분부분만 적용을 할것인가... (차후에 유지보수할때 쉬운쪽으로..)

만족된 결과는 아니지만, 확인해보시고 또 다른 좋은 방법이 있으면 알려주세요.^^; (공유합시다.)

추가 : 위와 같이 할경우 텍스트 필드일경우는 저 class 적용을 안하시면 됩니다. 만약에 전체에 적용을 하셨다면, 텍스트 필드 스타일에 !important 로 우선순위를 먼저 두셔도 되구요^^

2009년 3월 14일 토요일

[제로보드]제로보드 플래닛과 m2day

제로보드(XpressEngine)에서는 planet 이라는 한줄토크형식의 Me2day 와 비슷한 기능을 제공합니다.

역시나 플래닛에서 미투데이로 글을 내보낼수가 있습니다.
먼저 제로보드에서 플래닛을 생성합니다.

생성된 플래닛 상단을 보시면 미투데이의 아이콘이 있습니다.
클릭을 하시면 미투데이 아이디와 키를 넣는 부분이 있습니다. 그곳에 자신의 두가지 정보를 입력하면 됩니다.

me2day 에 접속후 자신의 미투데이 환경설정에 보시면 해당 정보를 알수있습니다.

미투데이 주소는 예를 들어 http://me2day.net/webmini 라 하면 아이디쪽에 webmini 만 넣으시면 됩니다.
그럼 모든 설정이 끝났습니다. 글을 한번 남겨보도록 하겠습니다.

글을 쓰실때 미투데이 체크를 하고 글을 올리시면 됩니다.

플래닛에 글이 등록되고, 미투데이에 글이 옮겨진걸 알수있습니다.

XpressEngine 에서 또 어떤기능들이 제공될지 기대가 됩니다. XE 개발자분들 화이팅입니다.

2009년 2월 16일 월요일

[CSS]IE6 스타핵으로 png 배경으로 적용시 링크가 안먹힐때

png 를 배경으로 할경우 익스6에서는 png를 지원하지 않기에 스타핵이나 언더바핵으로 png를 css에서 처리해주었습니다. 하지만 배경위에 텍스트나 이미지에 링크값이 들어갈경우 익스6에서 링크가 안먹히게 됩니다.
이럴경우 해당 링크 즉 png 배경위에 링크 부분에 position:relative; 를 주시면 해결됩니다.
(이미지가 겹치는 부분만 링크가 안먹힙니다.)

ex)

css 소스
* html #png {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png',sizingMethod='crop'); }

<div id="#png"><a href="http://www.webmini.net" style="position:relative;" >웹미니 바로가기</a>

위와 같이 a 태그 안에 style에 position:relative; 를 추가해주시면 됩니다.
물론 class 로 불러와도 되며, 아래와 같이 해당 id 값 a 링크부분에 정의를 해주셔도 됩니다.

#png a {position:relative;}

해당 png 안에 있는 모든 a 태그는 전부 적용이 되는 형식입니다.

익스6이 사라지는 그날까지...

2009년 2월 6일 금요일

[CSS]메일링 코딩 스타일

· 메일링 코딩스타일 적용테스트 (외부스타일 제외)

메일링 코딩을 할때 여러분들은 웹표준에 맞춰 코딩을 하는지요?

메일링은 웹페이지로 볼수 없으며, 구조화를 시킬 필요도 없고, 시킬수도 없다는게 제 개인적인 생각입니다.
그래서 몇가지 테스트를 해보았습니다. 사실 꽤 오래전에 테스트를 한건데 이제서야 공유를 합니다.

css 를 부르는 방법은 크게 3가지로 분류 됩니다, (외부스타일, 내부스타일, 인라인스타일)
여기서 외부스타일은 메일제공 사이트와 class 충돌문제가 발생할수 있어 테스트 항목에서 제외시켰습니다.
총 테스트 방법은 3가지(옛날방식, 인라인방식, 내부스타일) 이며, 자주이용하는 메일 9개만 테스트 해보았습니다.

	옛날방식	인라인스타일	내부스타일	비고
Daum	O	O	O
네이버	O	O	X	이미지를 첨부파일로 인식, 내부스타일 적용안됨
야후	O	O	O
파란	O	O	O	이미지를 첨부파일로 인식
구글(G메일)	O	X	X	스타일 적용안됨
엠파스	O	O	O
네이트	O	X	X	스타일 적용안됨, 이미지를 첨부파일로 인식
코리아닷컴	O	O	O	이미지를 첨부파일로 인식
Outlook Express	O	O	O

● 간단하게 3가지 방식을 설명을 드리자면

- 옛날방식 : 배경이미지나, 폰트사이즈, 컬러등을 css 로 입히는 방식이 아닌 엘리먼트 안에 직접적으로 해당소스를 삽입하는 방법입니다. ex)<td background="http://www.webmini.net/test_bg.gif">
- 인라인스타일 : 배경이나, 폰트사이즈, 컬러등을 해당 엘리먼트 안에 스타일을 주는 방식입니다. ex)<td style="background:url(http://www.webmini.net/test_bg.gif) no-repeat;">
- 내부스타일 : 해당 페이지 안에 style 소스를 선언후 class 로 불러오는 방식입니다. ex) .wrap --> <td class="wrap">

테스트 결과 네이버, 구글, 네이트는 내부스타일과 인라인스타일이 적용 되지 않았습니다.
스타일이 적용되지 않는 이유는 스타일 충돌이 생겨 메일사이트가 깨지는 경우를 대비해서 해당사이트에서 차단한듯 보여집니다.
위에서도 알수 있듯이 공통적으로 동일하게 보여지게 하기 위해선 옛날방식 (table 방식) 으로 진행이 되어야 하며, 스타일 적용이 되지 않는 곳이 있기에 div 방식은 피하는것이 좋을듯 보여집니다.

[웹표준]믹시의 추적버튼에서 &(엔퍼센트) 에러

Markup Validation Service 에서 유효성 검사를 해보면 &(엔퍼센트)로 된부분은 전부 에러로 잡아냅니다.
파이어폭스 부가기능중에 'html validator' 로 확인해도 에러로 잡아내며, 다음과 같이 사용하라고 알려줍니다.

&

여러 사이트를 보면 & 로 되어있는데, 제가 개발자가 아니라서 & 의 사용용도는 정확하게 모르겠습니다.
믹시를 예로 들자면 아래와 같이 추적버튼의 링크를 제공해줍니다.

제공해준 이미지경로 주소를 보시면 <img src='http://mixsh.com/widget/mr/but.html?p=haY51hVrovetsWaHO9uTcTVC6QR5J3CTC92G18h0Qa4%3D&t=12' alt='믹시' border='0' />
&(엔퍼센트)가 들어감을 알수 있습니다.
해당소스를 넣고 유효성 검사를 해보면 & 부분은 모두 에러로 잡습니다.

그래서 'html validator' 에서 알려준데로 추적버튼 소스에 & 대신 & 로 수정하고 유효성검사를 해보았습니다.
수정된 소스는 다음과 같습니다.

<img src='http://mixsh.com/widget/mr/but.html?p=haY51hVrovetsWaHO9uTcTVC6QR5J3CTC92G18h0Qa4%3D&t=12' alt='믹시' border='0' />

음.. 결과는 통과했다고 나오네요.
& 를 & 로 바꾸어 사용하는게 맞는거 같긴한데, 개발자분들은 어떻게 생각하시는지요?

2009년 2월 4일 수요일

[CSS]IE6 스타핵에서 띄어쓰기

크로스브라우징을 위해 CSS hack 를 사용할때가 종종 있습니다.

IE6 용으로는 스타핵을 사용합니다. ex)* #footer
어떤사람은 *html 이렇게 붙혀서 사용하고, 또 어떤사람은 * html 이렇게 띄어서 사용합니다.
과연 차이점이 뭘까요?

http://jigsaw.w3.org/css-validator/

위에서 CSS 체크를 해보면 *html 는 error 로 잡고, * html 은 error 로 잡지 않습니다.
하지만, IE6에서 결과값은 같습니다.

'CSS 마스터 전략' 에서는 * html 이렇게 띄어쓰는걸로 나와있습니다.

그렇다면 에러로 안잡는 * html 요게 맞다는 얘기인데..
마찬가지로 IE6 전용 '언더바핵'도 error 로 잡습니다. ex)_margin:10px;
언더바핵보다는 스타핵이 소스가 조금더 길어진다는 부분을 빼고는 스타핵을 사용하는게 더 좋을듯 싶네요.
제일 좋은건 핵을 사용안하는것과 IE6이 세상에 없어지는게 베스트긴 하겠지만요.^^

핵을 사용할때도 정확히 알고 사용해야겠다는 생각이 드는군요..
여러분들은 어떻게 사용하셨나요?

2009년 1월 6일 화요일

[CSS]css로 장난치기

이미지없이 css로 입체적인 박스 만들기, 삼각형 만들기등 여러군데서 응용 한것을 볼수있습니다.

참고글 : http://naradesign.net/wp/2008/10/28/165/

그래서 비슷한 방법으로 재미삼아 만들어봤습니다.

미리보기 :

css.html

테스트 브라우저 : IE6, IE7, Opera, Safari, FF

그닥 실용적이진 않지만, css로도 이런게 가능하구나! 라고 넘어가시면 될듯합니다.

<body>
<div class="box border">
<div class="box_txt">WWW.WEBMINI.NET <p class="color">웹미니</p></div>
</div>
</body>
</html>

[텍스트큐브]따라다니는 탑버튼 만들기

텍스트큐브(제공형)에서 따라다니는 Top 버튼 만드는 방법입니다.

먼저 아래 내용들을 확인해주세요.

1. 텍스트큐브닷컴 블로그 수정하기

2. 텍스트큐브에 로고를 이미지로 바꿔보자!

위와 동일한 방법입니다.

제사이트 오른쪽에 보시면 위와 같은 따라다니는 이미지가 보이실 겁니다. 이걸 적용하는 것입니다.

텍스트큐브 관리자 > 꾸미기 > 위젯에서 html 위젯을 추가합니다.

해당 위젯안에 아래와 같이 기술합니다.

단, 텍스트큐브에서 제공되는 스킨 (Simple Gray, Simple Brown, Simple Black)을 토대로 적용시켰으며, 다른스킨일경우 id 값과 class 명이 다를수 있으니, 다른스킨 사용자들은 해당스킨에 맞는 id와 class명에 동일한 방법으로 적용시키면 됩니다.

#menu {position:relative; z-index:2;}

.area {position:relative; z-index:1;}

.area #floatdiv {
position:absolute;
left:0;
top:0;
padding:10px;
background:#FFFFFF;
border:2px solid #c1d4f5;

}

</style>

간단히 설명을 드리자면, #menu 에 position과 z-index:2 를 주는 이유는 아래와 같이 '더보기' 버튼을 클릭시 해당 레이어가 위로 보이게 하기 위함입니다.

그리고 위로가기 버튼 사이즈나, 박스의 padding 값으로 인해 위치가 조금씩 다를수 있으니, 위치부분은 알맞게 수정해주셔야 합니다.

스타일 적용이 완료되었으면, Top버튼 소스를 위젯에 추가해보겠습니다.

역시나 html 위젯을 추가하신후 사이드바 적당한 곳에 위치시킵니다. 그후 아래소스를 삽입합니다.

소스보기..

<span id="script_source">
<script type="text/javascript">

</script>
</span>
<script type="text/javascript"><!--
function move_upper_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY=0;
}

function move_upper_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY=0;
}

function move_upper_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY=0;
}

function move_center_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY='center';
}

function move_center_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY='center';
}

function move_center_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY='center';
}

function move_lower_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY=455;
}

function move_lower_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY=455;
}

function move_lower_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY=455;
}
//--></script>
</div>

소스출처 : http://www.jtricks.com/javascript/navigation/floating.html

소스를 보시면 Top 기능이외에 좌측,중간,우측,하단등 몇가지 기능이 더 있지만, 현재 텍스트큐브는 스킨편집기능이 되지 않아서 해당소스를 사이드바에만 적용시킬수 밖에 없습니다. 그래서 다른 기능은 주석처리하고 Top 기능만 활성화 시켜논 상태입니다. 차후에 스킨편집기능이 되면, 다르게 마크업후 모든기능을 활성화 시키면 되겠습니다.

위에 붉은 색표시에 이미지는 자신의 계정또는 텍스트큐브에 이미지를 업로드후 해당 이미지주소로 수정하시면 됩니다. 현재는 제사이트에 적용된 이미지로 되어있지만, 혹여나 제가 이미지를 바꾸거나 삭제할경우 괜한 낭패를 당하는 일이 없도록 해주세요.^^;

이상입니다. 모두들 예쁜 블로그 만드세요. 화이팅!

2009년 1월 5일 월요일

[텍스트큐브]텍스트큐브와 스프링노트 연동하기

텍스트큐브와 스프링노트 연동하는 방법입니다.

텍스트큐브닷컴 이하 '텍큐'라고 표시하겠습니다.

먼저 블로그에 있는 글들을 스프링노트로 옮겨보겠습니다.

일단 텍큐의 관리자 > 환경설정 > 글쓰기에서 'BlogAPI를 사용합니다.' 에 체크합니다.

그후 자신의 스프링노트에 관리하기로 들어가서 설정을 해줍니다.

1(1).gif

블로그 탭을 선택후 아래와 같이 자신의 블로그를 추가해줍니다.

XML-RPC 주소는 자동으로 입력이 되며, 사용자 아이디와 비밀번호는 텍큐 사용자 아이디/비번을 입력하시면 됩니다.

연결테스트후 정보를 가져오시면 됩니다.

보시는바와 같이 자신의 블로그에 포스팅했던 글들이 카테고리와 함께 옮겨졌습니다.

그럼 반대로 스프링노트에서 작성한 글을 내블로그로 옮겨보도록 하겠습니다.

블로그로 보낼 글을 선택후 오른쪽 메뉴 > 블로그로 보내기로 클릭

7(1).gif

아래와 같이 원하는 옮기고 싶은 위치를 클릭하시면 됩니다.

이동된 글은 하단에 '이 글은 스프링노트 에서 작성되었습니다.' 라고 표기가 됩니다.

이 글은 스프링노트에서 작성되었습니다.

2008년 12월 18일 목요일

[텍스트큐브]초대장 3장배포합니다.

텍스트큐브닷컴 초대장을 배포합니다.
총 3장이며, 댓글순으로 3명만 드리겠습니다.

댓글에 아래와 같이 남겨주세요.

이메일 :

이메일만 있으면 됩니다.
추가로 하실말 있으시면 써주시면 더좋구요..^^

감사합니다.

===== 초대장이 마감되었습니다. ====

2008년 12월 17일 수요일

[텍스트큐브]텍스트큐브에 로고를 이미지로 바꿔보자!

텍스트큐브 제공형(?)의 블로그 로고를 이미지로 바꾸는 방법입니다.

텍스트 큐브닷컴은 아직 beta 버전이라 스킨편집 기능을 지원하지 않습니다.

그래서 이만 저만 불편한게 아니지요.. 다행이도 html 코드위젯은 지원함으로, 그걸이용하는 방법입니다.

예전에 텍스트큐브닷컴 블로그 수정하기 라는 글을 포스팅한적이 있습니다. 꼭참고 하시길 바랍니다.

텍스트 로고를 이미지로 바꾸는 방법은 다음과 같습니다.

먼저 원하는 로고이미지를 만든후 아무곳(?)이나 업로드합니다. 계정이 있으면 자신의 계정에 올리셔도 됩니다만, 저같은 경우는 아래와 같은 방법을 이용했습니다.

공지사항에 이미지를 업로드후 해당 이미지 주소를 복사하는 방법입니다.

이렇게 업로드된 이미지의 주소를 알기위해 이미지 속성을 확인합니다.

주소는 이런식으로 알아두시면 됩니다.

그런 다음 html 코드위젯에 이미지를 넣도록 하겠습니다.

코드위젯은 관리자 > 꾸미기 > 위젯에 위치해 있습니다.

html 코드위젯을 선택하시고 style을 주시면 됩니다. 예전에 포스팅 했을때도 언급했지만, 스타일의 우선순위는 인라인 > 내부 > 외부 로 인식을 하기때문에 외부보다 먼저인식하는 내부스타일을 이용하는 방법입니다.

소스는 다음과 같습니다.

저같은 경우는 로고를 투명 png 로 저장했기에, 위와 같이 IE6 핵을 사용했습니다. [참고글]

이미지 주소는 처음 알아낸 이미지 경로를 적어주시면 됩니다.

/* 주의 */

1. 로고사이즈(가로,세로)를 꼭 적어주세요.

2. 텍스트를 없애야 하기때문에 text-indent (들여쓰기)를 -99999px 로 주고, 텍스트를 숨깁니다.

3. png가 아닐경우 스타핵을 사용할필요는 없습니다.

4. 스킨마다 class 또는 id 명이 다르니 해당 명을 정확히 입력하셔야 합니다. (여러 방법이 있죠? 소스보기나, 파폭 부가기능을 이용하시면 됩니다.)

응용해 보세요.^^

2008년 12월 2일 화요일

[기타]유마일(Umile)로 아르고폰 동영상 인코딩하기

여러가지 인코딩 프로그램이 있지만, 무료로 제공해주는 '유마일'로 인코딩을 해보겠습니다.
저같은 경우는 아르고폰을 사용하기 때문에 아르고폰에 알맞는 설정을 하겠습니다.

먼저 유마일 프로그램을 다운받습니다. [다운로드]

설치를 마치셨으면, 유마일 프로그램을 실행후 '옵션설정'을 선택합니다.

'변환설정'에서 원하시는 휴대폰 정보가 있으면 선택하시면 됩니다.
아르고폰이 목록에 없는관계로 아래와 같이 '고급변환설정' 을 선택후 설정을 해주면 됩니다.
정답은 없으며, 참고용으로 봐주셨으면 합니다.

위와 같이 '고급변환설정' 을 클릭하면 아래 메뉴들이 활성화 됩니다.
파일포맷은 k3g 로 하시고, 영상크기는 640*384로 해줍니다. 아마 입력을 하셔야 할겁니다.
비트프레임은 500으로 해도 영화를 감상하는데는 불편함이 없었습니다.
마지막으로 '원본비율 유지'를 체크하시고, 적용을 누르시면 됩니다.

인코딩을 할때마다 설정을 해주는 불편함을 해소하고자, 위에 처럼 원하는 이름을 작성후 마찬가지로 옆에있는 '적용'을 누르시면 됩니다.

인코딩한 파일은 '일반설정' 에서 저장경로를 지정해주시면 됩니다.
그외 나머지 설정은 사용자 입맛에 따라서 조절하시면 되겠습니다.

이제 변환을 해보겠습니다. 먼저 '항목추가'를 클릭후 인코딩할 파일을 선택합니다. 물론 자막이 해당폴더안에 같이 있어야겠지요..

그후 '변환'을 살짝 클릭해주시면 됩니다.^^

[윈도우]윈도우 단축키 모음

윈도우 단축키 정리

바탕화면, 윈도우탐색기, 내 컴퓨터에서 실행가능한 단축키

F1		도움말실행
F2		선택한 항목의 이름을 변경할 수 있습니다. 바꿀 항목을 선택한 후에 이름부분을 한번 클릭하여도 바꿀 수 있습니다.
F3 (=Ctrl + F)		어느 곳에 서든지 이버튼을 누르면 파일찾기가 실행됩니다.
F5		해당 창을 최신정보로 고쳐서 보여줍니다. 폴더나 파일을 다시 정렬할 때 이용하면 됩니다.
Ctrl + A		해당 창 내의 모든 폴더와 파일을 선택합니다. 다른 곳으로 복사하거나 이동할 때 이용하면 됩니다.
Ctrl + Z		실행 취소 키로서 파일의 이동, 이름의 변경등을 이전상태로 복구할 수 있습니다. 이 키는 대부분의 문서편집 프로그램에서도 쓸 수 있습니다.
Ctrl + 파일끌기		파일을 복사하는 단축키입니다. 같은 드라이브 내에서 파일을 마우스로 끌면 기본적으로 이동이 돼지만, 이키를 이용하면 자동적으로 복사가 됩니다.
Alt + Enter		해당항목의 등록정보를 보여줍니다. 마우스 오른쪽 버튼을 누르면 나오는 메뉴 중에 가장 밑에 있는 항목과 같은 것으로써 마우스 오른쪽버튼을 이용해서 하는 것보다 훨씬 편할 것입니다.
Alt + F4		윈도우탐색기나 내컴퓨터를 빨리 닫을 수 있으며, 바탕화면에서 실행하면 윈도우 종료박스가 나옵니다. 이 키는 윈도우상에서 실행되는 많은 프로그램들이 따르므로 여러 프로그램에서 쓸 수 있을 것입니다.
Alt + Tab		바로 이전에 사용했던 창으로 전환할 수 있는 키로서 프로그램창이 여러개 떠있어서 특정 프로그램을 찾기가 곤란할 때 쓰면 편리합니다.
Shift + F10		원하는 항목에서 마우스 오른쪽 버튼을 누른 것과 같은 기능입니다.
Shift + Del		항목을 휴지통에 버리지 않고 바로 삭제합니다. 복구가 불가능하므로 사용할 때 주의해야 합니다.
Ctrl + Shift + 파일끌기		항목을 마우스 오른쪽 버튼을 누르고 이동한 것과 같은 키입니다.
어 디 서 나 실 행 가 능	윈도우키 + D	바탕화면 빨리 보기. 윈도우 키는 윈도우95/98전용키에만 들어있는데, Ctrl키와 Alt키중간에 있는 키입니다. 윈도우로고 비슷한 그림이 새겨져 있습니다.
	윈도우키 + M	바탕화면 빨리 보기(2). 이것은 위의 단축키와 매우 유사합니다만, <윈도우키+D>는 실행할 때 최소화된 프로그램을 다시 원상태로 하려면 다시 <윈도우키+D>를 누르면 돼지만 이 키를 실행했다가 최소화된 프로그램을 다시 원상태로 하려면 <윈도우키+Shift+M>을 눌러야 합니다. Shift키를 더 눌러야 하는 것입니다.
	윈도우키 + E	탐색기 실행. 말 그대로 탐색기를 실행하는 키입니다.
	윈도우키 + F1	윈도우 도움말을 실행합니다. 윈도우 내에서 응용프로그램을 실행하다가 도움말을 보려고 F1을 누르면 실행 중인 프로그램의 도움말이 실행되지만 이키는 어디서나 윈도우도움말을 볼 수 있게 해줍니다.
	윈도우키 + Pause	시스템 등록 정보 빨리 보기. 장치관리자 등 시스템에 관한 설정을 해주는 곳입니다.. 이는 바탕화면의 내컴퓨터에서 등록정보('Alt+Enter'사용 가능)를 하여도 볼 수 있습니다.
	윈도우키 +Tab	작업 표시줄에 있는 현재 실행 중인 프로그램을 선택할 수 있습니다. 이 키를 누르면 작업 표시줄의 각 항목이 반전되는데, 이동하고 싶은 항목에서 Enter키를 눌러주면 쉽게 이동할 수 있습니다.. 이와 비슷하게 Alt+Tab이 있는데, 이보다 약간 편리한 키입니다.
	윈도우키 + F	'파일찾기'항목 실행. 파일찾기 항목을 실행합니다. F3과 같은 기능입니다.
	윈도우키 + R	'실행'항목 실행. 시작메뉴에 있는 '실행'항목을 보여줍니다.

윈도우탐색기, 내컴퓨터에서 실행가능한 단축키

← (BackSpace)

상위폴더로 이동합니다.

윈도우탐색기에서 실행가능한 단축키

F6 (Tab)	각 구역간을 이동합니다.
Alt + W	윈도우탐색기를 빨리 닫아줍니다.
← (왼쪽 화살키)	해당폴더가 열려있으면 닫고, 닫혀있으면 상위폴더를 선택합니다.
→ (오른쪽 화살키)	해당폴더의 하위폴더를 열어줍니다.

내컴퓨터에서 실행가능한 단축키

Shift + 닫기 버튼	깊숙히 숨어있는 디렉토리에 들어갈 때, 그 상위폴더들도 계속 존재하는 경우가 있는데, 그것들을 하나씩 닫는 것은 정말 귀찮은 일입니다.. 이럴 때 Shift를 누른 채로 내컴퓨터 오른쪽 맨위의 X버튼이나 Ctrl + F4를 누르면 상위폴더가 샤샤샥~ 하고 한꺼번에 다 닫힙니다.
Shift + Enter	해당폴더를 윈도우탐색기를 이용하여 열어줍니다.
Ctrl + Enter	해당폴더를 내컴퓨터를 이용하여 열어줍니다.

Internet Explorer나 윈도우98을 설치하였을 경우 실행가능한 단축키

F11

윈도우탐색기와 내컴퓨터에서 사용할 수 있는데, 일단 누르면 창이 전체화됩니다. 윈도우탐색기에서 하면 정말 멋있게 변신합니다. 내컴퓨터에서 실행하면 그냥 전체화되기만 하구요. 파일을 이동하고 복사할 때 정말 편합니다. 이 키를 누른 후에 화면이 전체화되면 복사하거나 이동할 파일을 창의 왼쪽으로 끌고 가보세요~ 그러면 윈도우탐색기의 왼쪽 폴더구조창이 뜹니다. 여기서 복사하거나 이동할 폴더로 계속 끌고 가면 됩니다.. 그리고 이키를 누르면 임시로 작업표시줄이 자동 숨김 됩니다. 한마디로 파일이동&복사에는 끝~내주는 키입니다. 참! 그리고 파일을 복사하거나 이동할 때 `이동 중'이라면서 박스가 하나 더 뜨죠? 진행상태를 표시해주면서.. 그런데, 그것도 표시됩니다. 이키를 누른 후 파일을 복사 및 이동한 후 오른쪽 위 닫기 버튼(X모양)밑을 보면 회색막대가 움직일 겁니다. 그게 진행상태를 표시해주는 거죠. 파일을 복사하거나 이동할 때 참 편리합니다.

Ctrl + B

탐색기나 내컴퓨터에서 누르면 즐겨 찾기 구성이 나옵니다.

사용빈도가 높은 단축키 요약

바탕화면, 윈도우탐색기, 내 컴퓨터에서 실행가능한 단축키

F2	선택한 항목의 이름을 변경할 수 있습니다. 바꿀 항목을 선택한 후에 이름부분을 한번 클릭하여도 바꿀 수 있습니다.
F3 (=Ctrl + F)	어느 곳에 서든지 이버튼을 누르면 파일찾기가 실행됩니다.
F5	해당 창을 최신정보로 고쳐서 보여줍니다. 폴더나 파일을 다시 정렬할 때 이용하면 됩니다.
Ctrl + A	해당 창 내의 모든 폴더와 파일을 선택합니다. 다른 곳으로 복사하거나 이동할 때 이용하면 됩니다.
Alt + Enter	해당항목의 등록정보를 보여줍니다. 마우스 오른쪽 버튼을 누르면 나오는 메뉴 중에 가장 밑에 있는 항목과 같은 것으로써 마우스 오른쪽버튼을 이용해서 하는 것보다 훨씬 편할 것입니다.
Alt + Tab	바로 이전에 사용했던 창으로 전환할 수 있는 키로서 프로그램창이 여러개 떠있어서 특정 프로그램을 찾기가 곤란할 때 쓰면 편리합니다.
Shift + Del	항목을 휴지통에 버리지 않고 바로 삭제합니다. 복구가 불가능하므로 사용할 때 주의해야 합니다.
윈도우키 + D	바탕화면 빨리 보기. 실행 중인 프로그램을 최소화하고 바탕화면을 보여줍니다. 다시 원상태로 할 때는 똑같이 윈도우키 + D를 눌러주면 됩니다.
윈도우키 +Tab	작업 표시줄에 있는 현재 실행 중인 프로그램을 선택할 수 있습니다. 이 키를 누르면 작업 표시줄의 각 항목이 반전되는데, 이동하고 싶은 항목에서 Enter키를 눌러주면 쉽게 이동할 수 있습니다.. 이와 비슷하게 Alt+Tab이 있는데, 이보다 약간 편리한 키입니다.
윈도우키 + F	'파일찾기'항목 실행. 파일찾기 항목을 실행합니다. F3과 같은 기능입니다.

내컴퓨터에서 실행가능한 단축키

Shift + 닫기 버튼

깊숙이 숨어있는 디렉토리에 들어갈 때, 그 상위폴더들도 계속 존재하는 경우가 있는데, 그것들을 하나씩 닫는 것은 정말 귀찮은 일입니다.. 이럴 때 Shift를 누른 채로 내컴퓨터 오른쪽 맨위의 X버튼이나 Ctrl + F4를 누르면 상위폴더가 샤샤샥~ 하고 한꺼번에 다 닫힙니다.

Internet Explorer나 윈도우98을 설치하였을 경우 실행가능한 단축키

F11

윈도우탐색기와 내컴퓨터에서 사용할 수 있는데, 일단 누르면 창이 전체화됩니다. 윈도우탐색기에서 하면 정말 멋있게 변신합니다. 내컴퓨터에서 실행하면 그냥 전체화되기만 하구요. 파일을 이동하고 복사할 때 정말 편합니다. 이 키를 누른 후에 화면이 전체화되면 복사하거나 이동할 파일을 창의 왼쪽으로 끌고 가보세요~ 그러면 윈도우탐색기의 왼쪽 폴더구조창이 뜹니다. 여기서 복사하거나 이동할 폴더로 계속 끌고 가면 됩니다.. 그리고 이 키를 누르면 임시로 작업표시줄이 자동 숨김 됩니다. 한마디로 파일이동&복사에는 끝~내주는 키입니다. 참! 그리고 파일을 복사하거나 이동할 때 `이동 중'이라면서 박스가 하나 더 뜨죠? 진행상태를 표시해주면서.. 그런데, 그것도 표시됩니다. 이 키를 누른 후 파일을 복사 및 이동한 후 오른쪽 위 닫기 버튼(X모양)밑을 보면 회색막대가 움직일 겁니다. 그게 진행상태를 표시해주는 거죠. 파일을 복사하거나 이동할 때 참 편리합니다.

2005년도에 퍼온글 같은데 정확한 출처는 모르겠군요 [참고주소]

[윈도우]윈도우XP 계정이름 변경

윈도우 무인설치를 했을경우 시스템 등록정보에서 컴퓨터 이름을 바꾸더라도, 계정에는 회사이름과 사용자 이름이 남아있습니다.

사용하는데는 문제가 없으나, 내컴에 내이름이 없는 찝찝함을 해소하는거라고 보셔도 될듯합니다.

1. 먼저 시작표시줄 '시작 - 실행' 을 합니다. (단축키는 윈도우키 + R 입니다.)

2. 입력창에 'regedit' 를 입력합니다.

3. 레지스트리 편집기 창에서 'HKEY_LOCAL_MAGHINE - SOFTWARE - Microsoft - Windows NT - CurrentVersion' 를 순서대로 들어갑니다.

4. 해당파일을 더블클릭후 원하는 이름으로 변경해줍니다.

RegisteredOrganization : 회사명 RegisteredOwner : 사용자 이름

5. 완료 되었습니다. 위에 이미지를 보시면 사용자 정보란에 변경된 정보가 보여집니다. (단축키는 윈도우키 + Pause Break 입니다.)

2008년 11월 19일 수요일

[CSS]png 이미지로 상하좌우 유동적인 둥근박스 만들기

png 이미지로 유동적인 둥근박스 만들기 입니다.

유동적인 박스를 만드는 방법은 다양합니다. 하지만, 박스의 쓰임새에 따라서 조금씩 다를수 있습니다.
저는 상하좌우 모두 유동적인 박스를 만들어보려고 합니다.
매번 말씀드리지만 표현하는 방법은 여러가지이며 아래 예제는 그중에 하나라고 보시면 됩니다.

총두가지 table 방식과 div 방식으로 예제를 통해 알아보도록 하겠습니다.

첫번째 table로 둥근박스 만드는 방법입니다.

위와 같은 박스를 만들고자 할때 이미지는 다음과 같이 잘라줍니다. (이부분은 div도 동일합니다.)

투명 png로 저장을 하시고, 나머지 회색 부분은 배경컬러로 적용하시면 됩니다. 곡선이미지(png)는 총4개입니다.

밑에서 설명을 하겠지만, png으로 저장시 css에서만 조금 달라질뿐이며, png같은 경우 gif보다 투명곡선을 표현할때 좀더 깔끔하기에 png를 선택했을뿐입니다. 배경이 투명이 아닐경우는 구지 png로 하시지 않아도 됩니다.

아래는 테이블로 감싸고 있을때의 모습입니다.

table 소스는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>유동적인 둥근박스 만들기(테이블)</title>
<style type="text/css">
body table tr td {font-size:12px;}
.bg_gray {background:#e2e2e2;}
.top_left {width:20px; height:20px; background:url(bg_top_left.png) no-repeat;}
.top_right {width:20px; height:20px; background:url(bg_top_right.png) no-repeat;}
.bottom_left {width:20px; height:20px; background:url(bg_bottom_left.png) no-repeat;}
.bottom_right {width:20px; height:20px; background:url(bg_bottom_right.png) no-repeat;}
/* IE6용 png 적용 */
*html .top_left {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_top_left.png',sizingMethod='crop') }
*html .top_right {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_top_right.png',sizingMethod='crop') }
*html .bottom_left {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_bottom_left.png',sizingMethod='crop') }
*html .bottom_right {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_bottom_right.png',sizingMethod='crop') }
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="top_left"></td>
<td class="bg_gray"></td>
<td class="top_right"></td>
</tr>
<tr>
<td class="bg_gray"></td>
<td class="bg_gray">이곳에 내용을 채우시면 됩니다.</td>
<td class="bg_gray"></td>
</tr>
<tr>
<td class="bottom_left"></td>
<td class="bg_gray"></td>
<td class="bottom_right"></td>
</tr>
</table>
</body>
</html>

IE6에서는 png 투명이미지가 지원되지 않습니다. 그러므로 IE6용으로 스타핵을 사용했습니다.
이부분은 [이글]을 참고하세요.

간단하게 설명을 드리자면 100% 테이블에 가로 세로 3개의 셀을 만드시고 4개의 곡선이미지를 style로 만든후 class로 불러들인 방식입니다. 그외 회색배경은 컬러로 적용을 했습니다.

첨부파일을 확인해보세요.

table.zip

두번째로 div 방식입니다.

위와 같은 모양입니다.
이미지 자르는건 table과 동일하며 마크업 및 css만 다를뿐입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>유동적인 둥근박스 만들기(div)</title>
<style type="text/css">
#wrap {margin:0; padding:0; font-size:12px;}
#header, #contents, #bottom {clear:both;}
.top_left {float:left; width:20px; height:20px; background:url(bg_top_left.png) no-repeat;}
.top_right {float:right; width:20px; height:20px; background:url(bg_top_right.png) no-repeat;}
.top_center {position:relative; height:20px; background:#e2e2e2; overflow:hidden;}
.contents_center {position:relative; padding:0 20px; background:#e2e2e2; overflow:hidden;}
.bottom_left {float:left; width:20px; height:20px; background:url(bg_bottom_left.png) no-repeat;}
.bottom_right {float:right; width:20px; height:20px; background:url(bg_bottom_right.png) no-repeat;}
.bottom_center {position:relative; height:20px; background:#e2e2e2; overflow:hidden;}
/* IE6용 png 적용 및 3px버그용 */
*html .top_left {margin-right:-3px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_top_left.png',sizingMethod='crop') }
*html .top_right {margin-left:-3px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_top_right.png',sizingMethod='crop') }
*html .bottom_left {margin-right:-3px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_bottom_left.png',sizingMethod='crop') }
*html .bottom_right {margin-left:-3px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_bottom_right.png',sizingMethod='crop') }
</style>
</head>

<body>
<div id="wrap">
   
<div id="header">
<div class="top_left"></div>
<div class="top_right"></div>
<div class="top_center"></div>
</div>



<div id="contents">
      <div class="contents_center">내용이 들어가는곳입니다.</div>
   </div>



<div id="bottom">
<div class="bottom_left"></div>
<div class="bottom_right"></div>
<div class="bottom_center"></div>
</div>

</div>
</body>
</html>

첨부파일 확인해 보세요.

div.zip

<div class="contents_center">내용이 들어가는곳입니다.</div>

위에 부분에는 ul 이 올수도 있고 p 가 올수도 있습니다. 각기 필요해 따라 마크업을 하시면 됩니다.

방법은 정말 다양합니다. 다만, 우리는 더욱더 편한걸 찾을뿐입니다. 위에 자료를 참고하셔서 더 좋은 방법을 찾길 바랍니다.^^

2008년 11월 13일 목요일

[텍스트큐브]텍스트큐브닷컴 블로그 수정하기

텍스트큐브닷컴이 (http://blog.textcube.com/) 아직 베타 버전이라 스킨편집기능을 제공하고 있지 않습니다.

어쩌면 텍큐닷컴 베타 사용자들(저를포함)이 가장 우선적으로 필요로 하는 기능이 아닐까? 라는 생각을 해봅니다.

스킨편집 기능이 되어야 구글광고도 포스팅부분에 달수있고, 스킨도 자기 스타일데로 꾸밀수 있을텐데 말이죠.

그래서 생각해낸게 html 위젯 기능을 이용한 방법입니다. 마크업을 마음데로 할수는 없어도, css로 스킨스타일은 바꿀수가 있습니다.

제블로그를 보시면 텍큐에서 기본제공되는 스킨에서 스타일만 바꿔준것입니다.

아마도 이게 css 구조의 사이트에 장점이 아닐까 하는 생각을 합니다.

그럼 사용방법을 잠깐 알아보도록 하겠습니다.

먼저 '내 블로그 관리하기'를 클릭후 관리자 페이지로 들어가십시오.

그후 상단메뉴 꾸미기 > 위젯 > 위젯 추가를 해주세요.

다행이도 베타이긴 하지만 html 코드 위젯을 제공합니다. 숨쉴구멍은 남겨두었네요.^^

위젯 코드를 선택하시고, 그안에 스타일을 기술합니다.

위와 같이 내부스타일을 이용하는 방법입니다. 스타일 우선순위는 인라인 > 내부 > 외부순입니다.

이걸 이용한것입니다. 스킨 구조를 보아하니 외부로 css를 불러들였습니다. 그래서 우선순위가 높은 내부스타일을 적용시켰습니다. [자세히보기]

위젯안에

원하는 스타일

</style>

썩 좋은 방법은 아닙니다만, 이렇게 하는 방법도 있구나! 라고 알고 넘어가시면 감사하겠습니다.

위까지 해놓고 질문이 나올수 있습니다.

여기서 해당 레이아웃 id나 class 명을 어떻게 알아내나요?

파이어폭스 부가기능중에 firebug 라는 기능이 있습니다. 그걸 사용하시면 쉽게 알아낼수 있습니다.

어떻게요? 아래 이미지를 참고해주세요.

보시는 바와 같이 오른쪽 사이드바 id 명을 쉽게 찾을수 있습니다.

고로 위젯에 바꾸고자하는 id 명에 스타일만 추가해 주시고, class 도 같은 방법으로 하시면 됩니다.

이게 싫은신분은 소스보기로 해당소스를 찾는 방법도 있습니다. 요건 아마 귀찮을겁니다.

수정이 끝나셨으면, 해당 위젯을 사이드 바 적당한 위치에 넣으시면 되겠습니다.

저같은 경우는 프로필 위에 위치시켰습니다.

css를 이용해서 배경이미지도 바꿀수가 있으며 시간이 많으시다면, 레이아웃 위치도 바꿈으로 전혀 다른 스킨으로 재탄생시킬수도 있겠습니다.

다시 말씀드리지만, 위방법은 썩 좋은 방법은 아니며, 성격이 급한 분들을 위한 임시방편으로 보셨으면 합니다.

ps) 원상복구 시키고자 할시 해당 위젯을 삭제하시면 됩니다.^^