아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타코딩 무료체험 (1)

  1주 차의 마지막 과제를 하지 않은 체... 벌써 꽤나 시간이 많이 흘렀다.... 죄인 모드 😪😪

  아내가 계속해서 왜 코딩을 하지 않냐고 하여서 크리스마스 디너 준비다... 편집이다 도망 다녔는데... 결국... 스파르타 코딩 무료체험에 나를 넣어 버렸다. ㅋㅋㅋ

  결국 마지막 과제였던 간단한 html 페이지 만들기가 갑자기 커져버린... 불상사(?)가 ㅋㅋㅋㅋ

  스파르타 코딩의 2일 무료 체험은 기본적인 html, css구동과 함께 약간의 Javascrpit 맛보기가 있다고 했다. 그리고 가장 좋은 건 연하장처럼 크리스마스 카드를 만들 수 있는 미니 프로젝트를 해서 배포(!)까지 하게 해 준다고 하였다. 사실 html, css의 공부를 멈춘 것인 개인적인 이유가 있다고 변명(?)을 하자면 공부할 것들이 너무 많았기 때문이다. 

  또한 개인적으로 만들고 싶은 페이지가 있긴 했지만 현실과 이상의 차이가 너무 크다고 해야 할까?? ㅋㅋㅋ 그래서 기본적인 html, css를 구성하는 방법은 공부를 했지만 실제로 구현을 하지 않았다랄까? 

변명은 죄악이라는걸 모르는가 니트로 박사... ㅋ

  여하튼 그래서 스파르타 코딩 실습을 해보았다.

  1일 차에서 배웠던 html, css는 사실 아는 내용이라 넘어가기로 하고 일단 2일 차의 크리스마스 카드 만들기를 보도록 하자.

  우선 결과로 보면 이렇게 구성이 된다.

  봉투를 열어봐! 의 봉투를 클릭하면 편지가 열리는 형식이다. 

  사실 여기서 내가 가장 기대했던 부분은 이모티콘이 떨어지고 있는 Javascript의 구동이 가장 배워보고 싶었기에 선뜻하겠다고 했다. (사실 여기 이모티콘이 떨어지고 있지만... 원래는 그냥 눈이 떨어지는 페이지의 구성인데 바꿔보았다.)

  일단은 이 강의는 3 부분 정도로 나뉘어 있다.

1. html + css 구조 짜기

2. 모바일 연동하기

3. Javascript 연결하기

 

1. html + css 구조 짜기

  사실 이 부분이 이번 무료 체험의 전부라고 할 수 있다. 왜냐하면 일일이 이미지를 부르고 폰트를 넣고 디자인을 맞추는 부분이기 때문이다.

  우선은 Visual Studio Code를 사용해서 html:5를 눌러 기본! DOCTYPE html 구조를 불러온다.

  설정에 따라서 가끔 html:5가 먹히지 않는 경우가 있는데 이 경우에는 깔려있는 익스텐션의 설정을 바꾼다던지 Visual Studio Code를 완전히 지웠다가 다시 까는 것도 방법일 수가 있다. 나도 계속 파이썬 파일로 바뀌어서 dj라는 익스텐션을 disabled 하고 다시 사용했다.

  그럼 이렇게 나오는데 이제... 여길 채워나가야 한다 ㅋㅋㅋ

  강의에서는 계속 따라 하면서 하는데 이 포스팅을 위해서 강의가 다 끝난 후에 지금 다시 하려고 하니.... 굉장히 귀찮군 ㅋㅋ

(1) Title과 Favicon 바꾸기

가장 처음에는 title을 바꿔보자 ㅋㅋ
저번에는 크리스마스 카드였으니 이번에는 초대장을 만들어 보는 거야!!! 🤩🤩🤩

Title은 초대장으로
이 title의 영역은 웹페이지 tab의 이름이라고 할 수 있다.
즉, 웹페이지를 창의 tab에 있는 이름을 바꿀 수 있다는 것이다. 여기에 favicon이라고 해서 tab 앞에 아이콘 같은 것을 넣을 수 있다고 한다. 그럼 title과 함께 바꿔 보도록 하자.

Title은 뭐 폰트를 넣을 것도 아니고 그냥 글자만 변하기 때문에 일단은 Invitation으로 적어 주었다.

그리고 favicon은 밑의 느낌으로 넣어준다.

 <link rel="shortcut icon" href="원하는 링크">

favicon은 이렇게 무료로 있는 url을 불러오는 것으로 만족 ㅋㅋ 만일 이 그림이 개인 서버에 저장이 되어있다던지 혹은 배포가 아닌 그냥 만들어 보는 거라면 로컬의 영역에 있는 그림으로 해도 될 것 같다.

이렇게 바꿔주고 저장을 하면 사이트 tab이 바뀐다.

위의 제목이 Invitation으로 바뀌고 favicon도 바뀐 걸 볼 수 있다.
그리고 아직은 배포를 하지 않았기 때문에 로컬 저장 장소인 D드라이브에 있다는 것을 볼 수 있다.

(2) 기본 html 구조와 content 넣기

  body영역에서 기본적인 html구조와 content를 넣어보자

  강의에서는 일반적으로 body의 영역을 만들 때 먼저 content격인 h1, h2, title 등의 것을 먼저 하고 묶음으로 나중에 묶어 줬는데 개인적으로는 먼저 <div> tag를 이용해서 구조적인 틀을 먼저 나눠주는 게 좋다고 생각했다.

  이 부분에서는 구조를 머릿속에 먼저 그리고 하는 것이 좋은데 이번 스파르타 코딩에서는 한 페이지에 편지봉투와 편지 내용을 모두 만들고 javascript의 style.display를 이용해서 클릭 시에 보여주는 형식을 따르고 있다. 물론 클릭했을 때 다른 페이지로 가는 것도 만들 수 있지만 그럼 웹페이지를 2개 만들어야 하기 때문에 굳이... ㅋㅋ

  그래서 기본적으로는 2가지 페이지에 있는 구조 하나는 invitation-envelop로 하나는 invitation-letter로 나누어 보기로 한다. 즉, 봉투랑 편지지라고나 할까?? ㅋㅋ

  그리고 안에 들어가는 내용들도 넣어보자... 그럼...

이렇게 구분을 나눌 수 있고...

저장하면 웹페이지는 이렇게 바뀐다.

  사실 텍스트는 이게 다다... ㅋㅋㅋ 그리고 나머지는 그림과 배경색, 폰트 등 거의 대부분 css에서 다루는 것이지. 그리고 onClick으로 구동하는 것은 또 Javascript의 영역이라서 ㅋㅋ 다음번 포스팅에서 해보도록 하자.

---

이번 포스팅은 여기까지 입니다.

앞으로 css로 조금 더 꾸며 보도록 하겠습니다.

 

 

제가 해본 코딩을 포스팅으로 남깁니다.
만일 더 좋은 방법이 있거나 문제가 있으시면 댓글로 남겨주세요.
감사합니다.