Bittersweet Life

[javascript] 브라우저 높이 구하기

2010-07-30T11:21:00.000+09:00

document.writeln("브라우저의 전체 너비",screen.availWidth); //너비는 해상도와 일치할겁니다.

document.writeln("모니터의 해상도 높이 ",screen.height);

document.writeln("모니터의 해상도 너비 ",screen.width);

document.writeln("브라우저안쪽의 높이 ",document.body.clientHeight); //이것이 브라우저 안쪽의 높이구요
document.writeln("브라우저안쪽의 너비 ",document.body.clientWidth); //이것이 브라우저의 안쪽 너비죠..

document.writeln("문서 높이",document.body.scrollHeight); //이것이 문서 높이죠..
</script>

[javascript] ff에서 불투명 레이어 안먹힐 때

2010-07-30T11:19:00.000+09:00

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=111366

ff 에서 불투명 레이어 안먹힐 때.

.style.opacity = "0.x";

/* 화면전체를 덮을 영역 계산 */
oDiv = document.getElementById('opqueLayer');
oDiv.style.width="100%";
oDiv.style.height=document.body.scrollHeight;

//alert(document.body.clientHeight);
/* 불투명레이어와 알림팝업을 띄우는 함수 */
//viewAlertLayer01(알림팝업의id) 형식으로 호출하여 사용
obj_alertPop = document.getElementById('alertPopup01');//알림창객체
document.getElementById('opqueLayer').style.display = "block";//불투명레이어보이게함
var ver = getInternetExplorerVersion();
if ( ver>= 8.0 ) {
obj_alertPop.style.top = (((document.body.clientHeight + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2)))+300 + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2)) + "px";//팝업레이어의 topleft x좌표
}

obj_alertPop.style.top = (((document.body.clientHeight + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2))) + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2)) + "px";//팝업레이어의 topleft x좌표
/*
obj_alertPop.style.top = ((document.body.scrollTop + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2)) + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2)) + "px";//팝업레이어의 topleft x좌표
*/
/* 덧글이열렸을 때 화면전체를 덮을 영역 재계산 */
oDiv = document.getElementById('opqueLayer');
oDiv.style.width="100%";
oDiv.style.height=document.body.scrollHeight;

/* 팝업내의 닫기/취소 버튼을 눌렀을 때 레이어를 닫기위해 사용하는 함수 */
function hideAlertLayer01(objName) {
document.getElementById(objName).style.display = "none";
document.getElementById('opqueLayer').style.display = "none";
}
</script>

[javascript] 브라우저 너비, 높이 구하는 selector

2010-07-29T15:32:00.000+09:00

http://www.quirksmode.org/dom/w3c_cssom.html

브라우저 너비 구하는 selector 모아놓은 페이지.

브라우저별 호환 여부 테이블이 잘 나타나있음.

ie 8.0 브라우저 버그 관련

2010-07-28T18:01:00.000+09:00

http://www.happyfri.com/blog/160

[영화] 페데리코 펠리니(Federico Fellini)

2010-06-10T15:35:00.000+09:00

이미지 더보기

페데리코 펠리니(Federico Fellini) 영화감독
출생-사망: 1920년 1월 20일 (이탈리아) - 1993년 10월 31일
데뷔: 1950년 영화 '청춘군상'
수상: 1993년 아카데미영화제 평생공로상
1987년 칸느영화제 40주년 기념상
1987년 모스크바 국제영화제 황금상
1972년 칸느영화제 기술공헌상

http://people.search.naver.com/search.naver?sm=ncc_clk&where=people&query=%C6%E4%B5%A5%B8%AE%C4%DA+%C6%E7%B8%AE%B4%CF

[Music] 20세기 앨범커버 아이콘

2010-06-10T10:32:00.000+09:00

http://navercast.naver.com/design/icon/2876

네이버캐스트에 이런게 떴다 ..

[잡담] 검색의 비애

2010-06-08T14:54:00.000+09:00

쇼핑클럽

'핑클'

검색 이후에...

한정식집 이름...'하련지'새로운 검색 키워드로~~

일부러 하련지로 한듯...

파도타기 절로 나옴.. ㅋ.

[잡담] 손님을..?

2010-06-08T14:51:00.000+09:00

이런 음식점 이름도 첨본...

웃껴 죽..

4G다

2010-06-08T10:55:00.000+09:00

어제 저녁부터 시작해서..

아이폰 4G 검색열풍..

오늘 새벽 1시정도에 검색해봤는데...

아침에 드디어 기사가 뜨기 시작.

네봉 실급검 1위에 등극...

아아... +ㅁ+ 4G 빨리 나오거라..

애플 아이폰4G feature 페이지 : http://www.apple.com/kr/iphone/features.html

Like1)

카메라 500만화소, 전/후방 카메라렌즈

3G에 전방 렌즈가 없어 아쉬웠는데 화상 통화 기능과 함께

보완된 점이라..사진좋아하는 나로써는 일단 만족.

Like2)

라디오 기능

이제 라됴 청취도 가능~~

Like3)

멀티태스킹

3G 잠깐 써봤는데...멀티태스킹이 안되서 불편한 점이라면

어플 하나 실행하고 쓰다가... 다시 메인이나 어플 검색 화면으로

돌아가서..또 골라줘야 되고

그게 매우 불편하긴했었는데..

이기능도 보완되었다니...

음..아무래두 4G가 수퍼폰이 되려는듯하다.

[tools] Smart Draw

2010-06-07T13:28:00.000+09:00

Flow Chart,

Timeline

등등

http://www.smartdraw.com/downloads/

기획에 필요한 도식화 툴들을 만들 수 있는 프로그램

프리웨어인데 아무래두, 사용기간 제한이 있는 듯...?

[UI] 영상 "Hi" by Multitouch Barcelona

2010-06-07T11:28:00.000+09:00

Hi from Multitouch Barcelona on Vimeo.

출처 : http://vimeo.com/4697849

[Planning] 잡생각 대마왕 훈련

2010-06-04T11:29:00.000+09:00

[Chapter 1. 잡생각 대마왕]

1-1

지하철을 타고 집에 가는 길...

지하철 문옆에 달려있는 광고를 보고

모델의 몸매를 잠시 감상 한 후

메이크업 상태도 꼼꼼히 보고 ..

비판할점이 없나 찾아보고..

광고 카피나 광고 컨셉에 대해서 생각해보고

a.에이 별로네

b.어쭈 좀 괜찮은데

c.Coooool~

1-2

걸어다는 사람들의 뒷모습을 보면서

저 사람은 어딜 가고 잇을까?

저사람 앞모습은 어떻게 생겼을까?

저 옷과 저 가방을 든 건..

저 사람의 취향과 목소리는 어떨까 ?

저 사람이 저 길을 저렇게 걷고 있는 이유는 무엇이며

누구를 만나러 가는 것일까?

지쳤을까 혹은 생기발랄할까?

1-3

출퇴근길의 루트

신논현으로 갈까

학동으로 갈까

논현으로 갈까

신논현에서 골목으로 걸어갈까

신논현에서 큰길로 걸어갈까

1번째 블록에서 골목으로 꺾을까

2번째 블록에서 골목으로 꺾을까

따거운 햇살을 수첩으로 가릴까

그늘로 갈까

건물의 그림자를 찍을까 말까

나뭇잎의 그림자를 찍을까 말까

천천히 걸을까 뛸까

마주오는 사람의 얼굴을 쳐다볼까 말까

직장인의 하루

2010-06-04T11:23:00.000+09:00

[conference] onoffmix 'OPEN'

2010-06-01T15:45:00.000+09:00

http://www.onoffmix.com/e/cckorea/trackback/1535

컨퍼런스

Alley Cat 1984

2010-05-26T13:40:00.000+09:00

http://www.google.co.kr/search?hl=ko&newwindow=1&complete=1&q=alley+Cat+1984&aq=f&aqi=&aql=&oq=&gs_rfai=

와 이거 초등학교때 열심히 했던...

추억의 게임~

...꿈에도 빗자루가 나왔음. -ㅂ-

BM 방법론

2010-05-25T17:07:00.000+09:00

출처 : http://blog.naver.com/yuki6174?Redirect=Log&logNo=10042886191

