본문 바로가기

01_인터랙션디자인은 무엇인가 1990년 IDEO의 중역 이었던 빌 모그리지(Bill Moggridge)가 기존의 모든 개념이 집약되어있었지만 확실히 기존과는 다르고 사용하는 제품을 통해 사람들을 연결시키기위해서는 필요했던 새로운 방법론을 인터랙션 디자인이라 불렀다. 인터랙션 디자인은 사람과 제품이나 서비스 사이에 벌어지는 인터랙션을 조정하는 기술이다. 인터랙션 디자인은 기술(art), 즉 가구 제작과 같은 실용기술이다. 과학이 아니다. 인터랙션 디자인은그 자체가 가진 컨택스트적 특성에 기반을 둔다. 인터랙션 디자인은 해당 제품이 존재하는 시간과 컨텍스트상에서만 유용하다. 인터랙션 디자인은 제품/서비스의 동작, 즉 그 제품이나 서비스가 어떻게 일하는가와 관련이있다. 인터랙션 디자인은 사람들이 제품을 '통해' 연결되도록하는 것이지 해당.. 더보기
이미지 바꿔치기_접근성이 뛰어난 이미지탭 롤오버 ----------------------------------------------------------------------- Home Guide Magazine Archives ----------------------------------------------------------------------- 더보기
이미지 바꿔치기_파크방법 숨기고자하는 텍스트의 text-indent값으로 아주 큰 음수값을 지정 화면상에 텍스트가 있기는 하지만 아주 큰 값을 갖고 있어서 해상도가 매우 높은 모니터에서도 절대 보이지않는다 #phark { height: 26px; test-indent: -500px; background: url(phark.gif) no-repeat; } The Phark Method 더보기
이미지 바꿔치기_LIR방법 텍스트를 감추기위해 display 속성을 사용하는 대신 텍스트를 포함하는 태그의 높이를 0을 지정하고 padding-top값을 바꿔치기할 이미지와 같은 값으로 지정 별도의 span을 슬 필요가없다. ---------------------------------------------------- #lir{ padding:90px 0 0 0; overflow:hidden; background: url(lir.gif) no-repeat; height: 0p; /* 대부분의 웹브라우저를 위한 명령 */ height: 90px; /*IE5를 위한 명령*/ } Leahy/Langridge Image Replacsment ---------------------------------------------------- 대.. 더보기
이미지 바꿔치기_FIR방법 css의 background(혹은 background-image)속성을 사용해 텍스트 대신 이미지를 표시하도록함 id값을 부여해 이 머리글을 css로 완벽하게 제어 ------------------------------------------ #fir {width:200px; height:50px; background: url(fir.gif) no-repeat;} #fir span{display: none;} Father Image Replacement ------------------------------------------ 마크업을 수정하지않고 css로 이미지를 지정했지 때문에 css를 지원하지 않는 블주어나 장치에서는 이미지 텍스트를 확실하게 표시 마크업을 수정할 필요없이 css파일만 수정하면 쉽게.. 더보기