나의 첫 웹사이트 제작기(애니기록 사이트) | 코딩 공부

코딩 공부를 하고 있습니다.

예전부터 마음은 먹었으나 실천에 옮기지 못하다가, 최근 드디어 재미를 붙이고 나서는 꾸준히 공부하고 있습니다. 현재 HTML에 대해 배우고 있습니다.

배운 내용을 바탕으로, 어설프지만 '자신만의 결과물'을 만들어보는 게 중요하다고 생각해서 웹사이트를 하나 제작했습니다. 많이 부끄럽지만 이렇게 기록으로 남겨둬서 훗날 실력 향상의 지표로 참고하고자 합니다.

코딩 학습 과정, 사이트 제작과정 및 그 결과물을 아래에 공유합니다.

---

 

학습

'생활코딩'이라는 코딩 학습 사이트입니다. 모든 강좌가 무료로 제공되고 있습니다. 저와 같은 왕초보들이 처음 코딩 공부를 시작하기에 아주 좋은 곳이라고 생각합니다. 약 2주에 걸쳐서 WEB1 - HTML & Internet 강좌를 학습했습니다.

 

 

HTML의 여러가지 기본 태그들과 원시 웹의 형태를 학습하고, 서버 프로그램을 설치해서 직접 구동해봤습니다.

---

 

아래에 생활코딩 사이트 링크를 첨부합니다. 덧붙여서, w3schools.com 이라는 사이트도 있는데, 이곳에서도 많은 도움을 받았습니다. 함께 링크 첨부합니다.

WEB1 - HTML & Internet - 생활코딩

 

HTML Tutorial

 

---

 

기획

2주간의 기본학습을 마친 뒤 HTML을 기반으로 한 웹사이트를 직접 만들어보기로 했습니다.

애니메이션 감상이 취미인 저는, 한 번 봤던 애니들을 목록화해서 주요 내용을 정리해두면 나중에 다시 볼 때 편리하겠다는 생각을 했습니다. 그래서 애니 기록 사이트를 만들게 되었습니다.

메인페이지 1개(index.html)와, 링크로 연결되는 하위 페이지 여러 개로 구성된 단순한 웹사이트입니다. 메인 페이지에는 시청한 애니메이션을 목록화해서 정리하고, 하위 페이지에는 각 애니메이션 작품의 주요 정보를 정리합니다.

 

메인 페이지 구성요소

 

하위 페이지 구성요소

 

---

 

제작

제작기간은 하루 1~2시간씩 투자해서 2주 정도 걸렸습니다. 생활코딩 사이트에서 배운 HTML 기본내용에 CSS 언어를 접목해서 제작했습니다. CSS는 아직 체계적으로 배우지 않아서 잘 모르기 때문에, 그때 그때 필요한 요소들을 구글링 해서 야매(?)로 적용했습니다.

메인 페이지를 제작했습니다. 시청한 애니메이션의 리스트를 만들고, 작품 제목과 대표 이미지를 배치했습니다.

 

하위 페이지 제작을 시작했습니다. 일단 제목과 대표 이미지, 그리고 줄거리를 배치했습니다. '더 자세히 보기'와 '라프텔에서 시청하기'에 링크를 걸어서 다른 웹사이트로 이동하게끔 만들었습니다.

 

하위페이지 내용을 보충했습니다. 오프닝·엔딩 영상을 유튜브에서 따온 뒤 배치했습니다. '주요 등장인물' 항목을 만들어서 이미지를 병렬적으로 배열했습니다. 각 캐릭터의 이름과 성우 이름에 링크를 걸어서, 클릭하면 관련 문서로 이동하게끔 만들었습니다.

 

앞서 기본 틀은 다 만들었기 때문에, 여기서부터는 단순작업이었습니다. 하위 페이지를 계속해서 늘려나갔습니다.

 

---

 

완성

코딩을 완료한 뒤, 해당 파일을 웹호스팅 서버에 업로드해서 도메인과 연결했습니다. 웹사이트가 완성되었습니다.

·메인 페이지👇🏻

---

·하위 페이지👇🏻

 

제가 제작한 웹사이트 링크를 아래에 첨부합니다. 틈틈이 계속 업데이트됩니다.

▶웹사이트 둘러보기

---

이상으로, 저의 첫번째 웹사이트 제작기를 마무리합니다. 딱히 특별할 것 없는 단순한 사이트이지만, 공부한 내용을 바탕으로 직접 만들어냈다는 점이 뿌듯한 것 같습니다. 앞으로도 코딩 공부를 계속해 나가면서 틈틈이 결과물을 만들어보겠습니다. 그때마다 이렇게 기록으로 남기도록 하죠. 감사합니다.