<22.04.19> HTML\CSS\Javascript 활용 하기 ㅡ 디자인 시안 구하기

인터넷으로 HTML/CSS/Javascript 기초 강의를 얼추 끝내고나니 뭘 공부하지.. 라는 생각이 들었다. 자바스크립트의 리액트나 다양한 프레임워크들을 또 배울 수 있겠지만 그 전에 HTML/CSS로 레이아웃을 잡고, Javascript로 동적인 페이지를 만드는 연습을 해보고 싶었다. 그래서 블로그에 이 카테고리를 만들었다.

 

막상 하려고 하니 디자인 시안을 어디서 받아야 할지 막막했다. 내가 스스로 만들어볼까 생각했지만 그러려면 포토샵도 배워야 할 것 같은데.. 그러면 시간이 너무 오래걸릴 것 같아 유튜브에서 김버그님, 드림코딩 엘리님과 같은 프론트엔드 개발자들의 힘을 빌려 무료 디자인 시안을 받을 수 있는 사이트를 알게 되었다... 

 

Freebiesbug

 

개발자 유튜버들이 다양한 사이트를 추천해주었지만, 디자인 시안만 주고 제작에 필요한 아이콘이나 이미지는 제공하지 않는 경우가 있었다. 그래서 좌절을 하던 도중.. 위 사이트를 알게 되었는데 무료로 샘플 디자인 시안을 받을 수 있으며 어떤 것은 github에 코드가 공개되어 있는 것도 있다. 전부는 아니지만, 디자인에 필요한 이미지 파일을 모두 제공하는 경우도 있어 연습용으로 딱이라는 생각이 들었다. 

 

HTML과 CSS를 연습하고 싶은데 마땅한 디자인 시안이 없는 사람들은 위 사이트를 참고하여 디자인을 만들면 될 것 같다. 생각보다 자료가 많으니 잘 찾으면 원하는 연습용 시안을 찾을 수 있다. 이 얼마나 복받은 사이트인가!

 

위 사이트를 통해 연습용 디자인 시안을 몇 개 다운 받았다. 전체 홈 페이지도 있었지만 모바일용의 간단한 카드 형식의 페이지도 있었다. 크리스마스 카드나 연하장 같은.. HTML/CSS 연습용으로 딱이라 생각하여 선택하였다.

 

 

 

시안 파일들은 .psd(포토샵) 파일로 있는 경우가 있고 그냥 .jpg와 같은 이미지 파일로 저장된 경우도 있다. 위 디자인 시안을 가지고 연습할 때 부딪혔던 가장 큰 문제는 각 요소들 사이의 마진값이나 패딩값을 정확히 알 수 없었다는게 흠이었다. 그래서 대충 눈대중으로 맞춰보고 적절한 값을 넣어서 원본과 비슷한지... 비교하며 만들었다. 그러다보니 대충 보면 모르는데, 자세히 보면 삐꾸가 난 부분이 있어서 조금 마음에 안들었다.. 하지만 내가 직접 HTML/CSS를 만진다는데 의의를 두기로 했다.

 

다음부터 HTML/CSS를 활용하여 크리스마스 카드 페이지를 만드는 포스팅을 올리도록 하겠다!