Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

웹 프로그래밍

[웹 디자인] 디자인의 종류들을 알아보자.

✿도담도담 2018. 8. 31. 10:19

어제 웹 프론트앤드의 책을 사서 읽기 시작했는데

역시 책에는 많은 소중한 정보들이 있다.. 짜릿해..😚


책 초반에 많은 디자인 종류들이 나오는데 유용한것 같아 정리해보려고 한다.

.

.

첫번째, 플랫(Flat) 디자인.

영어 뜻 그래도 '평평'하고 '납작'한 디자인 이다.

위쪽에 있는 디자인을 말한다. 아마 흔히 볼수있는 디자인이다!

(부트스트랩에서도 이런 플랫 디자인으로 버튼이 나오구..!)


두번째, 카드형 디자인. (Card-Based Design)

https://www.pinterest.co.kr/

종종 사용하는 사이트인데 카드형으로 이루어져 있다.

여러 콘텐츠를 목록처럼 나열하는 페이지에 적합하다.


세번째, 그리드 레이아웃.

반응형 웹을 공부하면서 기본적으로 나오던 현재 가장 많이 사용하는 레이아웃 아닐까한다!

요즘 맥(화장품) 사이트를 리뉴얼 해보려고 만들었는데 요론 스타일이다.

그리드 레이아웃을 만드는 방법으로

가변 그리드 레이아웃, CSS의 float속성을 이용한 레이아웃, 플렉스 박스, CSS 그리드 레이아웃 이 있다.


네번째, 원 페이지 사이트 (One page)

말 그대로 한 페이지로 만든 웹 사이트다

스크롤하면서 바로 내용을 보여줘야 하기 때문에 일반 페이지보다 로딩 시간이 조금 더 걸릴 수 있다.


다섯번째, 패럴랙스 스크롤링 (Parallax Scrolling)

참고 사이트 : http://www.63.co.kr/


여섯번째, 풀 스크린 배경

다섯번째에서 참고 사이트가 패펄랙스 스크롤링과 동시에 풀 스크린 배경을 사용하고 있다.

사진 외에 동영상으로도 구현할 수 있다.


일곱 번째, 고스트 버튼.


많이 봐온 디자인이지면 책을 통해 이름을 알았다.

태두리나 배경이 투명하고 희미한 친구를 고스트 버튼이라고 한다.

고스트 버튼은 배경 이미지가 투명하게 드러나 깨끗하고 깔끔해 보이는 장점이있다.


여덟 번째, 캐러셀 (Carousel)

매번 슬라이드 배너라고 검색하고 있었는데 '캐러셀'이라는 이름이 있었다..😨

수화물 벨트 또는 희전 목마라는 의미로 무엇인가 반복해서 회전하는것을 뜻한다.


아홉 번째, 웹 폰트

폰트를 지정해 주지 않으면 또한 클라이언트 측에 내가 지정한 폰트가 없다면 내가 원하는 이쁜 웹사이트가 되지 않을것이다.

웹 폰트를 사용하면 크기와 색상 조절이 자유롭고 모든 기기에서 볼 수 있다.

https://fonts.google.com/

▲ 구글 웹 폰트 사이트