당 떨어질 땐 초코딩

타이포그래피 : 활자 서체의 배열, 즉 글자를 활용한 모든 디자인을 가리키는 말 폰트 : 문자와 숫자, 특수 기호 및 서체와 굵기 등이 완벽하게 구현된 글자 디자인 모음 사용 이유 1. 크기와 색상 조절이 자유로움 2. 읽기 쉬움 - '나눔고딕' 폰트를 많이 사용 구글 웹 폰트 - 자세한 사용방법 : https://cho-coding.tistory.com/171 [CSS] FONT - 글꼴 font-family : 글꼴 지정 - 두 개 이상의 글꼴 이름윽ㄹ 지정할 때에는 쉼표(,)로 구분 body { font-family : "맑은 고딕", 돋움, 굴림 } 위와 같을 때, 맑은 고딕이 없으면 돋움을, 돋움이 없으면 굴림을 적용하.. cho-coding.tistory.com 빅 타이포그래피 : 방문자의 시..

One Page Site 원 페이지 사이트 : 웹 사이트를 한 페이지로 만드는 것 - 한 페이지 안에 모든 내용이 다 들어있기 때문에 따로 메뉴를 선택하지 않아도 화면을 스크롤하면서 내용을 볼 수 있음 - 스크롤을 할 때 마다 새로운 내용을 볼 수 있으므로 사용자의 호기심을 자극할 수 있음 - 예시 : http://thus.co.kr/ https://datacenter.navercorp.com/ko/index.html 데이터센터 ‘각’ 2013년도 전력 사용량 15,933MWh 2014년도 전력 사용량 52,718MWh 2015년도 전력 사용량 72,629MWh 2016년도 전력 사용량 84,317MWh 2017년도 전력 사용량 105,948MWh 2018년도 전력 사용량 139,109MWh 데이터센터 ..

풀 스크린 배경 : 이미지나 동영상을 화면 전체에 가득 채워서 풀 스크린으로 보여주는 기법 - 사이트에 접속하자마자 방문자의 시선을 한눈에 사로잡을 수 있음 - 주로 원 페이지 사이트에서 주로 사용하지만, 첫 화면에만 사용할 수 있음 기대 효과 - 기존 사이트를 그대로 사용하면서도 사이트 방문자들에게 사이트의 주제나 분위기를 단번에 전달함 장점 - 내용이 한 화면씩 바뀌는 경우에 적합 - 바뀌는 화면마다 풀 스크린 배경을 사용하면 더욱 효과적 단점 - 처음 사이트를 로딩하는 데 어느 정도 시간이 걸림 - 사용자들이 많거나 모던 브라우저 사용자들이 많이 접속한다면 풀 스크린 배경 사용을 자제하는것이 좋음 - 화면에 표시할 내용이 많은 경우에도 풀 스크린 배경은 적합하지 않음 풀 스크린 배경 : 이미지 - ..

카드 UI : 담고 있는 정보의 양에 따라 자유롭게 크기가 조절되는 카드 형태 - 사용자들이 콘텐츠에 집중할 수 있도록 초점을 맞춘 디자인 방식 - 단조로운 화면 구성을 개선할 수 있는 디자인 - 보통 한 화면에 여러 개의 카드가 표시되기 때문에 카드에 테두리를 둘러 콘텐츠를 감싸거나 색상을 달리함 - 대표적인 예시 : https://www.pinterest.co.kr/ Pinterest - 핀터레스트 계정을 만들거나 Pinterest에 로그인하세요. 레시피, 집 꾸미기 아이디어, 스타일 관련 아이디어 등 시도해 볼 만한 다른 아이디어를 찾아보세요. www.pinterest.co.kr 기대효과 - 선과 카드 색상, 배경 색상이 확실하게 구분되고 콘텐츠에 신경을 집중할 수 있음 - 사용자가 콘텐츠 정보를 ..

플랫 디자인 : 웹 요소에서 입체감을 주는 효과들을 제고하고 단순하게 표현하는 기법 - '평평'하고 '납작'한 디자인 - 납작하다 : 깊이를 제거해 입체감을 없앴다는 의미 #깊이 : 그림자와 경사, 그라데이션 등 웹 요소를 입체적으로 보이기 위해 사용하는 여러가지 효과 장점 - 사용자의 시선을 분산시킬 수 있는 복잡한 요소들을 빼고, 중요한 것만 남기기 때문에 콘텐츠에 집중할 수 있음 직관성 - 디자인적인 부연 설명을 하지 않아도 사용자가 직관적으로 이해해서 클릭하거나 탭할 수 있도록 유도 - 화려하게 보이기 위한 그림자나 입체적으로 보이기 위한 깊이, 반사 효과 등의 추가적은 효과들은 배제 - 단순히 사각 형태로 삽입하거나 텍스트와 이미지를 같이 겹쳐놓는 오버레이 형태로 배치에 시각적인 효과를 줌 - ..

유동형 패턴 - 모바일 화면을 제외한 대부분의 화면 사이트의 레이아웃을 그대로 유지하면서 브라우저 창 너비에 따라 콘텐트의 크기만 조절 - 아주 큰 화면에서는 콘텐츠 영역의 넓이를 일정하게 유지하기 위해 좌우여백을 남겨둠 - 모바일 화면에서는 콘텐츠가 수직으로 쌓여 표시 - 레이아웃이 똑같이 유지되면서 화면 안의 이미지나 동영상 등의 콘텐츠 크기가 달라짐 칼럼 드롭 패턴 - 여러 칼럼으로 구성된 레이아웃에서 흔히 사용하는 패턴 - 화면 넓이가 좁아지면 칼럼들이 아래로 떨어지도록 구성 - 모바일 기기 화면 크기가 되면 모든 칼럼이 하나씩 수직으로 배치 - 화면 넓이를 줄였을 때, 화면을 벗어나는 콘텐츠 칼럼이 라래로 옮겨지면서 레이아웃이 바뀜 레이아웃 이동 패턴 - 칼럼 드롭 패턴과 유사하게 화면 크기에 ..