본문 바로가기

Box

[책 리뷰] UX/UI의 10가지 심리학 법칙 보호되어 있는 글입니다.
[책 리뷰] 사용자를 유혹하는 UX의 기술 ( 33가지 디자인 원칙) 보호되어 있는 글입니다.
[Mobile] HTML5 추가된 태그 1. figure와 figcaption Element웹 문서안의 사진이나 그림에 설명글을 넣는 태그 봄에 피는 꽃입니다 2. address Element 제작자의 연락처 정보와 피드백 정보를 제공하는 태그 3. mark Elementtext에 형광펜으로 그은 것과 같은 표시를 하고자 할 때 사용하는 태그 독도는 大韓民國 대한민국 땅이다! 독도는 大韓民國 대한민국 땅이다! 4. hr 태그 웹페이지 안에 주제가 바뀔 때 사용. 태그 대신 사용 5. details태그 웹페이지의 세부정보나 일부에 대해 설명할 때 사용 태그 속성에 open, close 를 설정하며 속성 close시 제목 클릭하면 세부내용 열림. 복사중... 25% 초당 전송량: 452KB/s 복사할 파일명: /home/rpausch/raycd...
[Moblie] html5 Web Form 1. input Element ● input 유형 유형 코드 날짜와 시간 (type = month,week, datetime, datetime-local) 숫자 (슬라이드막대) 숫자(스핀 박스) 검색 URL 이메일 색상 ● input 속성 - max 와 min | 최소값 및 최대값 지정 - list | text input 폼 요소에 키워드를 입력하는 순간 미리 입력되어 있는 내용과 입력하면 추천 키워드로 제안해 줌. - pattern | 제약조건 지정 ex) (010|011) - \D{3,4} -\D{4} - placeholder | 입력 힌트 표시 지정 - required | 입력값 요구 - autofocus - novalidate | 자동 유효성 검사 해제, 태그에 속성지정 3. output Elem..
[Moblie] meta 태그와 link 1. 문서타입 2. 메타태그와 뷰포트 - Width | 가상해상도, device-width지정하면 물리적 해상도와 웹 브라우저의 해상도를 일치 - initial-scale | 초기확대 축소비율 - maximum-scale | 최대 확대 비율, 1.0은 확대 안됨 - minimum-scale | 최대 축소 비율, 1.0은 축소 안됨 - user-scalable | 줌 컨트롤 or 핀치 줌으로 확대 축소 허용 여부 - 아이폰 상태바 컬러 지정, default(회색) black black-translucent 3. link태그 ● 홈 화면의 바로가기 링크, png파일로 72x72 ● 아이폰 화면이 로딩될 때 스타트업 이미지 지정
컬러의 아이디어 및 영감이 필요하세요? COLOURlovers사이트는 색상, 배색 팔레트, 패턴, 최근 컬러동향을 알 수 있습니다. 분야별로 패션, 웹, 프린트 등 나누어 컬러패턴을 보여 줍니다. 어도비에서 제공하는 Adobe Kuler 적절히 배색된 다양한 색상 테마를 볼 수 있고 Adobe CS프로그램에서 테마를 불러와 사용하거나 내가 만든 색상배색을 Kuler에 올릴 수도 있습니다. CS4 Photoshop을 이용해서 사용하는 방법은 MR. Travel님의 블로그에 잘 나와 있어요. Color Scheme Designer는 간단한 조작으로 mono, complement, triad, analogic 등 컬러 배색을 도와 줍니다. Dribbble는 웹, 앱, 모바일 디자인(사진 & 이미지)를 올리는 사이트인데 이미지를 클릭하고 들어가면 이..
Html5 브라우저별 호환 비교표 위의 이미지에서 볼 수 있듯이 findmebyip 에서 Html5의 요소 및 속성과 CSS3 속성 등 (MAC 과 Window) 브라우저별 지원여부를 참고할 수 있도록 제공합니다.
웹디자인시 960px 너비의 Grid System으로 빠르고 깔끔하게 균형잡힌 레이아웃 만들기 최근 모니터가 최소 1024 x 768의 해상도 지원하므로 웹사이트 디자인시 어느 브라우저나 모니터에 가로 스크롤바 없이 잘 보이도록 960px 너비로 정돈되고 균형잡힌 레이아웃을 잡는데 도움을 주는 www.960.gs의 960 Grid System(css가 포함된 html , png파일 제공)을 이용하면 편리합니다. www.960.gs 사이트 12colum Grid 16colum Grid Custom CSS Generator HTML Layout Generator 이 외의 사이트로는 http://www.gridsystemgenerator.com/
크로스브라우징 테스트 프로그램 및 사이트 웹표준과 크로스브라우징때문에 익스플로러, 파이어폭스, 오페라, 사파리, 크롬등 호완성 테스트를 해야하는데 유용한 프로그램과 사이트 입니다. IE버전별 테스트 가능한 IETester (다운로드) IETester는 프로그램을 다운받아서 설치하고 사용하는 것과 달리 아래 사이트는 웹페이지에서 처음 사용시 플러그인만 설치하면 ie는 물론 ff, safari, opera, chrome 등 버전별로 테스를 할 있습니다. 원하는 브라우저 클릭하고 창 뜨는데 좀 시간이 걸려 처음엔 저도 왜 반응이 없지? 하며, 몇번이나 클릭했었는데 조금 뒤에 창이 떴습니다. ^^; 어떤 사이트는 캡쳐해서 보여줘서 불편하고 한계가 있었는데 spoon.net은 로컬에 각각의 프로그램을 설치하고 사용하는 것처럼 보여줍니다. 강추하는사이트 ..
스위시맥스 효과 미리보기