Hiio.com

 안녕하세요.

 지난번에 포스팅했던

1. <포트폴리오> 웹 사이트 제작 - Reference _무료 웹 템플릿 사이트

https://hiio.tistory.com/6

이 사이트들 중에서 고민한다가 제가 원하는 디자인의 방향성과 가장 근접한 템플릿을 골라 봤습니다. 

- Bato - 

바로 이 템플릿인데요. 

가장 심플하면서도 제가 원하는 이미지를 잘 보여주고, 이러한 이미지들을 갤러리 형식으로 보여줄수 있다는 것입니다. 

그럼 구성 방식을 차례대로 한번 살펴 보겠습니다.

1. Main Image - 메인 이미지

보시는 것과 같이 메인이미지가 페이지의 좌측, 절반 정도 크기로 배치 되어있습니다.

메인 이미지는 가장 눈에 띄고 크게 보여 주는 것이 중요하다고 생각합니다.

물론 크기 조절을 해서 비율을 늘릴수도 있을 것 같습니다.

2.Title - 제목

좌측상단에 위치하고 있는 웹사이트 타이틀입니다.

저는 타이틀이 중앙에 위치하는 것보다는 좌측이나 우측 그리고 간단한 디자인을 하려고 합니다.

앞서 말씀드린것 과 같이 포트폴리오에서는 이미지가 가장 중요하다고 생각하기 때문에 이를 방해하지 않는 정도의 적당한 크기가 좋을 것 같습니다.

3. Navigation Menu - 메뉴

기존의 웹사이트 들이 많은 카테고리를 담고 있고 이런 페이지 링크들을 안내해주는 메뉴들이 PC에서는 중앙이나 사이드 바형식으로 많이 들 배치가 되어있습니다. 

제목과 마찬가지로 첫페이지 그리고 이미지를 방해하지않기 위해서 토글 형식의 버튼을 사용하여 필요할때만 나타나고 사라지게 하는 Nav 구성이 필요할 것 같습니다.

 토글버튼을 클릭시 좌측 사이드바가 나타나는 형식입니다. 

 제일 위에는 검색 창 - 메뉴 -  갤러리 순으로 배열이 되어있습니다. 

 갤러리 부분 같은 경우에는 작은 이미지들을 보여 주소 클릭시 그 페이지로 이동을 할 수 있게끔 하는 부분이 좋습니다.

대략적인 참고 템플릿의 기본 구조와 레이아웃을 살펴 보았습니다.

이 점들을 토대로 다음에는 저만의 레이아웃을 구성해 보겠습니다.

 <포트폴리오>형식의 웹사이트를 제작하기 위해서 첫 단계로 기존의 웹사이트 템플릿을 참고 하기로 했다.

 이미 많은 HTML + CSS 를 사용하여 디자인하고 제작되어 있는 템플릿들을 살펴보고, 나만의 사이트는 레이아웃은 어떻게 구성할 것인지에 대해 고민해 보기로 했다.

먼저 디자인과 제작 방법을 참고 할만한 사이트들을 모아 봤다. 

1. 웹쟁이 무료소스 - http://webjangi.com/design/freetemplate

다양한 템플릿 관련 무료 소스들을 받을수 있고, 사이트가 한글로 되어있어, 편하다는 장점이 있다. 

2.Colorlib - https://colorlib.com/wp/

HTML 과 함께 Bootstrap을 이용하여 만든 템플릿들이 있다. 카페고리별로 볼 수 있기 때문에 편리하다.

3.Webflow - https://webflow.com/

반응형 웹 템플릿들을 살펴볼수 있는 사이트 이다.

4. Free css - https://www.free-css.com/ 

css 관련된 디자인과 템플릿들을 살펴볼수 있고 무료 템플릿들을 다운로드 받을 수 있다. 

다양한 무료 템플릿 관련 사이트들이 있지만 그중에서도 쉽고 다양한 디자인들이 있는 사이트들을 골라 보았다. 

무작정 나만의 디장인을 찾아서 만들어 나가는 것보다는 기존의 것들을 살펴보고 나의 것을 조금이라도 반영할 수 있도록 하고 싶다.

이 사이트들 중, 내가 하고 싶은 디자인과 가장 비슷한 것들을 찾아서 스터디 해볼 예정이다. 

 안녕하세요. 

 Hiio - Tistory 입니다.

오래전 부터 관심을 가지고 있던 웹 사이트 만들기에 도전 해보려고 합니다.

웹사이트 제작을 하는 데 도움을 주고 쉽게 할수 있는 툴들이 아주 많습니다.

저는 처음 부터 차근차근히 시작하려고 합니다.

HTML, CSS, Javascript 를 시작으로 많은 것들을 공부 하고 제작하려고 합니다.

이러한 과정을 포스트하면서 어떤식으로 제가 구상을 하고 어떻게 만들어 가고 있는지 보여 드리려고 합니다.

그 첫 시작은 <포트폴리오> 웹 사이트 제작 입니다.

오래전부터 제가 만들고 가지고 있던 소스들을 업로드 하고, 게시 할수 있는 심플한 웹사이트를 제작해 보겠습니다.