웹기획의 기본 - 사용자 경험(UX)의 5가지 계층 오래가는 웹기획& UX디자인

2010-05-25T16:30:00.000+09:00

17) 웹기획의 기본 - 사용자 경험(UX)의 5가지 계층 오래가는 웹기획& UX디자인

2010.04.12 17:05 프렌드반 Edit

이번 강좌에서는 웹 상의 사용자 경험을 5개의 계층으로 정리한 Garrett의 그림을 소개합니다.

이 그림은 웹 사이트를 구성하는 구조를 설명하기 위해서 가장 많은 사람들이 인용하는 그림으로 많은 사람들에게 인정을 받을 만큼 잘 구성된 다이어그램입니다. Garrett은 이 그림을 경험디자인의 요소(번역판)라는 책에서 상세히 설명하고 있습니다. 추가 설명이 필요하신 분들은 책을 보시면 될 것 같습니다. 다만, 책의 설명이 자세하지 못하고 다양한 측면을 개념적으로만 담고 있어서 이 한권으로 내용을 깊게 이해하기는 어렵습니다.

이 그림을 만든 Garrett은 최근에 Experience Design을 설명하는 다이어그램을 발표했는데, 그에 대해서는 이후 강좌에서 설명하도록 하겠습니다.

[오래가는 웹기획 & UX 디자인]

17) 웹기획 기본 이론 - 사용자 경험(UX)의 5가지 계층

이번에는 사용자의 경험을 5가지 계층으로 나눈 Jesse James Garrett의 그림을 소개한다. 웹 사이트가 사용자에게 전달되는 것은 아래와 같은 5가지 계층에 기반한다. 사용자는 눈에 보이는 요소들과 함께 보이지 않는 구조와 범위, 전략 등을 함께 경험하게 되며, 이런 5가지 계층이 웹 상의 사용자 경험을 만들어내게 된다.

그림 1-9 사용자 경험의 5가지 계층[1]

구조적인 측면에서 웹 사이트를 크게 정보(Information) 중심의 사이트와 태스크(Task) 중심의 사이트로 나눌 수 있다.

정보(Information) 중심의 사이트는 사이트의 목적이 정보 자체를 전달하는 것인 경우에 해당한다. 이 경우 사이트에서 중요한 점은 다양한 정보를 빠르고 정확하게 전달하는 것이다. 그래서 사용자들이 어떤 정보를 원하는지에 대한 요구사항을 수집하고, 정보를 어떻게 구성할지 결정하는 인포메이션 아키텍처를 설계하는 것이 중요하다. 정보의 구조를 만든 다음에는 그 정보들에 접근하는 길을 설계하는 내비게이션 디자인이 중요해진다.

태스크(Task) 중심의 사이트는 정보의 전달보다는 특정한 업무를 처리하는 것이 중요한 사이트이다. 정보 중심의 사이트는 각각의 정보들을 이용해서 이해하기 쉬운 페이지를 만들고 그 페이지를 연결하는 것이 중요한 반면, 태스크 중심의 사이트는 하나의 페이지에서 다양한 인터랙션이 일어나므로 그런 인터랙션을 어떻게 효율적이고 사용하기 쉽게 설계할 것인지가 중요하다. 또한, 정보 중심의 사이트에서는 사이트의 콘텐트에 대한 요구사항이 중요하지만, 태스크 중심의 사이트에서는 사용자가 어떤 기능을 필요로 하며 설계된 기능을 자연스럽게 사용할 수 있는지 조사하는 것이 중요하다.

이 그림에서 아래에 있는 전략과 범위 계층은 추상적이고 개념적인 정의들을 내리는 계층이고, 그 위에 있는 구조, 윤곽, 표면 계층으로 갈수록 점점 더 구체적인 실체를 만드는 계층이다. 표면 계층에서 이루어지는 비주얼 디자인은 이전의 설계 단계에서 정의된 내용을 디자이너가 시각적으로 디자인을 하는 과정을 이야기한다. 웹사이트의 사용자 경험은 이런 5가지의 계층을 거쳐서 설계되고 만들어진다.

사용자 경험 계층 그림은 이전에 소개한 웹사이트의 3가지 목적과도 연관이 될 수 있다. 웹사이트의 3가지 목적으로 소개한 정보 전달, 작업 처리, 프로모션 중에 사이트를 설계하는 구조적인 측면을 강조할 경우 정보 전달과 작업 처리를 기준으로 사이트를 나눌 수 있다. 정보 전달 목적은 정보 중심의 웹 사이트와 연관되고, 작업 처리 목적은 태스크 중심의 웹 애플리케이션과 연관된다.

사용자 경험의 5가지 계층

사용자 경험의 5가지 계층에서 정의, 설계 되는 내용들은 다음과 같다.

표면 – 이미지와 텍스트 등 전체 요소 배치, 시각적 마무리
윤곽 – 버튼과, 탭, 이미지, 텍스트 블록에 대한 배치
구조 – 사이트의 추상적인 형태를 정의
범위 – 사이트에서 제공할 기능과 태스크, 콘텐트의 범위를 정의
전략 – 사이트에서 사업자와 사용자가 추구하는 목표 정의

각 계층별로 정의되고 설계되는 내용을 좀 더 자세히 살펴보기로 하자. 웹 상의 사용자 경험은 태스크 중심 사이트와 정보 중심 사이트에서 차이가 난다. 전략 계층에서 고려되는 사용자 요구와 사이트 목표는 사이트 형태와 상관없이 공통적으로 중요한 요소들이다. 이후의 범위, 구조와 윤곽 계층에서는 사이트의 형태에 따라 중요한 요소들에 차이가 생긴다. 태스크 중심의 사이트는 기능에 대한 요구사항과 인터랙션 디자인, 그리고 인터페이스 디자인이 더 중요하고, 정보 중심의 사이트는 그보다 콘텐트 요구사항, 인포메이션 아키텍처, 그리고 내비게이션 디자인을 중요하게 고려해야 한다.

하나의 사이트를 만들기 위해서는 그림에서 소개한 5가지 계층의 다양한 요소들을 잘 조화시켜야 한다. 일반적인 사이트들은 전달할 정보와 수행할 태스크가 혼합된 구조를 가지게 되므로 설계시에도 어느 한쪽만을 집중적으로 고려해서는 안된다. 그림에서 보이는 특정 영역에 지나치게 치우치지 않고 전체적으로 잘 조화될 수 있게 설계하는 것이 중요하다.

이렇게 각각의 계층에서 설계되는 요소들을 간단하게 아래와 같이 정리했다.

계층

태스크 중심 사이트
(웹 애플리케이션)

정보 중심 사이트
(웹 사이트)

5. 표면

비주얼 디자인

인터페이스 요소들의 시각적인 배치
주요 요소에 대한 시각적인 강조로 시선 유도, 통일성과 일관성 유지

4. 윤곽

인터페이스 디자인

인터페이스 요소들과 GUI 구성 요소들을 배치
버튼, 선택, 입력필드 등의 인터페이스 요소에 대한 일관된 사용

내비게이션 디자인

정보를 편리하게 찾을 수 있게 인터페이스 요소들을 배치
전역, 지역, 보조 내비게이션 설계
사이트 길 찾기의 기본 구조 제공

인포메이션 디자인

사용자의 이해를 위해 콘텐트 요소들을 배치
의미에 맞게 콘텐트 그룹화. 사용자들의 사고방식을 배치에 반영

3. 구조

인터랙션 디자인

기능 요구사항의 세부 태스크에 대한 동작 설계
태스크를 수행하고 완료하는 과정에 대한 패턴과 순서 정의

인포메이션 아키텍처

원하는 콘텐트를 편리하게 이용할 수 있게 콘텐트 공간을 설계
정보를 전달하는 과정에 관계되는 패턴과 순서 정의

2. 범위

기능 요구사항

사용자 요구사항 충족을 위해서 필요한 기능 범위 정의
각각의 기능에 대한 세부 태스크 정의,
태스크에 대한 세부 스펙 정리

콘텐트 요구사항

사용자 요구사항 충족을 위해서 필요한 콘텐트 요구사항 범위 정의
제공할 콘텐트 범위, 형태와 작성 프로세스 및 관리 주체 등을 정의

