Programmers 책 02

제목: Do it! 프런트엔드 웹 디자인 입문
저자: 문성호

- HTML/CSS 공부 하기전에 용어를 알기 좋음

- 간단한 예제들을 알 수 있음

반응형 웹(Responsive Web) 

- 유동형 패턴

콘텐츠의 크기만 조절

- 칼럼 드롭 패턴

화면 너비가 좁아지면 칼럼들이 아래로 떨어지도록 구성

구현 방법론

- 가변 그리드

각각의 길이에 어울리도록 배치되어 크기에 맞게 배치, 픽셀 대신 백분율을 이용, CSS 적용

- 미디어 쿼리

다양한 접속 기기들의 조건에 따라 사이트의 레이아웃을 다르게 만드는 방법, CSS 적용

- CSS 프레임워크

-- 부트스트랩

가장 많이 사용하는 프레임워크, 기능 확장성이 높다, 홈페이지 : getbootstrap.com

-- 파운데이션

부트스트랩보다 먼저 발표된 프레임워크. 홈페이지 : foundataion.zurb.com

-- 스켈레톤

반응형 웹을 제작할 수 있는 CSS 파일을 묶어놓은 것, 다른 프레임워크에 비해 가벼운 코드가 특징. 홈페이지 : getskeleton.com

-> 스마트 기기 등 다양한 기기에 반응하는 웹사이트, 기기 환경에 맞춰 화면의 크기가 자동으로 조절

여러 방식 카드 디자인

- 플랫 디자인 : http://flatuicolors.com (색깔 고르는 사이트)

평평하고 납작한 디자인, 포토샵 대신 HTML5의 Canvas나 SVG로 이미지 처리, 플래시 애니메이션 대신 CSS나 JavaScript로 처리, 플랫 디자인이 대중화되기 전에 스큐어모피즘(skeuomorphism)을 사용, 사용성을 위한 단순함, 색상의 활용

-- 스큐어 모피즘

실제 존재하는 사물을 그대로 본떠 디자인에 반영(ios 아이콘 등)

-- 고스트 버튼

버튼이 배경을 그대로 투과해서 보여준다.

- 트랜지션

장면 전환, 이미지 회전

- 원 페이지 사이트

웹 사이트를 한 페이지로 만든다. 화면을 위아래나 좌우로 스크롤 하면서 보고 싶은 내용을 살펴볼 수 있어 편리, 전체 또는 스크롤 가능한 한 페이지로 제작

네비게이션을 이용해서 적용할 수 있다.(스크롤 또는 메뉴 클릭이동)

- 패럴랙스 스크롤링

바라보는 위치에 따라 물체의 위치나 방향이 다르게 보이는 것, 화면이 위아래 또는 좌우로 스크롤될 때 배경과 그 위에 있는 요소들이 각기 다른 방향으로 움직이게 하거나 동작 시간을 다르게 해서 마치 눈 앞에서 애니메이션을 보는 듯한 효과

패럴랙스 스크롤링은 배경과 배경 위의 각 요소들이 시간 차이를 두고 서로 다른 속도로, 또는 다른 방향으로 움직이게 해서 동적인 효과를 만드는 것으로 기본적으로 자바 스크립트 사용, Stellar.js와 ScrollMagic 등이 유명, parallax-scroll이라는 플러그인을 이용

- 머티리얼 디자인

웹과 앱을 통틀어 모든 개발 플랫폼에서 사용자 경험을 하나로 묶기 위해 구글에서 제시한 디자인 방법, 버튼의 요소의 가장자리에 그림자 효과를 추가

- 카드 UI

카드 형태로 사용자들이 콘텐츠에 집중할 수 있도록 초점을 맞춘 디자인 방식, 콘텐츠 중심의 정보, CSS를 사용해 카드의 크기나 위치 등을 지정, jQuery 플러그인을 이용해서도 제작 가능

- 풀 스크린 배경

이미지나 동영상을 화면 전체에 가득 채워 시선을 한눈에, 동영상으로 풀 스크린 배경을 만들 수 있다. 로딩하는데 어느 정도 시간이 걸린다.

CSS또는 jQuery플러그인을 이용, Backstretch.js플러그인과 이미지 뿐만 아니라 동영상까지 함께 배경 슬라이드 쇼로 만들 수 있는 Vegas플러그인을 다룬다. 

최신 브라우저에서는 MP4 형식 지원 하지만 이전 버전은 Ogg 형식 파일 지원, 풀 스크린 배경은 동영상 자동 재생이나 오디오는 제거 하는 것이 좋음