[코딩] 스파르타코딩클럽 힙한취미코딩 신년운세 코딩 패키지 2일차

신년운세 코딩 패키지 2일차에 배운 내용들...

 

01. 운세페이지 만들기

-띠를 선택하면 각각 다른 메시지가 나오게하기!

-result.html을 만들어 index.html에서 필요한 부분을 복붙하기!

-index.html과 result.html을 연결하기 위해서

href="#" 에서 href="result.html"로 바꾸기!

 

02. 르탄이 만들기

-운세페이지에 르탄이가 나오도록 하기!

-원을 만들고, 원에 르탄이를 입히고, 원에 글씨 쓰고, 원을 가운데로 이동시키기!

모든 것은 index.html에서 필요한 내용 복붙!!

 

03. 메시지 만들기

-운세페이지의 제목 메시지 부분, 운세 메시지 부분 만들어주기!

제목 메시지는 h1 태그로, 운세 메시지는 p 태그로!

 

04. 버튼 만들기

-운세 메시지 밑에 버튼 2개 추가하기!

버튼은 두 개니까 div로 묶어주고 btns 클래스 주기!

-버튼을 가운데로 가져오기 위해 display: flex; flex-direction: row; justify-content: center;

-버튼을 꾸며주기 위해 버튼 별로 클래스 다르게 주고, 크기와 색 등 바꿔주기!

-cursor: pointer로 커서 모양을 손으로 바꿔주기!

 

05. 모바일 버전 처리하기

-크롬 개발자도구를 이용해 (마우스 오른쪽 키 -> 검사 -> 왼쪽 윗부분에 있는 모바일 버튼을 클릭) 화면 확인하기!

-모바일에서만 적용시킬 수 있는 CSS를 넣어주기! (스크린 사이즈가 780px 이하일 때 적용되는 것)

@media screen and (max-width: 780px) { ~~~ } 

 

06. 간단한 Javascript 맛보기

-result.html 페이지 버튼에 alert 넣어보기!

-alert 대신에 뒤로가기 코드를 붙여주기!

-공유하기 버튼에도 코드 붙여주기!

 

07. 마지막 - 띠 별 메시지 만들기

-index.html 에서 a 태그들을 먼저 붙여주고, result.html에서 p 태그에 내용들 넣어주기!

-msg 클래스가 처음에 안보이게 가렸다가 띠에 맞는 문구만 보이게 하도록

display: none; 추가하기!

양띠를 클릭하면 양띠의 메시지가 나온다!!

 

08. 공유를 위한 기초작업

-카카오톡, 페이스북에 공유하기 위해 og 태그 넣어주기!

카톡으로 링크 보내면 요로케 나온다!!

-favicon도 넣어주기! 요로케 나온다!!

 

09. 배포해보기

-내가 만든 페이지의 링크는 요거!!

https://new-year.spartacodingclub.kr/3ftWr4ZgUcdg/index.html

신년운세 by 르탄!

 

 

 

 

이렇게 해서 신년운세 코딩 패키지 2일차도 끄으으읕!!!

짧은 시간 안에 매력적인 웹페이지를 만들어서 진짜 뿌듯하닷!!