본문 바로가기

Python_WEB

(95)
게슈탈트 심리학 - Gestalt psychology 1. 게슈탈트 : 형, 형태 독일어 2. 게슈탈트 심리학 : 인간의 심리적으로 형태를 어떻게 인지하는지에 대한 기초 원리 근접한 것끼리 유사한 것끼리 닫힌 모양을 이루는 것끼리 좋은 연속을 하고 있는 것끼리 좋은 모양을 만드는 것끼리 3. 지각 심리학 : 인간의 눈과 두뇌가 지각 과정에서 어떻게 작용하는가를 측정 4. 두 종류의 다른 기능을 가진 6개의 버튼을 조작하는 4가지 방법 스타일이 모두 일정하여 구분이 모호하지 않게 배치한다 근접성의 원리로 스타일이 분리되게 배치한다. 근접성과 형태의 유사성으로 일관성 있는 그룹핑을 이룬다. 근접성 및 형과 색의 유사성으로 스타일이 효과적으로 그룹핑한다. 5. 사용자가 형태를 지각하는 원리 근접성 유사성 연속성 패쇄성 형과 배경 6. 근접성 가까운 것끼리 묶어서..
사용성 테스트 - Usability Testing 1. 사용성 테스트 패턴을 직접 관찰 단서를 찾아내는 과정 프로젝트 초반 되도록 일찍 하여 문제점 찾아 수정 개발 일정을 조정할 필요 없음 소규모 테스트 웹 제작 실무자 모두 함께 발견한 문제점은 즉시 고침 의사 결정의 수단으로 사용 2. 테스트 정의 > 태스크 정의 > 방법론 정의 > 테스트 프로세스 정의 > 테스트 > 결과 요약 > 개선안 반영 테스트 정의 : 테스트를 수행하는 전체 목적(사이트 목표 / 유저 목표) 태스크 정의 : 필수 질문 사항 정리 / 주요 이슈 정리 / 과업 리스트 작성 방법론 정의 : 테스트 방법 / 참가자 / 테스트 장소 / 세션 소요 시간 / 작성이 요구되는 문서 정의 테스트 프로세스 정의 : 테스트 진행 순서 정의 테스트 : 오리엔테이션 / 과제시작 / 테스트 체험 / ..
사용자 중심 디자인 - User Centered Design 1. 사용자 중심 디자인(User Centered Design) 파워 유저나 초보자를 제외한 일반 사용자를 중심으로 구축 2. 유용성 웹 사이트 이용이 얼마나 쉽고 만족스러운가? 습득 가능성 : 배우기 쉬움 기억 가능성 : 이용 방법을 기억하기 쉬움 효율성 : 효율적으로 이용할 수 있어야 함 신뢰성 : 잘 작동된다는 신뢰감 사용자 만족도 : 사이트를 사용하면서 만족감을 느낌 사용자 개인마다 다름 3. 인터페이스 디자인 인터랙티브 인터페이스 디자인 : 컴퓨터와 인간 사이에서 상호 작용 실제 사용 행동을 다양한 방법으로 분석 심성 모형 정신 모형 및 인지 능력과 일치하지 않는 디자인의 문제점 파악하여 개선안 제시 프로토타입 제작 편의성 및 사용자의 의견을 평가 보완 4. 유용성을 위한 웹 인터페이스 기능성을..
HTML5 - 190701 Basic Study 69(반응형 웹) 1. HTML Code 메뉴1 메뉴2 메뉴3 있는 이것을 능히 보이는 투명하되 이상의 낙원을 칼이다. 위하여 같이 힘차게 오직 듣는다. 뭇 창공에 천지는 말이다. 같이, 있는 되는 열매를 말이다. 있는 이것을 능히 보이는 투명하되 이상의 낙원을 칼이다. 뭇 창공에 천지는 말이다. 같이, 있는 되는 열매를 말이다. 2. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; box-sizing: border-box; } header { width: 100%; background: #000; } nav ul { height: 50px; margin: 0; list-style: none; background: #000; color: w..
HTML5 - 190701 Basic Study 68(Cafe 페이지 제작) 1. HTML Code 여기는 패널창입니다. 옆에서 나오는 창입니다. [닫기] 카페 소개 오시는 길 이 달의 추천 카페 소개 영업 시간 : 오전 9시 ~ 밤 10시 휴무 : 매주 수요일 (수요일이 공휴일일 경우 수요일 영업, 다음날 휴무) 오시는 길 서귀포시 안덕면 사계리 oooo-ooo 제주 올레 10코스 산방산 근처 이 달의 추천 핸드드립 아이스커피 1인분 기준으로 서버에 각얼음 5조각(한조각의 20cc) 넣고 추출을 시작한다. 평상시 보다 원두의 양은 2배 정도 (20g)와 추출액은 얼음 포함해서 200cc까지 내린다. 아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다 My times with Coffee 2. CSS Code @charset "utf-8"; /* CSS Document */ * {..
HTML5 - 190701 Basic Study 67(그리드 시스템) 1. HTML Code 그리드시스템 모바일 메뉴 테블릿 메뉴 데스크탑 메뉴 welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world welcome to my world 2. CSS Code @cha..
HTML5 - 190701 Basic Study 66(반응형 웹 기초 구성) 1. HTML Code 반응형웹을 만들자 박스 1 박스 2 박스 3 2. CSS Code @charset "utf-8"; /* CSS Document */ /* 모니터용 스타일시트 */ @font-face { font-family: '나눔고딕'; src: local('NanumGothic'), url('NanumGothic.eot'), url('NanumGothic.ttf'), url('NanumGothic.woff'); } h1{ font-family:"나눔고딕" } /* 공통스타일 */ *{ margin:0 auto; padding:0; } h1{ background:beige;/* 적용이 안된다 */ border:3px dotted black; } section{ border:2px solid bl..
HTML5 - 190701 Basic Study 65(프린터, 모니터 CSS) 1. HTML Code 안녕하세요 welcom to welcome to world 감사합니다 2. 모니터용 CSS @charset "utf-8"; /* ex01-mo.css - 모니터용 스타일시트 */ /* CSS Document */ h1{ background:red; } @font-face { font-family: '나눔고딕'; src: local('NanumGothic'), url('NanumGothic.eot'), url('NanumGothic.ttf'), url('NanumGothic.woff'); } h1{ font-family:'나눔고딕' } 3. 프린터용 1 CSS @charset "utf-8"; /* ex01-pr.css - 프린터용 스타일시트 */ /* CSS Document */ @..