1. 전략

사용자 요구

사이트에서 사용자가 원하는 가치를 정의
사용자 리서치와 자료 분석을 통해 사용자의 요구사항 파악

사이트 목표

사이트에서 추구하는 사업적인 가치와 전략적인 목표를 정의
사이트의 성격, 제공할 경험의 형태, 수익구조 등을 정의

Garrett의 이 그림은 웹 상의 사용자 경험(UX)을 눈에 보이는 표면적인 부분까지 정의한 그림이다. 사용자 경험(User Experience)을 좀 더 넓은 의미에서 정의한 내용은 이후 소개될 UX 디자인 관련 내용을 참고하기 바란다.

출처 : http://bahns.net/2642834

좋은 제안서나 기획서를 쓰기 위해..

2010-05-19T13:59:00.000+09:00

좋은 제안서나 기획서를 쓰기 위해서는 많은 시간과 노력이 필요합니다. 특히, 마케팅, 광고, 온라인,브랜드 등 모든 기획자들이 공통으로 갖추어야 될 요건 중 하나가 바로 분석력과 자신의 아이디어를 논리적으로 표현할 수 있는 기획력이 중요합니다.

먼저 좋은 자료를 통해서 이러한 지식을 얻을 수 있는 데 개인적인 견해로 가장 빠른 방법은 역시 기존 기획자들이 현직에서 종사하면서 작성한 기획서 또는 제안서를 많이 보는 것이 가장 좋을 것 같습니다.

사이트를 하나 추천해 드리자면 플랜업 추천합니다.

다양한 사업기획서와 제안서 들을 참고하실수 있을겁니다.
아무리 좋은 아이디어가 있어도 그것을 기획서나 제안서로 잘 정리하지 못한다면 아무 소용이 없죠.

가시면 도움이 되리라 봅니다.

만약 혼자서 제안서를 작성하기가 어렵다면 플랜업 다이렉트 문서대행 서비스라는 것도 있습니다.

현직에 종사중이거나 프리랜서로 사업기획서나 제안서 등의 작성 대행을 연결해주고 하는 곳인데요

출처 : http://kin.naver.com/qna/detail.nhn?d1id=4&dirId=40401&docId=35258808&qb=7KCc7JWI7ISc&enc=utf8&section=kin&rank=4&sort=0&spq=1

Web 3.0 And The Future Of The Internet - The Movie

2010-05-18T18:05:00.000+09:00

Web 3.0 from Kate Ray on Vimeo.

출처 : http://blog.naver.com/crimm?Redirect=Log&logNo=90043806939

[book] 웹사이트 벤치마킹의 9가지 패턴

2010-05-18T12:36:00.000+09:00

http://book.naver.com/bookdb/book_detail.nhn?bid=5339555

차세대 웹을 선도할 표준 기술 HTML 5 & CSS3 & AJAX

2010-05-17T13:33:00.000+09:00

차세대 웹을 선도할 표준 기술 HTML 5 & CSS3 & AJAX

차세대 웹이라면 현재 Web 2.0이라 불리워지는 Rich Client(멀티미디어와 웹 기반 애플리케이션)과 집단 지능, 매쉬업, 소셜 네트워크, 사용자 참여 정보(UCC), 협업, 지능형 웹 등의 특징을 들 수 있습니다.

이러한 차세대 웹을 구현할 기술의 대표적인 기술이 HTML 5와 CSS3 그리고 AJAX라고 할 수 있겠습니다.

AJAX는 W3C와 같은 기관에서 표준으로 지정한 바가 없어서 표준 기술이라고 할 수는 없겠습니다만 업계에서 널리 쓰이고 인정하고 있으므로 현실적인 표준이라고 봐야하지 않을까 합니다.

본 글에서는 웹의 발전에 대한 간략한 소개와 위의 세가지 기술의 역할과 특징에 대해서 이야기 해 볼까 합니다.

두가지 기술은 기존의 비교적 정적이고 단순한 정보를 보는 매체 즉 웹 문서를 보는 HTML 기술과 javascript 기술을 웹 애플리케이션으로서의 기능, 더 나아가 Web 2.0의 포괄적인 요구사항을 효율적으로 지원하기 위해 개선된 최신 기술입니다.

차이점

HTML5는 텍스트, 이미지, 미디어 등의 정보의 구조를 정의합니다.

CSS3는 HTML의 정보를 화면에 표현하는 방법을 정의합니다.

AJAX는 HTML과 CSS의 정보를 조작합니다.

동일한 점

세 가지 기술은 웹을 문서를 보는 매체에서 애플리케이션을 구동하기 위한 기술로 발전 시키기 위한 새로운 표준입니다.

초창기 인터넷은 단순한 텍스트만을 전송하고 볼수가 있었습니다. 단지 전 세계가 하나의 네트웍을 통해서 정보를 공유할 수 있다는 것 만으로 대단한 혁신이었죠.
HTML이라는 정보 표현 태그와 모자익이라는 최초의 브라우저가 나와서 글자의 크기와 색깔을 표현하고 이미지를 보여줌으로써 사람들은 또 한 번 경악을 했죠.
CGI라는 기술은 수동적으로 문서를 보기만 하던 사용자가 게시판과 같은 프로그램을 통해 웹 서버에 정보를 보내서 저장하고 처리하게 함으로써 사용자 참여가 가능한 웹을 만들었습니다. CGI가 발전하여 요즘의 ASP, PHP, JSP, DotNet 과 같은 전문 서버측 프로그래밍 언어가 되었습니다.
자바스크립트는 웹 페이지의 데이터를 조작할 수 있게 하는 기술로 정적인 HTML 정보가 기능적으로 동작하도록 했습니다.
HTML이 문서의 구조와 스타일을 한번에 처리하다 보니 웹의 문서를 정교하게 다루는 것이 어려워 CSS라는 문서의 모양새만을 전문적으로 처리하는 표준 기술이 나와 자바스크립트와 CSS, HTML을 활용하는 DHTML 기술이 발전하여 정교하고 미려한 웹페이지가 동적으로 사용자와 소통하는 것이 가능해서 웹이 단순한 문서가 아니라 데이터를 처리하고 서비스를 제공하는 웹 애플리케이션이 급속도로 발전하게 됩니다.
웹 애플리케이션이 발전하고 Web 2.0 이 확대 됨에 따라 HTML 자체가 문서를 표현하는 기술이 아닌 애플리케이션의 구조를 처리하는 기능을 포함해야 될 필요성이 커져서 W3C는 문서의 정보만을 정의하는 태그에 멀티미디어와 데이터 처리, 통신 기능을 처리할 수 있는 HTML 5를 정의하고 있습니다.
단순히 다이나믹한 웹을 넘어서 협업과 매쉬업 등의 기능들을 구현하기 위해서 웹문서인 HTML을 처리하기 쉬우면서도 표준화된 프로그램 기술이 발전해야 되었는데 그것이 자바스크립트와 XML 그리고 비동기 통신(하나의 통신이 진행중일때 다른 통신을 추가로 수행 가능함) 기술입니다. 이러한 3가지 요구를 위해 만들어진 것이 AJAX(asynchronous JavaScript and XML)입니다.
이러한 추세에 발맞추어 미려하고 정교한 화면 구성을 위한 CSS3도 만들어 졌습니다.

그럼 차세대 웹을 위한 3가지 기술을 정리해 보겠습니다. 먼저 간단하게 세가지 기술의 역할을 보면

HTML 5은 정보의 구조를 정의하고 그것을 처리합니다.

CSS3는 정보를 미려하고 정교하게 화면에 표현합니다.

AJAX는 정보를 조작하고 다른 서비스들과 XML을 이용하여 통신합니다.

HTML 5

단순히 텍스트와 이미지 정도의 정보를 처리하던 기존 HTML에서 다양한 멀티미디어 정보 표현 : 벡터 이미지(SVG), 동영상(기존에는 ActiveX나 flash 등으로 처리하던 것을 브라우저가 직접 태그를 통해서 처리함)

웹 페이지내에서 다른 서버나 서비스와 통신이 가능하고 사용자 정보를 저장하여 웹 프로그램의 기능을 확대합니다.

CSS3

