이번 미션은 스파르타코딩클럽의 강의를 직접 들어보고 후기 콘텐츠를 제작하는 것이다.
직접 코딩을 해보며 결과물까지 낼 수 있으니 개발일지로 제작하는 것이 적합하다고 생각된다.
서포터즈 활동으로 제공받은 강의는 다음 세 개와 같은데,
연말이 다가오는만큼 '신년운세 코딩 패키지'가 가장 몰입하면서 수강할 수 있을 것 같아 선택했다.
커리큘럼을 톺아보자면
공부해볼 언어는 HTML, CSS, Javascript다.
이 세 가지가 생소하다면,
간단하게 웹페이지를 만들 때,
HTML은 뼈대, CSS는 꾸미기, Javascript는 움직이는 것이라고 생각하면 된다.
그리고 완강 시 예상 결과물은,
중에서 운세를 보고 싶은 십이간지를 클릭했을 때,
다른 페이지로 넘어가는 것까지 볼 수 있다!
이전에 완강한 [왕초보 웹개발 종합반]에서는
다른 페이지로 넘어가는 것까지는 공부하지 않았는데,
짧은 커리큘럼에서도 새롭게 알아가는 것이 생길 거란 기대가 생겼다.
새로 배운 내용
VS Code 자동완성
웹개발 종합반에서는 개발도구를 Pycharm을 주로 썼지만,
이번에 제공된 강의에서는 VS Code를 썼다.
메이킹챌린지하면서 Vs Code에서 미리 환경설정을 해놓아 별다르게 할 것은 없었지만,
역시 스파르타코딩클럽에서는 초보자들을 위한 설치 및 환경설정을 같이 한다.
이런 세심함이 정말 좋다.
아무튼 Vs Code로 수업을 듣는 것은 처음이라,
기본적인 꿀팁에 관해서 새롭게 알게된 것은 다음과 같다.
HTML을 쓸 때 기본적인 틀이 있는데,
이것을 '!!!'를 입력한뒤 엔터를 치면 바로 자동입력이 된다는 점...!
HTML의 모든 태그 CSS 적용
<head>
<style>
/* 모든 태그에 적용할 때는 * */
* {
font-family: 'Jua', sans-serif;
}
</style>
</head>a 태그 세부 사항
a 태그에서 따로 링크를 연결하지 않을 때,
<!-- 그대로 있어라는 # -->
<a class="rtan1" href='#'></a>
VS Code 정렬 단축키
[Ctrl+K+F]
특정 이미지를 백그라운드에 꽉 차게 넣고 싶을 때
.image {
background-image: url('#');
background-size: cover;
background-position: center;
}hover 효과
마우스를 얹었을 때 적용하는 효과
.rtans>a:hover{
background-color: darkred;
}
코드를 입력하세요해당 코드는 rtans class에 있는 모든 a태그에 마우스를 얹었을 때,
배경색을 어두운 빨강으로 바꾸는 것.
고민한 내용
Open in Browser TechER
단축키 [alt+B]를 누르면 만들고 있는 HTML를 브라우저에서 직접 볼 수 있는데,
Pycharm에서는 Chrome으로 연결됐지만,
VS Code에서는 왠지 모르게 Edge로 열린다.
Edge를 자주 쓰는 편이 아니었고,
개발자도구도 Chrome과 살짝 달라서
이 부분이 초반에는 꽤나 불편했는데,
시간이 지날수록
강의를 듣는 Chrome 창, 구글링하는 Chrome 창, 메모하는 Chrome 창 등
Chrome에서 열리는 창이 워낙 많다보니깐,
오히려 미리보기하는 창이 Edge라서 찾기가 편하다.
그래서 당분간은 Edge로 열리게 놔둘 예정.
완성한 1일차 숙제 페이지
참고한 블로그/사이트
a 태그 하이퍼링크 밑줄 없애기
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=demonic3540&logNo=221242590496
자체 피드백
이전에 강의를 듣고 웹사이트를 만들어본 경험이 있기에
다른 웹사이트를 만들어보는 것에 대한 두려움이 전혀 없었다.
다만 아쉬운 점은,
그런 경험에 대한 자만심이 생겨
이번 강의를 시작하기도 전에
모든 것을 다 알고 있을거란 생각을 했다.
그런데 생각보다 API, 서버에 대한 확실한 개념이 흐려진 상태였고,
더불어 HTML, CSS에 관해서도 새로운 것을 배울 수 있었다.
경험을 쌓는 것이란 다음 경험을 진입하는 장벽을 낮춰줄 순 있지만,
그것이 곧 다음 경험을 쉽게 만드는 것과는 다른 문제인 것을 깨달았다.
배우는 것 매번마다 진심을 가지고 임하자.
협업에 대한 생각
생략
프로젝트 아이디어
신년운세를 띠별이 아닌 MBTI별로 만들어서
재미삼아 지인들에게 공유하는 것도 괜찮을 것 같다.
