본문 바로가기

전체 글

 (1836)
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 */ @..
정보 설계 - Information design 1. 정보 설계 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 하는 것 웹 사이트 조감도 시간과 비용 절감 계획상의 문제점 최소화 2. 정보의 순서와 정렬 명확한 콘텐츠 체계 알파벳순 가나다순 연대순 날짜순 시간순 지리 위치순 모호한 콘텐츠 체계 주제별 체계 작업 지향형 체계 사용자 구분형 체계 은유형 체계 혼합 콘텐츠 체계 중요 / 사용 빈도에 따른 콘텐츠 체계 3. 콘텐츠 분류 방법 경쟁사 벤치마킹 카드소팅 4. 정보 설계의 분류 네비게이션 시스템(Navigation System) 레이블링 시스템(Labeling System) 5. 사이트 구조 계열 구조(Sequential Stucture) : Prev Page Next Page 계층 구조(Hierarchical Structure) : 홈페이지..
콘텐츠 분류와 설계 - Content classification and design 1. 콘텐츠(Contents) 텍스트 정보뿐만 아니라 특정 사이트에 있는 모든 구성 요소 2. 매체 성격 분류 외부 콘텐츠 : 외부에서 얻은 모든 콘텐츠 내부 콘텐츠 : 인터넷 분야 자체 콘텐츠 3. 콘텐츠 생성에 따른 분류 프로듀서 콘텐츠(Producer Contents) : 사이트 제작자가 일방적 제공 컨슈머 콘텐츠(Consumer Contents) : 사용자에게 얻은 콘텐츠 4. 콘텐츠 비용에 따른 분류 유료 콘텐츠 무료 콘텐츠 5. 프로슈머적 콘텐츠(Prosumer Contents) 프로듀서(Producer) + 컨슈머(Consumer) 게시판 형태 마케팅 부담 절감 6. 웹 콘텐츠 기획 초기 콘텐츠 기획 및 구성 매니아 확보 콘텐츠 확장 대제 작업 논의 콘텐츠 리스트 정의
웹 사이트 분석 - Website analysis 1. 고려사항 사용자의 유형 / 형태 속성 일상 생활과 비즈니스와의 연관 어떤 가치를 중요하게 생각 정보를 어떻게 이용 서비스 콘텐츠 기능 필요한가 어떠한 방식으로 제공되길 바라는가 비즈니스의 성공에 어떻헤 기여하는가 2. 타케층 정의 연령별 성별 지역별 직업별 기업별 구체적이고 복합적 행동 패턴이나 특징 유저 세그멘테이션 타켓 정의 사용 시간 고려 3. 유저 프로파일(User Profile) 사이트의 기능 서비스 인터페이스 네비게이션 디자인 요구와 행동 패턴을 이해함 유저층 만족 이름 / 성별 / 사는 곳 / 직업 등 간단한 신상 정보 사진 인터넷 사용 패턴 숙련도 능숙도 요구 목적 행동 패턴 4. 유저 시나리오(User Scenario) 사용자의 경험을 기술 경험을 디자인 유저 프로파일 네비게이션 경..

티스토리툴바