정교하고 미려한 화면 구성은 물론이고 다양한 효과와 애니메이션까지 지원하게됩니다.

AJAX

단순히 웹페이지 내의 정보만을 조작하던 Javascript나 DHTML 시대를 지나 서버와의 빈번한 통신과 정교한 HTML 구조 조작등이 가능하며 최근 AJAX의 초기 사용 범위를 넘어서 웹 애플리케이션에 필요한 대부분의 기능들을 AJAX로 처리합니다.

출처 http://kin.naver.com/open100/detail.nhn?d1id=1&dirId=10402&docId=1320620&qb=aHRtbDU=&enc=utf8&section=kin&rank=2&sort=0&spq=0&pid=f/vsfloi5T8ssuM/4r8sss--490743&sid=S-DASrey8EsAACO-EIk

Suga Shikao (スガシカオ) - Hachigatsu no Serenade (8月のセレナーデ)

2010-03-22T03:39:00.000+09:00

Corinne Bailey Rae - Put Your Records On (live)

2010-03-22T03:03:00.000+09:00

당신의 아픔을 다 알고있다는 듯이

당신의 상처를 살살 보듬어줄것 같은

치유의 목소리.

입니다.

허니와클로버

2010-03-17T18:01:00.000+09:00

감성으로 똘똘뭉친

허니와 클로버 애니 오프닝!

Hirosue Ryoko - summer sunset

2010-03-16T21:00:00.000+09:00

눈빛최고......
폴라로이드에 주목
다재다능한 남자친구는 얼굴이 없는 채로 아이스크림 사주고 운전도 한다
그렇지만 뮤비아닌 히로스에 료코의 라이브는... 참 매가리없지만
세월이 지나도 이 뮤비속의 히로스에료코는 영원히 사랑스러운 소녀임에는 틀림없다!

moritaka chisato - 바다까지 5분

2010-02-10T06:24:00.000+09:00

nakamori akina - 北ウイング

2010-02-10T02:36:00.000+09:00

출처 http://www.youtube.com/watch?v=iiBdf73kJq0&feature=related

문자중복버그 관련

2010-01-28T15:51:00.000+09:00

http://blog.naver.com/kes3583?Redirect=Log&logNo=90039629460

http://siana.tistory.com/63

ie테스터 다운로드 경로

2010-01-27T12:21:00.000+09:00

http://www.my-debugbar.com/wiki/IETester/HomePage

css핵 정리

2010-01-21T10:45:00.000+09:00

http://www.nmindplus.com/2006/06/28/css-hack/

css핵 정리

Netscape 4 제외시키기

Netscape 4은 media속성값에 “screen”이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />

이나

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />

라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio’s hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p {

/*/*/ color:white; /* */

}

Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")

Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p {

/* \\*/ color:white; /* */

}

Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ { color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p { color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p { color:white;}

Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p { color /**/:white;}

star hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }

underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p { _color:white; }

hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p { #color:white; }

star 7 hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }

xmlns hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari, IE 7 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 { color:red; }

:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 { color:red; }

Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content {

width:500px;

voice-family: "\"}\"";

voice-family:inherit;

width:400px;

}

Win IE 5용 패스필터

@media tty {

i{content:"\";/*" "*/}}; @import '/css/style.css'; {;}/*";}

}/* */

Win IE 5.5용 패스필터

@media tty {

 i{content:"\";/*" "*/}}@m; @import '/css/style.css';/*";}

}/* */

Win IE 5-5.5용 패스필터

@media tty {

 i{content:"\";/*" "*/}}@import '/css/style.css';/*";}

}/* */

모던브라우저용 패스필터

@import "null?\"\{";

@import "/css/style.css";

@import "null?\"\}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

2006년 7월 18일, IE7용의 핵(hack)을 추가.

IE7에만 적용

IE7에만 다른 스타일을 적용하는 방법은 해당 셀렉터의 앞에

*+html body

이나(*+html body는 Opera8~에도 적용되어 버리는 문제가 있기에 *+html>/**/body로 Opera8~ 전용 스타일을 기술하여야 한다. 참조:IE7のCSSバグとOpera CSS Hack)

*:first-child+html

을 기술한 다음 해당 셀렉터와 스타일을 작성하면 된다. 예를 들어 #banner라는 id셀렉터에 적용시키는 경우

*:first-child+html #banner {

　　　　　　：

　　[IE7용 스타일을 기술]

　　　　　　：

}

라고 기술한다. IE7이외의 브라우저를 위한 원래의 #banner 스타일 설정은 IE7용 스타일 설정 앞에 기술한다(순서가 바뀌면 원하는 효과를 얻지 못한다. 참조:IE7 の CSS ハック)

#banner {

　　　　　　：

　　[IE7이외의 브라우저를 위한 스타일을 기술]

　　　　　　：

}

*:first-child+html #banner {

　　　　　　：

　　[IE7용 스타일을 기술]

　　　　　　：

}

IE 6 and below （IE6이하）

* html

IE 7 and below （IE7이하）

*:first-child+html, * html

IE 7 only （IE7전용）

*:first-child+html

IE 7 and modern browsers only （IE7과 모던브라우저）

html>body

Modern browsers only (not IE 7) （IE7이외의 모던 브라우저）

html>/**/body

Recent Opera versions 9 and below （최근의 Opera9이하）
Opera 9와 Safari 동시적용

html:first-child

Safari에만 적용
Opera 9와 Safari 동시적용

/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.

/* safari only \\*/

html:\\66irst-child div.globalContainer{

margin: 0 0 0 18px;

}

/* end */

내용중 잘못된 부분이나 수정, 추가가 필요한 부분이 있으시면 의견 부탁드립니다.

Opera와 Safari용 css hack이 동시 적용이 되는 문제를 김진태님이 지적해 주셨습니다.

Posted on 2006-06-28 Wednesday 13:23:27 by nmind
Tags: CSS
Trackback: http://www.nmindplus.com/2006/06/28/css-hack/trackback/

링크 클릭시 위로 안올라가게

2010-01-15T11:51:00.000+09:00

클릭시 위로 안올라가게 ....

a onclick="javascript:return false;"

height 100% 높이의 레이아웃잡기

2010-01-05T17:23:00.000+09:00

오랜만에 Markup을 할 일이 있어 HTML과 CSS를 다루는데 Javascript로 구현 했던 레이아웃을 정말 단순히 HTML과 CSS로 구현 하려니깐 공수가 장난이 아니었다. 하지만 인터넷에 수많은 고수분들이 잘 정리 해준 덕분에 잘 조합해서 구현했다.

사전 조건

DOCTYPE을 사용 할 것

IE, Firefox, Opera, Safari 등 모든 브라우저에서 Standard Mode 혹은 Almost Standard Mode가 되는 조건은 아래 와 같다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위와 같이 HTML Page에 첫번째로 선언하면 기본적인 BoxModel Problem을 해결 할수 있다.

다른 Doctype도 많지만 가장 무난히 호환성을 유지해 나가면서 표준을 지키고 여러 브라우저에서 동일하게 표현 하기에 제일 좋은 Doctype이라 생각이 든다.

첫 번째 조건

높이가 100%인 div 영역

height: 100%;

보통 div element에 위와 속성을 주면 안된다 ㅡㅡㅋ

원인을 찾아 보니깐 저 조건이 되기위해서는 parent element의 height의 영향을 받기 때문이다.

그래서 해결책은 다음과 같다.

html, body {

height: 100%;

}

위와 같이 선언을 해두면 div element의 100% height 속성이 제대로 표현된다.

두 번째 조건

header(헤더) 와 footer(푸터) 영역 잡기

헤더는 상단에 붙어 있어야 하고 푸터는 하단에 붙어 있어야 한다. 가운데 영역만 크기에 따라 늘어나고 줄어든다.

container(컨테이너)가 min-height 100% 속성을 갖게 되면 나머지 헤더와 푸터 영역 만큼 스크롤이 생기는데 이를 막기 위해 마이너스 margin을 사용한다. 헤더와 푸터 영역 만큼 마이너스 margin값을 주면 스크롤은 사라진다. 그리고 헤더는 아래 나온 element들 보다 위에 보여야 되기 때문에 position속성에 relative 값을 할당하고 z-index에 값을 할당한다.

