HTML, CSS로 만들어본 지하철 노선도 웹디자인

안녕하세요, '손재의 파이프라인' 블로그 주인장 손재입니다.

오늘은 HTML과 CSS로 만들어본 간단한 지하철 노선도 웹디자인을 한 번 보여드릴까 해요. 저는 어디까지나 초보자이기 때문에 딱 디자인 구현 정도만 할 줄 아는 상태라서 퀄리티는 굉장히 떨어진답니다. 그래도 제가 놀고 있는 게 아니라 조금씩 실력이 느는 걸 기록하고 싶어 포스팅하는 것이니까 너무 나쁘게만 보지 말아 주세요.

그럼 시작하겠습니다.

 

반응형 작업은 아직 하지 않았고, 제가 만들고 싶은 웹 페이지의 확대 모습이라고 보시면 될 것 같아요. 우연히 2호선을 타고 가는데 지하철 창문 밖 틈새 사이로 보였던 노선 이름의 디자인을 보고 문들 떠올라 서울시에도 각 지하철 역마다 어떤 맛집, 관광지, 볼거리 등이 있는지 유저들이 직접 소개해주는 도구가 있으면 어떨까 하는 바람에서 제작하게 되었습니다.

물론 아직도 너무나도 부족하고, 기능적인 측면에서나 운영적인 측면에서나 보잘것없고, 아이디어에서 끝난 단계이지만 잘 준비해서 포트폴리오로 제작해볼 생각이에요.

 

제목 그대로 HTML과 CSS로만 구현해 낸 웹페이지이고요. 비교적 간단합니다. 원하시는 분들께서는 댓글 남겨주시면 소스를 공유해드리겠습니다. 폰트 사용은 구글 폰트를 활용하여 한글, 영어, 중국어 모두 이용했고, Font Awesome 같은 경우에도 Font Awesome과 w3school를 활용했습니다.

 

초기화 CSS - Reset CSS 같은 경우는 위와 같이 작성했어요.
(body : overflow-x: scroll)은 빼셔도 될 것 같아요.)

폰트 이름도 위와 같이 첨부해두었습니다.

 

웹의 기초적인 디자인을 입히는 Style CSS 경우도 일단 보이는 페이지만 구현하는 데에는 43줄 정도로 끝냈고, 저는 초보자이기에 많이 작성한 거 일수도 있는데, 고수님들께서는 훨씬 양이 줄어들게 하셔서 작성하실 수 있을 것 같아요. 요즘 한창 CSS에 재미를 붙인 상태라서 이것저것 만들어보고 있는데 역시 CSS로만 구현하는 것도 재밌지만, 한계가 있는 것 같아요. 그래서 어제부터 자바스크립트(Javascript)를 본격적으로 공부하고 있습니다.

하루빨리 Javascript를 마스터해서 제가 원하는 모든 것을 컴퓨터 언어를 활용해 창작의 맛을 보고 싶네요. 웹디자인도 예술이라고 생각하는 사람 중 한 명으로서 말이죠. 그래도 아직까진 너무너무 재밌습니다. 오늘도 다른 웹페이지를 만들어 볼 생각이에요. 학원에서 틈틈이 자바스크립트도 배우고 있으니 집에서도 게을리하지 않고, 공부를 열심히 해서 멋있는 개발자가 되고 싶습니다. 웹 퍼블리싱에서 끝나는 게 아닌 멋진 '프런트엔드' 그리고 최종적으로는 '풀 스택'까지 말이죠!

아자아자!

모두 화이팅해요!!