본문 바로가기

소프트웨어

 (16)
웹 기획 - 4 화면 정의서 헤더 .GNB와 로그인 전후 화면 설계 ..회원 가입 기능이 있는 사이트는 로그인 전후 화면을 구분해서 설계 ..GNB는 중요한 메뉴를 왼쪽에 배치, 계속 수정 푸터 .이 위치가 화면의 끝 .이용 빈도가 낮은 메뉴를 주로 배치 ..블로그 ..회사소개 ..이용약관 ..개인정보처리방침 ..고객센터 .웹 관련 법 정보 배치 ..전자상거래 등에서의 소비자 보호에 관한 법률 제10조(사이버몰의 운영) ..전자상거래 등에서의 소비자 보호에 관한 법률 시행 규칙 제7조(사이버몰 운영자표시) ..상호 및 댚자 성명 ..영업소가 있는 곳의 주소 ..전화번호, 전자 우편 주소 ..사업자 등록 번호 ..사이버몰의 이용약관 ..개인정보 처리 방침 : '정보통신망 이용 촉진 및 정보 보호 등 법률 시행령 제14조'..
웹 기획 - 2 기능 정의서 1) 기능 코드 .이용자 화면과 관리자 화면 구별 .각 화면의 메뉴 이름과 번호를 조합 .동시에 여러 웹 제작 시 프로젝트 구분 2) 뎁스 .기능의 위치 .웹 사이트의 구조를 염두하고 작성하는 것이 편리 3) 구현 대상, 작업 요소, 관리자 연동 .단순 디자인 .개발 4) 기능 정의 .로그인, 로그아웃 간략하게 정의 .기능의 역할, 이용 방법, 개발 요소 작성 정책 정의서 1) 회원 가입 및 상품 구매 정책 2) 게시판 정책 3) 정책 정의서는 주기적으로 업데이트 4) 포인트, 배송, 교환/반품/환불, 게시판, 고객 관리 * 부가세 (판매가의 10%) + 카드 결제 수수료 (판매가 x3.4%)
웹 기획 - 1 웹 사이트를 왜 만드는가? 사용자의 목적을 달성하기 위한 도구 회사 홍보, 제품 판매, 고객 유치를 위한 것인지 분명하게 정의 사용자에게 어떤 유익을 줄 수 잇는가? uesr value (ex 화살표 청년) 웹 기획은 창의적으로 문제 해결책을 찾고, 실현될 수 있도록 계획하는것 눈에 보이는 모든 것을 웹사이트에 맞춰 생각하기 차별화 포인트 당연한 것을 의심하기 이용자의 행동 특성을 정확하게 이해하기 이용자층 조사 -> 웹 디자인 수집 -> 분석 및 적용 웹 사이트 제작 과정 1)분석 단계 .웹 사이트가 갖추어야 할 기능 정의 .정책( 활동 범위, 게시판 작성 권한) .벤치 마킹 ..이용자층 분석, 디자인, 서비스, 마케팅, 종합 평가 .일정 산출 2) 설계 단계 .사이트 구조 설계 ..기능 정의서를 토대..
HTML+CSS 반응형 웹 (마지막 이야기) viewport .webkit 기반 모바일 브라우저의 기본 뷰포트 너비 980px .viewport 지정, 태그 사이 작성 .. ..content 속성 속성 설명 사용 가능한 값 기본 값 width 뷰포트 너비 device-width | 크기 브라우저 기본 값 height 뷰포트 높이 device-height | 크기 브라우저 기본 값 user-scalable 확대/축소 가능 여부 yes | no yes initial-scale 초기 확대/축소 값 1~10 1 minimum-scale 최소 확대/축소 값 0~10 0.25 maxumim-scale 최대 확대/축소 값 0~10 1.6 크롬 '디바이스 모드' http://mediaqueri.es/ : 미디어 쿼리를 이용한 반응형 웹 사이트 소개 가변 그리드 ..
CSS 7번째 - 애니메이션 transform 속성 - 이미지 회전, 이동 .transform : 변형함수; .2차원 변형 함수 변형 함수 설명 translate(tx,ty) 지정한 크기만큼 x축, y축 이동 translateX(tx) x축 이동 translateY(ty) y축 이동 scale(sx,sy) 지정한 크기만큼 확대/축소 scaleX(sx) x축 확대/축소 scaleY(sy) y축 확대/축소 rotate(각도) 지정된 각도만큼 회전 skew(ax, ay) 지정한 각도만큼 x축, y축 왜곡 skewX(ax) x축 왜곡 skewY(ay) y축 왜곡 .3차원 변형 함수, 이전 브라우저를 위해 '-webkit-', '-moz-' 접두사 붙여 사용 변형 함수 설명 matrix3d(n,[,n]) 4*4행렬 이용하여 이동, 확대/축소..
CSS 6번째 - 선택자 combination selector descendant selector- 모든 하위 요소에 스타일 적용 .부모 요소에 포함된 하위 요소 모두에 스타일 적용 .상위요소 하위요소{속성:속성 값;} child selector - 자식 요소에만 스타일 적용 .상위요소 > 자식요소 .바로 아래 자식 요소에만 스타일 적용 adjacent selector - 가까운 형제 요소에 스타일 적용 .같은 부모 요소를 가지는 요소들을 형제 관계, 먼저나오는 요소 '형 요소', 나중에 나오는 요소 '동생 요소' .요소1 + 요소 2, 요소 1 이후 맨 먼저 오는 요소 2에 스타일 적용 sibling selector - 형제 요소에 스타일 적용 .요소1 ~ 요소2 .요소 1 뒤에 오는 모든 요소 2 요소에 적용 속성 선택자 [..
CSS 5번째 - CSS 포지셔닝 포지셔닝 : 박스 모델을 배치하는 것 box-sizing 속성 - 박스 너비 기준 정하기 .box-sizing : content-box (기본 값) | border-box .width 속성 값을 콘텐츠 영역 너비 값으로 사용할 지, 테두리 포함시켜 사용할 지 결정 float 속성 - 왼쪽이나 오른쪽으로 배치하기 .float : left | right | none .이미지와 텍스트 나란히 표시하려고 할 때 사용 clear 속성 - float 속성 해제 .clear : none | left | right | both .float 속성을 이용하여 배치하면 다음의 다른 요소도 똑같은 속성이 전달됨, 이를 해제하는 것이 clear 속성 로렘 입숨(Lorem Ipsum) - 의미없는 텍스트 문단 생성 .http:/..
CSS 4번째 - 레이아웃 스타일 블록 레벨 요소/인라인 레벨 요소 .블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 한 줄을 차지하는 요소, 너비 100%, , 태그 .인라인 레벨 요소 : 콘텐츠만금만 영역을 차지하고 나머지 공간에 다른 요소, , 태그 박스 모델 .콘텐츠 영역, padding, border, margin 등으로 구성 width, height 속성 - 콘텐츠 영역의 크기 .width : | | auto(기본 값) .height : | | auto .인터넷 익스플로어 6에선 width 값 = 콘텐츠 + 패딩 + border display 속성 - 화면 배치 방법 결정 .block 속성 : 해당 요소를 블록 레벨로 지정 (한 줄에 한개만 배치) .inline 속성 : 블록 레벨을 인라인 레벨로 변경 .inline-bl..

티스토리툴바