#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
width: auto;
}

#container {
min-height: 100%;
margin: -100px 0 -50px;
width: auto;
}
#footer {
height: 50px;
background: #ddd;
}

IE에서는 min-heigth 속성을 지원하지 않는다. 이를 해결하기 위해 height 속성에 100%를 주면 IE는 min-height와 같은 역할을 한다.

/* IE Hack */
*html #container {
height: 100%;
}

세 번째 조건

컨텐츠 영역이 헤더와 푸터에 가려진다. 보통 이런 경우 padding 속성을 활용한다. padding을 이용하면 컨텐츠가 보이는 영역을 재 설정을 할수 있기 때문에 헤더와 푸터 영역만큰 padding 값을 contents-box영역에 준다.

.contents-box {
padding: 100px 0 50px 0;
}

네 번째 조건

가변 2단 구조를 하기 위해서 block element인 div에 float 속성을 줘서 해결한다.

.snb {
background: #00dfee;
float: left;
margin-right: -200px;
width: 200px;
height: 200px;
}

.contents {
margin-left: 200px;
background: #00ffee;
height: 500px;
}

float 속성은 다음에 나오는 모든 element에 계속 영향을 준다. 이를 끊어주는 element를 넣어서 float를 clear한다.

.clear {
clear: both;
display: block;
float: none;
font-size: 0 !important;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 100%;
}

Full Source Code

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./css/default.css" />
<title>높이 100% 가변 2단 페이지</title>
</head>
<body>
<div id="wrap">

<div id="header">Header</div>


<div id="container">
<div class="contents-box">
<div class="snb">Left</div>
<div class="contents">Right</div>
<div class="clear"></div>
</div>
</div>


<div id="footer">Footer</div>

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

CSS Code

/**
* @author niceilm
*/

/* Type Selector */
* {
margin: 0;
padding: 0;
font-style: normal;
font-family: 굴림, Gulim, 돋움, Dotum, AppleGothic, Sans-serif;
}

img, fieldset {
border: none;
}

hr, legend {
display：none;
}

li {
list-style: none;
}

a {
}

a:visited {
}

a:hover, a:active, a:focus {
}

html:first-child select {
padding-right: 6px;
height: 20px;
} /* Opera Fix */
option, x:-moz-any-link {
padding-right: 4px;
} /* Firefox Fix */
option, x:-moz-any-link, x:default {
padding-right: 0;
} /* Firefox Fix */

/* Layout Selector */
html, body {
height: 100%;
}

#wrap {
height: 100%;
width: auto;
}

#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
width: auto;
}

#container {
min-height: 100%;
margin: -100px 0 -50px;
width: auto;
}

/* IE Hack */
*html #container {
height: 100%;
}

#footer {
height: 50px;
background: #ddd;
}

.contents-box {
padding: 100px 0 50px 0;
}

.snb {
background: #00dfee;
float: left;
margin-right: -200px;
width: 200px;
height: 200px;
}

.contents {
margin-left: 200px;
background: #00ffee;
height: 500px;
}

.clear {
clear: both;
display: block;
float: none;
font-size: 0 !important;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 100%;
}

참고사이트

http://html.nhndesign.com

참고서적

웹표준 완전정복 세트 (웹 표준 + 방탄웹 + CSS 마스터 전략)

Dan Cederholm,Andy Budd | 박수만 옮김

에이콘 2007.06.18

margin과 padding을 잘 활용하는 것이 관건이였다. BoxModel에 대한 이해가 무엇보다 중요하다.

다들 많은 도움이 되길 바란다.

[출처] 높이(height) 100% 가변 2단 레이아웃 구조 (Web Programmer 2.0) |작성자 치토스

http://cafe.naver.com/webprogrammer2/89

css 파일정의 기초

2009-12-29T01:49:00.000+09:00

layout.css

- 탑과 푸터부분, 게시판, 덧글 등 동일한 형식의 stylesheet를 포함 (덧글, 게시판, 타이틀 형태등은 100%width로 상위의 노드에서 width 설정시 동적으로 변할 수 있게끔 설계한다)

* 주의 : 앞으로 나오게될 디자인의 일관성을 고려하여 디자인팀과 협의하에 게시판스타일이나 탑,푸터등의 스타일을 정립하는것이 관건!

main.css

메인 페이지는 유니크하고 종종 변동되는 특성이 있기 때문에 메인페이지용 css는 따로 구성해둔다.

common.css

- 태그정의,폰트,링크,마진,패딩등의 요소와 자주쓰이는 선언등을 라이브러리화하여 구성한다.

- 자주쓰이는 라운딩박스 스타일이나 페이징, dotline, 보더스타일, 불릿등의 요소도 여기에 정의한다. (혹은 이 요소들은 layout.css 에??)

sub.css 혹은 각 서비스별 css 파일

서브 페이지에 각각 쓰이는 요소들을 정의한다.

내일은 ... 내가만든 불투명 배경에 뜨는 팝업창 소스를 ... 잊지말고 꼭넣어넣자..;

무서운세상이다

2009-12-26T19:38:00.000+09:00

핸드폰잃어버렸다가 찾았다.

그런데.....

핸드폰줄이없는채로 내손에 돌아온거다.

24일에 피방에 놓고왔는데..

25일날 갔더니 그런핸폰못봤다고 그러더라.

26일날 지인이 전화해봤더니 피방에있다고해서..

찾으러왔다.

보니깐 핸드폰줄이 없었다.....

ㅇ ㅏ..

슬프다.

ㅠㅠ;

radio 버튼 브라우저뷰 맞추기

2009-12-24T16:28:00.000+09:00

input type이 radio, checkbox 일때는
width:13px; height:13px; vertical-align:middle; 를 기본으로 설정하면 맞추기 쉽습니다.

[출처] input 의 차이나는 픽셀을 어떻게 잡아야 할까요? (하드코딩하는사람들) |작성자 yumi

보일러 고장난 크리스마스

2009-12-24T00:57:00.000+09:00

회사에서 하루에 그래도 못해도 3번은 화장실좀 가자 ...

내몸 내가 챙기자..

지각좀 그만하고...

다시 꼼꼼히 다 챙겨보자...

나.잘자라.

너도 잘자~

meta tag viewport

2009-12-23T14:38:00.000+09:00

http://blog.naver.com/ouksoo21?Redirect=Log&logNo=130071787737

모바일 기기에서 css가 먹지 않는 이유

2009-12-22T18:12:00.000+09:00

http://www.technologyquestions.com/technology/smartphones/202881-webbrowser-control-windows-mobile-ignores-css-position-absolute.html

Q,WebBrowser Control on windows mobile ignores CSS position:absolute

Hi,

I am using the WebBrowser control on windows mobile 6 sdk and when I load a
webpage it ignores the postion:absolute CSS attribute. Any idea how I can
allow the webBrowser control to act correctly on this property?

Also, does this same issue exist on smartphones too?

Re: WebBrowser Control on windows mobile ignores CSS position:absolute

Internet Explorer Mobile (WM6.0 and WM5.0) only support CSS level 1.
position:absolute feature include in CSS level2. So, smartphone also have
same issue.

Interest thig is it works fine in Windows Embedded CE 6.0 emulator. As you
knew, WM6 was built based on Windows CE 5.0 kernel.(not exactly same kernel)
I think it will be support next release of Windows Mobile.

min-width

2009-12-22T14:33:00.000+09:00

http://cafe.naver.com/domfam.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=1953

expression을 이용한 방법

css를 이용한 방법

ie와 ff 에서 노드 탐색 차이점

2009-12-18T15:07:00.000+09:00

http://www.permadi.com/tutorial/domTree/index.html

IE 와 FF의 차이점

2009-12-18T14:49:00.000+09:00

IE 와 FF(firefox) 의 차이점

1. hand 는 웹표준이 아니여서 익스에서만 된다. 다음부턴다음부턴 pointer 를 쓰자.

cursor:hand(x) --> cursor:pointer(0)

2. FF에서의 javascript 는 function 밖에서밖에서 변수 초기화가 되지 않는다.
예를들어 아래 소스를 보자.

[code]var timeInterval = 5000;

function startInterval() {
setTimeout("test()",timeInterval);setTimeout("test()",timeInterval);
}
function test() {
alert("hello!");
}
startInterval();[/code]

