[힙한취미코딩] 스파르타 코딩클럽 마지막 2주차!

추석 연휴를 알차게 보내기 위해 시작한 스파르타 코딩클럽 코딩미션 마지막 2주차!

1주차에서 배운 HTML과 CSS를 활용하여 나만의 추석 인사 카드를 만들어 보았다.

 

바탕에는 가을에 어울리는 황금색을 칠하였고
가운데에 추석과 관련있는 이미지
그리고 나만의 메세지를 담은 봉투까지 만들어보았다

 

 

 

봉투를 누르면 귀여운 캐릭터가 나와 꾸벅꾸벅 인사를 한다
캐릭터 아래엔 메세지 주제와 메세지 내용이 적혀있다
캐릭터를 누르면 숨겨진 페이지(스파르타 코딩클럽 코딩미션 이벤트페이지)로 이동하도록 구현하였다

 

 

편지봉투를 여는 효과를 구현하는 데에 자바스크립트가 쓰였고, 강의에서는 간단한 맛보기를 경험할 수 있었다.

한가지 까다롭다고 느낀 점은 모바일 환경에서의 페이지도 따로 신경써줘야 한다는 점이었다.

모바일의 경우 노트북이나 데스크탑에 비해 화면크기가 작아 CSS 속성을 작은 화면에서도 원하는대로 나오도록 조정해줘야한다.

마우스 오른쪽 버튼을 누르면 나오는 "검사" 탭을 활용해서 모바일 환경에서는 어떻게 페이지 보이는 지 확인할 수 있다.

 

최종적으로 위와 같은 웹페이지를 공개하기 위해선 배포 작업이 필요하다.

보통 돈을 지불하고 서버를 할당받아 페이지를 호스팅하게 되는데, 스파르타 코딩클럽 강의에서는 이 부분까지 신경쓰지 않아도 되도록 따로 호스팅 서비스를 제공해주었다.

 

48시간안에 강의 수강하고 나만의 웹페이지 만들기 성공!