[스파르타코딩클럽] 르탄즈 3기 - (1주차) 추억소환 코딩 패키지

#spartacodingclub #스파르타코딩클럽 #르탄이
#spartacodingclub #누구나큰일낼수있어 #스파르타코딩클럽 + #가정의달이벤트 #가정의달 #코딩

1시간만에 내 추억을 기록할 수 있는 웹페이지를 만들 수 있다?!

---

사실 르탄즈 3기로 활동하기 전에 스파르타 코딩 클럽에서 '웹개발종합'편을 수강하고 있었어요! 대학생 마케터를 선발한다고 해서 바로 신청했습니닿ㅎㅎ 무료로 코딩 강의를 수강할 수 있을 뿐만 아니라 관련 콘텐츠를 제작하면서 더 연구할 수 있어서 여러분들께 추천드려요!!

그럼 시작해볼까요??

#누구나 # 큰일 낼 수있어 💖

---

 

1주차 르탄즈의 MISSION은 초보 + 비전공자에게 도움이 될 맛보기 강의에요!

 

 

👉 1) 5월 가정의 달 특강

https://sparta-2022family.oopy.io/

가정의 달 무료특강

 

 

약 1시간만에 웹사이트를 만들수 있다는 말에 홀린 듯 신청했습니다! 저는 완전 초보자인데 코딩에 대해 아무것도 몰라도 웹사이트 만드는게 테트리스 같아서 앉은 자리에서 쭉 다 수강했습니다 ㅎㅎ

 

'코딩 강의 + 온라인' 이면 보통 코드 오류나 필요 URL에서 무조건 강의랑 달라서 오류가 생기고, 그럼 막히다가 결국 흥미를 잃어버리는 경우가 많죠! 하지만 강의 아래 코드스니팻에 있는 코드, 주소들이 모두 있어서 클릭해서 붙여넣기만 하면 되더라고요! 정말 수강자 입장에서 센스있게 신경써주신 것 같아요!

 

---

!!   본격 웹사이트 제작 Start  !!

STEP 1  :   틀 짜기

 

 

일단 어떤식으로 제작을 할지 전체 틀을 그리고 그 틀을 위해 어떤 html코드가 들어가야 할 지 체크!

html코드는 강의를 보며 따라치면서 충분히 할 수 있는 정도에요! 아직 초보 수준이지만 외울 필요 없답니다!

 

가장 신기했던 것은 마우스 커서를 올렸을때 버튼 색이 바뀌는 hover 함수(?)였어요!

마우스를 버튼 위에 올리면 버튼의 색이 바뀝니다!

 

 

 

지도와 이미지를 넣기 전, background - color를 넣어서 공간을 확인합니다!

display, flex - direction 같은 코드를 보고 헉!! 개발자라면 저런거는 외우고 있어야 하는 건가!!! 생각이 드는 순간 강사님께서 개발자도 다 외우고 있는 것이 아니라고 안심시켜주는ㅋㅋㅋㅋㅋ

독심술 있는 줄 알았어요!!!!!

---

STEP 2   :   Story 넣기

 

 

다음은 Story 넣기! Story를 다시 이미지와 글자 넣을 공간으로 분리합니다!

글자는 h1, h2, p 태그를 사용하면 되는데 html을 외울 필요 없이 강의를 따라하다보면 어렵지 않아요!

수강생 입장에서 가장 편하고 어렵지 않으면서도 재미있게 배울 수 있는 환경을 제공해주는 것 같아요~~

 

 

---

STEP 3   :   Map 넣기

카카오 맵과 구글 지도를 이용해서 원하는 장소의 위도 경도 주소를 가지고 오는데, 이것도 강의 아래 '코드스니팻'을 딸깍! 누르기만 하면 바로바로 가능!!! '코드스니팻' 진짜 이거 만드신 분.. 배우신 분 👍👍👍👍👍

 

---

⭐ 참고⭐

구글 지도에서는 이제 위도 경도가 나오지 않아요!

'모바일' 구글 지도를 설치하셔서 원하는 장소의 빨간점을 꾸욱!

누르면 아래 위도 경도를 복사 붙여넣기 하시면 됩니다!

(이것도 동료 르탄즈분께 받은 꿀tip! ❤️❤️)

 

 

---

STEP 4   :   폰트 변경

단조로운 글씨체는 가라!!

무료 구글 폰트를 활용해 원하는 글씨체로 변경할 수 있어요!

저는 깔끔한 느낌의 Gothic A1을 가져왔습니다.

link를 html과 CSS부분에 복붙하면 1분만에 글씨체 변경 완성!!

 

 

---

STEP 5  :   모바일 환경 대응하기

 

너무너무 섬세하다고 느꼈던 모바일 환경 대응 Tip!!!

내가 만든 웹사이트에서 우클릭, 검사를 누른 후 모바일 환경을 클릭하면 이렇게 보여요!! 

(울지마 르탄아 침착해...)

 

---

💡   어떻게 해결하지 ? 💡

iphone X로 맞춘 후 다시 response(반응형)으로 바꾸자!

iphone X에서 가능하면 웬만한 모바일 환경에서는 다 가능!!!

 

이것을 해결해주는 방법이 CSS에 구현되어 있다! 

특정 픽셀보다 범위가 좁아지면 이 CSS를 적용시켜줘! 라는 의미~~

 

휴..해결

 

---

최종 완성

와! 진짜 1시간만에 웹사이트를 만들었어요!

저는 사실 '웹개발 종합'을 같이 수강하고 있었는데, 이렇게 1시간 짜리로 요약된 것을 다시 들으니까 중요한 부분을 다시 연습할 수 있고 너무 좋았습니다!

물론 아예 처음 수강하시는 분들도 2시간도 안되는 시간만 투자해보시면 코딩에 매력에 빠지실 거에요!

 

 

h1, img, map, story 값의 width값과 기타 등을 변경해주면 특정 범위 기준으로 화면 정렬이 바뀐다!

 

---

💡   뭐가 좋았는데???  💡

 

특히 중간중간 막히는 부분이나 질문이 생겼을 때, 즉문즉답을 이용해서 질문을 할 수가 있어요!

'온라인 강의 + 코딩 수업'은 중간에 막히면 혼자 해결하지 못하다가 손을 놔버리는 경우가 많은데,

스파르타코딩클럽은 질문 답변도 빠르고 사실 '코드스니팻'이 있어서 거의 막히지 않아요!

그리고 '슬랙'을 통해 다른 수강생분들의 문제를 같이 보고 서로 피드백을 하면서 정보를 공유할 수 있습니다!

이게 정말 코딩에 대한 재미를 이어나가게 해주는 것 같아용!

 

 

지금 가정의 달 특강 재오픈을 했으니 다들 신청해보세요!!

https://sparta-2022family.oopy.io/

가정의 달 무료특강

인스타그램:    https://www.instagram.com/p/Cd_A6X7JBoO/?igshid=YmMyMTA2M2Y= 

 

https://cafe.naver.com/codingspartans/1109

르탄즈 3기 3조 - 박은서 1주차 미션