IE 에선 5초있다가 test() 를 실행하게되지만 FF 에선 바로 test() 가가 실행된다.
이유는 timeInterval 이 초기화 되지 않기 때문이다.
유의하자.

3. FF 에선 selectSingleNode 와 같은 XPATH 탐색 함수가 지원되지지원되지 않는다.
예를들어 IE 의 아래와같은 구문은

[code]var objobj = xmlObj.selectSingleNode("root/subnode");[/code]

FF에선안되고 아래와 같이 바꿔야 IE,FF 모두 쓸수있다.쓸수있다.

[code]var obj = xmlObj.getElementsByTagName("root")[0].getElementsByTagName("subnode")[0];[/code]

XPATH 가 웹표준이 아니었나?아니었나? 상당히 편했는데 하루빨리 지원됬으면 좋겠다.

4. IEIE 에서 노드 탐색시 .text 로 텍스트를 불러올수있는데 FF 에선 불가능하다.
아래 소스는 IE 에서는 가능하나 FF 에선 불가능하다.

[code]var text = xmlObj.getElementsByTagName("root")[0].text[/code]

모두 가능하게 하려면하려면 아래 소스를 쓰자

[code]var text = xmlObj.getElementsByTagName("root")[0].firstChild.nodeValue;[/code]

5. 위지윅 에디터 모드 변경법
IE 에서는에서는 어떤 오브젝트든 contentEditable="true" 라는 플랙만 주면 에디터 모드가 된다. 예를들면 아래와아래와 같다

[code]<div id="editor" contentEditable="true"></div>[/code]

FF 에서는 아래와같이 javascriptjavascript 로 designMode 를 On 시켜줘야 한다.

[code]editor.contentDocument.designMode="On";[/code]

FFFF 에서는 document 객체에서 designMode 를 켜줘야 하기때문에 iframe 으로 써야한다.

출처 : http://cranix.net/250

ie버그 정리된 사이트

2009-12-17T17:40:00.000+09:00

http://www.positioniseverything.net/explorer.html

웹 사이트 최적화 기법: UI 개발자를 위한 필수 지침서

2009-12-17T17:37:00.000+09:00

http://cafe.naver.com/itcpub/64

파이어폭스에서 document.body.scrollTop이 안된다?

2009-12-17T11:45:00.000+09:00

http://paranbarami.tistory.com/314

결론은 + "px"

cscss min-height 설정

2009-12-14T19:58:00.000+09:00

{min-height: 400px; height: auto !important; height: 400px;}

Moritaka Chisato_Ame

2009-12-13T23:38:00.000+09:00

해피데이

2009-11-27T14:33:00.000+09:00

행복해지고 싶은게

죄야?

행복도 필요없고.

편안해지고 싶은게

죄야?

별것도 아무것도 없는데

뭐가 가치있는 거고

뭐가 원하는 거야

됐다그래.

너 그냥 조용히 꺼져라

싫음 됐으니까

다시 좀 살아보자

아 속쓰려...................

웃으면서 좀 살아보자.

악순환의 반복도 싫고

.....................................

바보.

마츠다 세이코

2009-11-26T05:10:00.000+09:00

우울할때 보면 기분 좋아지는 사람. ^0^

미소녀가 넘 좋다. ..; 나 . 이상한건가?? ?

09년 11월 실내화주머니하나 달랑 들고

2009-11-24T02:11:00.000+09:00

기분 좋은 시작.

새로운 사람을 만나고 새로운 사람을 알아갈 수 있는 기회가 내게 열렸다.

아 왠지 겨울이 마구 따듯할 것만 같아. 이런 마음 자체로.

이젠 누구에게도 집착하지 않고

누구에게도 나를 맡기지 않고

나라는 자체를 즐기면서 살아야지

내가 원하고 좋아하는 것. 그리고 돈 될 만한 것들을 실컷 해봐가면서

죽기전에 후횐없도록 매일매일을 살아갈꺼다 ㅋㅋㅋㅋ

화장실에서 따뜻한 변기에 앉아서 이런저런 생각을 했다.

지금은 맥주 한캔 먹으면서 끄적이고 있고.

그래. 내가 너무 덜컸었다는 생각.

그리고 지나간 것에 미련을 갖지 말자는 생각.

지금 내 주변에 있는 사람들이 소중하고

내가 소중하고

가족이 소중하고

내가 경험했던 모든 것들이 소중하다.

똑같은 상처와 똑같은 나날들이 반복되는걸 알고있는대도

마음을 정리하지 못하는 바보가 되진 말아야지

비록 여자로서. 나인 먹었지만.

나이가 대순가.

아 완전 편해.

라고 생각하는 순간.

다 잘될 것이다.

구체적인 목표 날카로운 목표를 세우는것도 중요하겠지.

갑자기 에너지가 미친듯이 넘치는 듯한 기분이 든다. ㅎ; ;;;

일이 어느정도 안정이 되면

국악도 배우고 싶고..

미친듯이 사랑도 해보고 싶고..

사랑해서 아프거나 행복하거나 외롭거나

어쨌든 사랑은 좋은거다..ㅎㅎ

초딩적 생각을 이것저것 적어본것 뿐이지만.

초딩이라고 생각하고.

초딩과 같은 심플하고 저돌적인 마인드로 세상을 사는게

그게 젤 행복한 길일꺼다

...

아 놔 초딩이 너무 좋아.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

미치기 일보직전일때도 많지만.

갑자기 찾아온 무기력증

그리고 갑자기 찾아온 미칠듯한 외로움

나이고 뭐고

물흐르듯이 원하는 것을 향해 나아가자..

초딩처럼 . .. .. . .. ..간지초딩으로 ㅋㅋ;;

2009년 11월 24일 마음먹은 것

2009-11-24T02:00:00.000+09:00

마음먹은 것

1. 이력서 먼저 쓰자. 여기.저기. 일하면서 커리어를 기르고 사람도 많이 만나보고.

2. 사진. 미치도록 사진이 찍고싶은데?

3. 영어공부. 회화공부. 내 비록 한국인이고 언제 해외에 나가게 될 지도 미지수지만. 지구인으로 태어났으면 세계 공용어 쯤은 할 수 있어야 하지 않을까.

4. 혼자있는 것을 즐기자. 인간은 원래 외로운것. 외로움을 채워나갈 혼자놀꺼리를 찾아내서 하고 또 하는 것.

5. 게임은 적게 하고. 대화를 많이 하자. 그건 누구하고라도.

또이렇게앉아서

2009-11-18T02:17:00.000+09:00

왼쪽다리하나 접어서 몸에 붙이고 - 젤 편한 자세. 밥먹을때도 이자세.

또 이렇게 앉아서

또 고민중

단순하게 사는 법 / 이해인

2009-11-14T12:02:00.000+09:00

단순하게 살고 싶은 욕심으로

단순하게 사는 법을 연구하며

책도 읽고 토론도 많이 하지만

삶이 조금도 단순해지지 못함은 어쩐 일일까요.

'버리겠다''버리겠다'

내내 궁리만 하지말고

자꾸 결심만 키우며 안된다고 안달하지 말고

눈꽃처럼 순결하고 서늘한 결단을 내려야지요.

그래... 나 너무 힘들어왔다.

나 너무 힘들다.

보고싶다.

그냥 단순히.

내가 단순한 삶의 방향은 오직 너를 향해만 있었는데

그것조차도 미안한 일이 되버렸다.

서로의 실수 서로의 추억 서로의 사랑

세상을 단순하게 살수있고

그게 너를 향한게 아니라면

얼마나 좋을까

이렇게 아프고 힘들고 배고프고 허전하고 외롭고 슬프게만 만든건

그래 다 나때문이겠지

무얼해도 즐겁지 않은 건 무엇때문일까.

즐겁게 행복하게 기쁘게 웃으며 밝게 살아보고 싶다. 간절히

아무것도 아닌양 털어내고

아무것도 아닌것처럼 털어내고

좋아하는 음악을 듣고

좋아하는 공부를 하고

좋아하는 음식을 먹고

좋아하는 사진을 찍으면서

돈을 벌면서.

그렇게 살아야 바쁘게 살아야

