프로그래밍

[스파르타코딩클럽 : 나홀로 코딩 패키지] 2일차 - 크리스마스 카드 만들기

aSpring 2020. 12. 19. 16:58
728x90
728x90

 

 

2020/12/19 - [공부, 자기개발] - [스파르타코딩클럽 : 나홀로 코딩 패키지] 사전 과제

2020/12/19 - [공부, 자기개발] - [스파르타코딩클럽 : 나홀로 코딩 패키지] 1일차 - 크리스마스 카드 만들기

 

 

오늘 하는 김에 2일 차까지 가보자!

해서 수료까지 완료했습니다!

 

나홀로코딩 수료증

 


2일 차

 

[수업 목표]

1. 크리스마스 카드를 만들며 HTML, CSS를 연습한다.

2. 간단한 Javascript를 맛본다.

3. 반응형 웹 기초를 실습한다.

 

[목차]

01. 크리스마스 카드 구경하기

02. 봉투 HTML 만들기

03. (숨 고르기) 웹 폰트 적용하기

04. 편지 HTML 만들기 - 르탄이

05. 편지 HTML 만들기 - 메시지

06. 모바일 버전 처리

07. 간단한 Javascript 맛보기

08. 눈 오는 효과 붙이기

09. 히든 메시지 넣어보기

10. 공유를 위한 기초작업

11. 배포해보기

 


01. 크리스마스 카드 구경하기

  1. 생김새 살펴보기
  2. 만들어 갈 순서

02. 봉투 HTML 만들기

   3. 우선! 새로운 HTML 파일 만들기

   4. 가볍게 몸풀기로 배경색을 바꿉니다

   5. 봉투를 놓기

   6. 봉투 밑에 글씨를 놓기

   7. 마지막으로, 둘을 div로 묶어주기

 

봉투 HTML 만들기

 

03. (숨 고르기) 웹폰트 적용하기

   8. 더 진행하기 전에, 웹폰트를 입혀볼까요?

      구글 웹폰트 :  fonts.google.com/?subset=korean

 

봉투 HTML에 글꼴 적용

 

04. 편지 HTML 만들기 - 르탄이

   9. 봉투 HTML을 안 보이게 해두기

   10. 르탄이 만들기

 

 

05. 편지 HTML 만들기 - 메시지

   11. 제목 넣기

   12. 메시지 넣기

   13. 마지막으로, div로 묶어주기

 

 

06. 모바일 버전 처리

   14. 크롬 개발자 도구를 이용합시다!

   15. 편지 HTML 모바일 버전 처리하기

   16. 봉투 HTML 모바일 버전 처리하기

 

 

07. 간단한 Javascript 맛보기

   17. 봉투에 클릭 함수 붙이기

   18. 봉투 마우스 모양 바꾸기

 

08. 눈 오는 효과 붙이기

   19. 라이브러리 찾아보기

        google에서 snow javascript 검색

 

 

09. 히든 메시지 넣어보기

   20. 르탄이 구경하기

첫 번째 르탄이

두 번째 르탄이

세 번째 르탄이

네 번째 르탄이

 

   21. 르탄이에 함수 붙이기

   22. 히든 메시지 넣어보기

 

10. 공유를 위한 기초작업

   23. 카카오톡, 페이스북에 공유하기

   24. 하는 김에 - favicon도 해볼까요?

산타모자 favicon 적용

->> 여기까지는 눈에 보이는 부분을 만드는 : 프론트 엔드

 

 

11. 배포해보기

   25. 배포하고, URL 받기

 

드디어 완성!!

https://xmas.spartacodingclub.kr/hb1dYS0evbYi/Xmas(insta).html

 

spring의 카드

2020년을 보내며

xmas.spartacodingclub.kr


2일 차 과정까지 하루 만에 모두 마쳤다!

생각보다 시간이 좀 걸렸는데

그래도 결과물이 예쁘고

가족, 친구들한테 공유할 수 있다는 점이

좋은 것 같다.

 

시기에 맞춘 적절한 이벤트? 성 특강이었던 것 같다.

 

아쉬운 것은..

사실 내가 기대했던 건

짧은 시간이지만 그래도 좀 더 많은 걸 배워서

스스로 뭔가를 만들고 해보고 하는 걸 하고 싶었는데

이 강의는 어쩔 수 없겠지만

복붙만 하는 강의였다.ㅜㅜ

 

1일 차에는 그래도 오오오 뭔갈 배우고 있어!

이런 느낌과

과제를 하면서 정말 작은 것이지만

수정하고 스스로 해보고 하는 게 재미있었는데

 

2일 차는 너무 그냥 복붙이라

특강이라기보다

크리스마스 기념 나만의 카드 만들기 체험

이런 느낌!!

 

어쨌든!

내용이랑 이런 것들을 수정해서

크리스마스, 새해, 명절, 친구들 생일 등등

특별한 날에 활용할 수 있는 나만의 카드가

생겼고 그걸 만드는 데 처음부터 끝까지 내가

(만들었다는 데)

참여했다는 데 의미가 있는 것 같다.

 

어쨌든 좋은 경험이었다.

 


 

2020/12/19 - [공부, 자기개발] - [스파르타코딩클럽 : 나홀로 코딩 패키지] 1일차

2020/12/19 - [공부, 자기개발] - [스파르타코딩클럽 : 나홀로 코딩 패키지] 사전 과제

 

 

728x90
728x90