LEVEL IS NULL

08-1 원 페이지 사이트 만들기 CSS를 사용해 원 페이지 사이트 만들기 웹 문서에 fullPage.js 플러그인 적용하기 원 페이지 사이트에서 내비게이션 지정하기 - 앵커 사용하기

07-1 뷰포트와 미디어 쿼리 알아보기 뷰포트(viewport): 화면의 크기나 기기의 방향을 체크할 때 사용하는 것 width=device-width: 문서 너비를 현재 기기의 너비에 맞춥니다 initial-scale=1: 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정합니다. 미디어쿼리(media query) @media [only|not] 미디어 유형 [and 조건] * [and 조건] @media screen and (min-sidth:921px) and (max-width: 1260px) {} 07-2 미디어 쿼리 사용하기 방법 1. 외부 CSS 파일로 정의하기 @import url(css 파일 경로) 미디어 쿼리 조건 방법 2. 웹 문서에서 직접 정의하기 07-3 가변 이미지 가변 이미..

06-1 웹과 타이포그래피 타이포그래피 (Typography): 활자 글꼴의 배열, 글자를 활용한 모든 디자인을 가르키는 말 06-2 빅 타이포그래피 빅 타이포그래피(Big Typography): 화면에 커다랗게 표시하는 텍스트 06-3 웹 폰트 크기와 색상 조절이 자유롭다. 모든 기기에서 볼 수 있다. 06-4 무료로 사용하는 구글 웹 폰트 fonts.google.com

05-1 풀스크린 배경 이미지나 동영상을 화면 전체에 가득 채워서 풀 스크린으로 보여주는 기법 05-2 이미지로 만드는 풀 스크린 배경 1. 풀 스크린 배경에 적합한 이미지 2. 화질이 좋은 이미지 3. 용량이 크지 않는 이미지 05-3 동영상으로 만드는 풀 스크린 배경 HTML5에는 태그가 이썽서 플러그인 프로그램 없이도 웹 브라우저에서 직접 도영ㅇ상을 재생할 수 있음 1. 동영상 파일은 용량이 작을수록 좋다 2. 로딩되는 동안 보여줄 포스터 이미지도 함께 준비 3. 가급적 오디오는 제거하고 넣는 것이 좋음 05-4 풀 스크린 배경에 어울리는 고스트 버튼 '고스트 버튼(Ghost Button)': 테두리나 배경이 투명하고 희미해서 버튼이 아닌 것처럼 문서 배경이 그대로 드러나는 버튼 장점: 배경 이미지..

04-1 한 페이지에 모든 내용을 담다! - 원 페이지 사이트 원 페이지(One Page) 사이트: 웹 사이트를 한 페이지로 만드는 것, 한 페이지에 모든 내용이 다 들어 있기 때문에 따로 메뉴를 선택하지 않아도 위아래나 좌우로 스크롤하면서 보고 싶은 내용을 찾아볼 수 있어 편리, 화면마다 다르게 디자인하면 스크롤할 떄 새로운 내용을 볼 수 있으므로 사용자의 호기심 자극, 전체 사이트를 한페이지로 만들거나 시작 페이지만 한 페이지로 만들기도 함 내용이 많을경우 내비게이션 바에 있는 메뉴를 클릭해 한 번에 원하는 위치로 옮겨 갈 수 있게 설계하는 것이 좋음 페이지를 로딩하는데 일반 사이트보다 시간이 걸리므로 텍스트와 이미작 화면 가득 채워져 있는 사이트보다는 여백이 많은 사이트를 원 페이지 사이트로 만드는..

03-1 그리드 시스템 웹 사이트를 구성할 때 콘텐츠를 유연하게 배치하기 위한 시스템 '960px의 12칼럼 그리드 시스템'이란 화면 너비를 960px로 하고 12개의 칼럼으로 나눈 그리드 시스템 [ 특징 ] 시각적으로 안정된 디자인 단순한 웹 디자인 내용을 원하는 대로 배치 03-2 그리드 레이아웃을 만드는 방법 4가지 방법1. 가변 그리드 레이아웃 사이트의 레이아웃을 백분율로 지정하는 것, 웹 요소 배치가 그대로 유지되기 때문에 단순한 레이아웃의 사이트에 적합 방법2. CSS의 float 속성을 사용한 그리드 레이아웃 float 속성은 특정 요소를 화면의 왼쪽이나 오른쪽으로 띄우고 다른 내용은 그 옆으로 흘러가도록 만드는 속성 방법3. 플렉스 박스를 사용한 그리드 레이아웃 그리드 레이아웃을 기본으로 ..

02-1 불필요한 요소는 최소하하다! - 플랫 디자인 플랫 디자인: 평평하고 납작한 디자인, 웹 요소에서 입체감을 주는 효과를 제거하고 단순하게 표현하는 기법 02-2 플랫 디자인, 이렇게 만들어야 한다. - 플랫 디자인에서 '직관성'이 제일 중요하다. - 일반적으로 6~8가지 색상을 메인 색상으로 사용함. - 타이포그래피도 중요한 역할을 함. 02-3 구글의 디자인 철학 - 머터리얼 디자인 구글 서비스나 안드로이드에서 일관되게 사용하고 있는 디자인 '플랫 디자인'이라는 경향을 받아들이면서 또 다른 구글의 디자인 철학이 더해진 구체적인 디자인 방법 02-4 콘텐츠에 집중하다! - 카드형 디자인 페이스북이나 핀터레스트 등 한꺼번에 많은 양의 정보를 표시해야 하는 사이트에서 내용을 카테고리별로 묶어 일부 내..

01-1 반응형 웹이란? 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여주는 웹 01-2 반응형 웹은 만능일까? 장점 1. 기기의 화면 크기나 해상도에 구애받지 않는다. 장점 2. 화면의 변화에 즉시 반응 장점 3. 어느 기기에서든 사이트 주소가 같다. 장점 4. 유지 관리가 편하다 장점 5. 최선 웹 표준을 따름 단점 1. 예전 브라우저 버전과 호환성에 문제가 있을 수 있음 단점 2. 사이트 디자인이 단순함 01-3 반응형 웹 디자인 패턴 살짝 수정 패턴: 화면 너비를 조절하면 레이아웃에는 변화 없이, 글자 크기나 이미지 크기만 변함 유동형 패턴: 살짝 수정 패턴과 비슷하지만 모바일 화면에서는 레이아웃이 바뀔 수 있음 칼럼 드롭 패턴: 여러 칼럼으..