다 잘되겠지 모든게 다 잘되겠지

그래도 너가없으면 모든게 의미없다고 자꾸 그런생각만 든다.

마음이 아픈데

서늘한 결단

그게 단순하게 사는 법일까?

이 단어가 나는 너무 무섭고 두렵게만 느껴진다.

두렵지 않으려면 부딪혀야 한다.

부딪히기 두렵다.

두렵지 않으려면 부딪혀야 한다.

부딪히기 두렵다.

두렵지 않으려면 부딪혀야 한다.

고독함도 외로움도 그냥 이렇게 시간을 흘러보내면서

그냥 그렇게 살아야 겠지.

내 아픔은 내 아픔일 뿐이고

내 눈물은 내 눈물일 뿐이고

그냥 그렇게만 살아야겠지.

언젠가

죽게된다면

아무렇지 않게 흘려보내지 못해서 미안했다고 말하고 싶다.

단순하게 살고 싶은 욕심으로

단순하게 사는 법을 연구하며

책도 읽고 토론도 많이 하지만

삶이 조금도 단순해지지 못함은 어쩐 일일까요.

'버리겠다''버리겠다'

내내 궁리만 하지말고

자꾸 결심만 키우며 안된다고 안달하지 말고

눈꽃처럼 순결하고 서늘한 결단을 내려야지요.

단순하게 사는 법이라고 검색해 보니

이 시가 나왔다.

내 삶의 아픔은 정말 무엇이였을까

차가운 겨울비가 구두에 스며들어 뼈속깊이 시리던 기억

눈물로 널 보내고 또 누워 또 울고 또 누워 또 울었던 기억

잔인한 내가 되어 모든 걸 빼앗아 오고 그러고도 아무렇지 않게 살아왔던 기억

잔인한 내가 되어

...

인터파크 하트이벤트

2009-11-12T19:41:00.000+09:00

위지아

2009-10-28T04:52:00.000+09:00

재미있는 사이트를 발견했다.

'최고를찾아가는사람들' 이라는 타이틀 보다는> 살짝 가벼운 지식의 모음이긴 하다.

그렇지만 똑같이 틀에 식어빠진 모모포털보다는 색다르고 재미있다.

http://www.wisia.com/

각 카테고리를 클릭하면 인기태그나 추천태그, 질문에 대한 베스트 챠트 등을 제공해준다.

광고가 적은 점 good. 우측상단에 구글광고&두어개 하단에 이미지광고 3개 이게 광고의 전부다. 포털을 보면 광고에 더 눈이가게되어서 정보를 보는데 신경쓰인다.

개인이 올린 챠트를 모아 구성한 점. 유저가 영자.?

누군가 이 사이트에 대해 묻는다면 '이슈의 차트화'를 모아놓은 사이트라고 말해주고 싶다.

형식은 어디선가 본듯하지만 이걸 한데모아서 보여주는 방식이 남다르다고 볼 수 있다.

재미있는 점은 각 챠트를 개인이 만든다는 점. 그 개인중에 위지아의 운영자가 숨어있을 수도 있겠지만.

메인에 걸리는 챠트는 어느정도 운영자의 손이 가겠지만.

오로지 챠트만을 위한 사이트.

