[스파르타 코딩클럽][힙한 취미 코딩 이벤트]😎 2주차 개발일지

드디어 카드를 만들어 보는 강의가 시작되었다!

 

봉투를 클릭하면 내용이 나오는 그런 귀여운 카드 형식이다!! 봉투 부분은 로그인의 사진 페이지와 비슷하게 넣어주면 된다. 

이번 강의에서는 봉투를 클릭할 때 나오는 손 모양의 커서가 나오는 코드를 배웠다. 

 cursor: pointer;

이렇게 간단한 코드만으로도 손 모양이 바로 나오다니! 아주 좋군~~

배경에 눈이 오는 것은 구글에 'snow Javascript'라고 검색하면 라이브러리로 남들이 만들어 놓은 것을 붙이면 된다!

다른 효과를 갖다가 붙이려면 또 열심히 서치를 해봐야함... 잘 찾아오는 것이 핵심! 인데 나는 구글 서치 능력을 좀 키워야 된다. 정말로 ㅠ!!

 

이렇게 만들어 놓고 HTML은 있는데 화면에는 없는 척을 해주려면 아래와 같이 해줘야 한다.

.letter-close {
    display: none;
}

다음, 메시지 부분을 해주면 된다. 동그란 사진부분의 테두리를 뿌옇게 해주는 효과

box-shadow: 0px 0px 10px 0px white;

 

모바일 사이즈로 변경하는 방법도 배웠는데 이 부분이 좋았다. 검사에서 toggle device tool??인가 그거를 눌러주고 사이즈를 바꿔보면 된다. 365X645정도로???

 

그렇게 만든 완성작! 아.. 르탄이 부분을 바꿀 것 그랬나.. 

https://xmas.spartacodingclub.kr/qpw6473mYdRx/Xmas.html

길동이의 카드

 

연말에 요긴하게 써먹어야겠다 ㅋㅋㅋ

 

***5만원 할인 링크 클릭!***

https://spartacodingclub.kr/?f_name=%EA%B9%80%EB%B3%B4%EC%9B%90&f_uid=6110d79e50065eacde984bab 

스파르타코딩클럽