<웹페이지 구조>
섹션: 주제별로 묶은 것
메인,컨텐츠 영역: 중간부분
검색창: 서치바
= :햄버거 버튼
Header 해더 : 로고, 메뉴, 로그인 아이콘 등이 들어감
해더 안에 메뉴바- nav 네비
메인 비주얼(메인배너) : 첫화면에 가장 큰 사진등의 부분
Footer 풋터 : 사이트 맨 아래 부분, 사이트 안에 어떤 메뉴들이 있는지, 동의약관, 관련사이트등이 들어가는 부분
- 카피라이트: 사이트의 저작권 표시
오른쪽 위로 가기 버튼 : 업버튼
챗봇이나 업버튼처럼 홈페이지 내에서 스크롤을 해도 따라 다니는 버튼을 프로팅버튼(?)이라 한다.
>메뉴
1차 메뉴: 맨 처음 보이는 메뉴
2차 메뉴: 마우스를 올리면 보이는 메뉴
3차 메뉴: 그 아래 작은 글씨 메뉴
<웹표준성 & 웹접근성>
웹표준: 어느 브라우저를 사용하든지 똑같은 화면을 볼 수 있는 것.
웹 접근성: 노인이나, 장애인등 불편함이 있는 사람들이 웹페이지를 이용할 때 불편하지 않도록 개선하는 것
-HTML : 뼈대, 구조담당, 디자인 없이 글자만으로 구성
-CSS : 살을 붙인다, 디자인
-JS/JQUERY : 자바스크립트 --
<웹디자인 종류 >
그리드 디자인: 동일한 여백이 중요하다 (ex. 네이버- 심플하지만 단조롭다)
포털사이트는 양 옆이 여백이 넓다- 웹표준성 때문에( *웹표준성: 어떤 기기로 접속해도 불편하지 않도록 하는 것)
탈 그리드 디자인: 중간 광고등으로 가로 화면이 꽉 차게 연출하는 것 (활기차보이게 한다)
적응형 사이트: 사이트의 크기를 줄이면 내용이 짤리는 것 (ex. 네이버) - pc, 모바일, 태블릿 버전별로 디자인을 뺀다.
반응형 사이트: 사이트 크기를 줄이면 레이아웃도 같이 줄어들어 보고 있는 화면을 유지하는 것 ( ex. 카카오)
<와이어프레임>
:웹페이지 구조를 미리 짜보는 것
이미지는 fram Tool 로 표기한다 ( *fram Tool - 더블클릭하면 이미지를 넣을 수 있다.)
*아이콘 다운 사이트
Browse Fonts - Google Fonts
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
아이콘 크키는 4, 8의 배수를 지키면 좋다. / 모바일 아이콘은 최소 48 지켜주면 좋다.
-와이어 프레임을 만들어보며--
폴더 채로 정렬할 수 있다**는 걸 기억하자
전체화면 모드를 자주하며 글자나 아이콘 여백등을 체크를 자주 해주는 것이 좋을 것 같다.