얼마나 오래갈진 ? (악의섞인 발언은 아니지만-

신선.

그래 이젠 아무리 까도까도 또나오는 매트릭스 스미스요원과 같은 포털만 헤집어 팔 때는 지났다.

커피와 담배

2009-09-23T17:38:00.000+09:00

커피를 마시면 담배가 땡긴다

담배를 피우면 커피가 땡긴다

서로가 서로를 부르는 둘을 뭐라고 칭할 것인가?

커피와 담배

커피에 비해 담배는 인간에게 해롭다.

커피도 그다지 유익한 편은 아니다.

나같은 경운.

오랜동안 화장실을 못갔을 때 커피를 마셔주면 효과가 나타난다.

이것도 컨티션이 좋았을 때 얘기고 그렇지 못한 경우에는 커피와 담배 모두 효과가 없지만.

커피에 관해서 여러 연구자료들이 있다.

담배에 관해서도 마찬가지다.

그러나 이러한 모든 연구결과가 세간의 떠도는 소문과 이야기들을 애써 모르는 체 하고

그냥 즐김으로서 느끼는 작은 만족감.

그거면 되는거 아닌가?

커피와 담배라는 영화도 매우 마음에 들었고.

커피와 담배가 흑백영화라는 점은 더더욱 마음에 들었고.

사람이나 물건이나 너무 마음에 들어하다보면 내가 다칠수도 있겠지만

다칠 나를 생각하지 않고 현재 그것들과 함께하는 나 자체를

그냥 즐긴다.

흡연가의 끓어오르는 가래 뱉는 소리와

길거리의 무수한 담배 꽁초 쓰레기들과

자고 일어나면 깔깔하고 냄새나는 입안이

가끔 이런 커피와 담배의 스타일을 구기기는 하지만.

온몸을 따듯하게 하는 담배재 타들어가는 나즈막한 소리와

나.

이럴 땐 나도 혼자는 아니라고.

Catacomb

2009-09-23T17:29:00.000+09:00

카타콤.

Catacombs are ancient, human-made underground passageways or subterranean cemeteries composed thereof.^[1] Many are under cities and have served during historic times as a refuge for safety during wars^{[citation needed]} or as a meeting place for cults.^[2]^[3] The first burial galleries to be referred to as catacombs lie beneath San Sebastiano fuori le mura, in Rome. The derivation of the word itself is disputed and it remains unclear if it ultimately derives from the cemetery itself or from the locality in which it is found. There is no doubt however that the San Sebastiano catacombs are the first to be referred to as such.^{[citation needed]}

The word now refers to any network of caves, grottos, or subterranean galleries that were used in medieval times as refuges during wars, as worship places, or for burial of the dead.

(출처 http://en.wikipedia.org/wiki/Catacombs )

인간 유해들로 가득한 이곳. 카타콤

이것이 진정한 광기가 아닐까.?

여기서 수집가들의 광기와 비슷한 '어떤 것'이 보인다. 인간이 할 수 있는 한 많이, 남이 쉽게 접하지 못한 장소에 모음으로서 '추구하고 자 하는 어떤 것' 극대화 시킬 수 있다는 인간의 생각이 보인다.

어둠 속에 쌓여있는 수많은 해골과 뼈들을 상상해보라.

거기서 뿜어져 나오는 인간의 광기.

그것이 바로 카타콤이다. 카타콤 = 광기

미치도록 우울할 때 예전에 살았을 신을 믿는 인간들의 수많은 유해들을 떠올려 보았다.

이곳에 가면 무언가에 대한 미치는 듯한 열망, 알고자 하는 욕구, 이루어지지 않아서 슬프지만 그 이루어야할 것이 무언가조차 모르는 것에 대해 치미는 답답함. 이런 감정들을 공유하고 그 광기에 사로잡힌 어둠의 공기를 들이마실 수 있을 것이다.

20세기 사진의 거장전

2009-09-23T15:34:00.000+09:00

20세기 사진의 거장전 – 파리 아방가르드, 빛의 세기를 열다
프랑스 국공립 박물관 소장품

2009 / 9 / 10 (목) - 2009 / 10 / 29 (목)

11:00-20:00

한가람디자인미술관

성인 9천원,청소년7천원,어린이5천원

골드4장, 블루 2장 2,000원할인

['20세기 사진의 거장전 - 파리 아방가르드, 빛의 세기를 열다' 홈페이지 바로가기]

"프랑스국립도서관, 오르세미술관, 조르쥬 퐁피두센터와 같은 프랑스의 대규모 기관과의 협력과 저작권자 및 작품 소장가들의 협력을 통해 마련된 작품"이 찾아옵니다.

20세기 초 유럽아방가르드 사진을 중심으로 가장 사진다운 시각의 아름다움을 보여주는 작품들로 구성

전시구성

프레임: 처음 사진이 그림 그리는 기술로 발명되었던 19세기에는 회화적 사실주의에 입각하여 사진에 있어서도 ‘무엇이 찍혔는가?’, 즉 ‘피사체의 이름이 무엇인가?’가 가장 중요한 질문이었다. 하지만 인류에게 사진에 대한 경험이 축적되면서 단순히 ‘이름’이 아닌 ‘설명’과 ‘메시지’를 위한 사진이 등장하기 시작하였다. 이러한 문제를 다룸에 있어서 프레임의 선택은 아주 중요한 관심사가 되었다. 많은 예술가들의 단순한 배경에 보여주려는 대상을 중심에 배치하는 구성에서 벗어나 전경과 배경의 관계를 탐색하고 대상들을 중첩시키며 프레임의 안과 밖의 연결과 단절에 대한 탐구가 이루어졌다

빛의 효과: 사진은 ‘빛의 그림’이다. 회화가 안료를 이용한 그림이듯이 사진은 빛으로 그리는 그림이다. 사진술을 활용한 예술가들은 빛의 효과를 탐구함으로써 사진의 본질적 속성을 규명하고 여타의 매체들과 차별화된 사진적 특성을 찾고자 하였다. 도시 생활을 변화시킨 핵심 기술이었던 ‘전기’ 사용의 일반화도 빛의 예술에 대한 관심을 고조시켰다. 시시각각 변화하는 자연광의 효과와 밝음과 어두움의 조화와 대비는 그 자체로 새로운 시각적 화성을 창조하기에 부족함이 없어 보였다. 오늘날 디지털 사진가들이 손쉽게 구사하는 모든 표현적 기법들은 이십 세기 초 빛을 따랐던 그들의 도전 정신과 모험에 빚진 바가 크다.

부분과 전체: 화면 내의 주피사체가 갖는 비중이 줄어들면서 부분의 힘이 중요해지기 시작하였다.예술가들은 자신의 시각훈련은 물론이고 세상의 질서에 대한 탐구정신으로 대상의 일부분을 과감하게 주인공으로 삼는 사진을 만들었다.그 속에는 그들만의 독특한 유머 감각이 담기기도 하고, 현실의 다른 면이 포착되기도 하였다.

시선: 사진은 ‘바라보기’이며 동시에 ‘보이기’이다. 인쇄물을 통해 정보의 습득이 일상화되면서 간접적인 경험과 시각적 사고의 비중이 커진 환경에서 , “무엇을, 어떻게 바라볼 것이냐?”에 대한 해답을 찾는 과정이 바쁘게 이어졌다. ‘세상을 바라보는 카메라’와 그 카메라에 보여진 ‘세상을 탐색하는 인간의 눈’은 근대를 살았던 인류의 숨가쁜 여정을 상징적으로 보여준다.

Marcel Bovis, ReneJacques, AndreKertez,
Francis Kollar, Bruno Reuillart, Denise Colomb, Roger Parry

전시없는날 : 2009/9/28 2009/10/26
장 르    : 미술
주 최    : SBS, 오룸겔러리
문 의    : 02-3448-1060
주관/협찬/후원 :
주관_ (주)지엔씨미디어,프로덕션 작품
제공_ 우리들-케이디미디어 영상투자조합
후원_ 주한프랑스대사관, 주한프랑스문화원, 문화체육관광부(미정), 한국사진학원(미정)
협력_ 프랑스 국립박물관연합(RMN)
기 타    : 전시장내 화환반입은 금지합니다.

Title    : The Great Exhibition of French Photography
Subtitle    :
Period : 2009/9/10 (Thu.) - 2009/10/29 (Thu.)
Closed on : 2009/9/28 2009/10/26
Time : 11:00-20:00
Venue/Hall    : Hangaram Design Museum
Genre : Fine Art
Ticket Price : Adult 9,000 / Youth 7,000 / Child 5,000
Discount : 2,000won discount for Gold/Blue(BC Platinum/Woori V Platinum) Membership

Program    :

['The Great Exhibition of French Photography' English Homepage]

Artists :

http://www.sac.or.kr/Program/view.jsp?prog_id=14035

소보로빵

2009-09-15T08:14:00.000+09:00

http://kitchen.naver.com/recipe/10732

소보로빵 만드는 법

아트앤스터디

2009-09-10T11:28:00.000+09:00

미학 관련 공부를 할 수 있는 사이트

http://www.artnstudy.com/

On Photography - Susan Sontag

2009-09-10T09:50:00.000+09:00

이미지출처 : www.thevillager.com

I read this book a little bit in a bookstore about two month ago

수전손택의 이름은 많이 들어봤지만,

이름 이상으로 알게된건

<애니 레보비츠: 렌즈를 통해 들여다본 삶> 이라는 영화를 통해서였다.

책방에서 번역본을 조금 읽어봤었는데, 아무래도 원본을 읽는 것이

훨씬 명확하고 좋을 것 같아서 큰마음먹고 주문했다.

기대되는 책 중 하나.

Bittersweet Life

[javascript] 브라우저 높이 구하기

[javascript] ff에서 불투명 레이어 안먹힐 때

[javascript] 브라우저 너비, 높이 구하는 selector

ie 8.0 브라우저 버그 관련

[영화] 페데리코 펠리니(Federico Fellini)

[Music] 20세기 앨범커버 아이콘

[잡담] 검색의 비애

[잡담] 손님을..?

4G다

[tools] Smart Draw

[UI] 영상 "Hi" by Multitouch Barcelona

[Planning] 잡생각 대마왕 훈련

직장인의 하루

[conference] onoffmix 'OPEN'

Alley Cat 1984

BM 방법론

웹기획의 기본 - 사용자 경험(UX)의 5가지 계층 오래가는 웹기획& UX디자인

17) 웹기획의 기본 - 사용자 경험(UX)의 5가지 계층 오래가는 웹기획& UX디자인

[오래가는 웹기획 & UX 디자인]

17) 웹기획 기본 이론 - 사용자 경험(UX)의 5가지 계층

사용자 경험의 5가지 계층

좋은 제안서나 기획서를 쓰기 위해..

Web 3.0 And The Future Of The Internet - The Movie

[book] 웹사이트 벤치마킹의 9가지 패턴

차세대 웹을 선도할 표준 기술 HTML 5 & CSS3 & AJAX

Suga Shikao (スガシカオ) - Hachigatsu no Serenade (8月のセレナーデ)

Corinne Bailey Rae - Put Your Records On (live)

허니와클로버

Hirosue Ryoko - summer sunset

moritaka chisato - 바다까지 5분

nakamori akina - 北ウイング

문자중복버그 관련

ie테스터 다운로드 경로

css핵 정리

Netscape 4 제외시키기

Mac IE 4.5, Netscape 4 제외시키기

Mac IE 5 제외시키기

Win IE 4~5 제외시키기

Win IE 4~5, Mac IE 4.5~5 제외시키기

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

Win IE 6 제외시키기

star hack

underscore hack

hash hack

star 7 hack

xmlns hack

:root hack

Tantek box model hack

Win IE 5용 패스필터

Win IE 5.5용 패스필터

Win IE 5-5.5용 패스필터

모던브라우저용 패스필터

IE7에만 적용

IE 6 and below （IE6이하）

IE 7 and below （IE7이하）

IE 7 only （IE7전용）

IE 7 and modern browsers only （IE7과 모던브라우저）

Modern browsers only (not IE 7) （IE7이외의 모던 브라우저）

Recent Opera versions 9 and below （최근의 Opera9이하）Opera 9와 Safari 동시적용

Safari에만 적용Opera 9와 Safari 동시적용

링크 클릭시 위로 안올라가게

height 100% 높이의 레이아웃잡기

css 파일정의 기초

무서운세상이다

radio 버튼 브라우저뷰 맞추기

보일러 고장난 크리스마스

meta tag viewport

모바일 기기에서 css가 먹지 않는 이유

min-width

ie와 ff 에서 노드 탐색 차이점

IE 와 FF의 차이점

ie버그 정리된 사이트

웹 사이트 최적화 기법: UI 개발자를 위한 필수 지침서

파이어폭스에서 document.body.scrollTop이 안된다?

cscss min-height 설정

Moritaka Chisato_Ame

해피데이

마츠다 세이코

09년 11월 실내화주머니하나 달랑 들고

Recent Opera versions 9 and below （최근의 Opera9이하）
Opera 9와 Safari 동시적용

Safari에만 적용
Opera 9와 Safari 동시적용