on
HTML+CSS 독학하기 첫번째기록 -책 구입과 학습목표정하기
HTML+CSS 독학하기 첫번째기록 -책 구입과 학습목표정하기
HTML+CSS 학습도서 구입과 목표 정하기
최근에 생활코딩 동영상을 보면서 HTML과 CSS의 기본개념과 내용들을 하나씩 공부했었어요. 그런데 생각보다 설명이 쉬워서인지, 내용이 얼마 없어서인지 모르겠지만 '어? 이거 생각보다 쉬운데?'라는 생각이 들었어요. 그러고 나서 자바스크립트 동영상을 보는 순간 '아! 이건 정말 안 되겠다!'라는 생각과 함께 이건 정말 내가 감히 혼자 할만한 내용이 아니다는 생각이 그제야 들더라구요.
HTML을 공부해야겠다고 마음먹은 이유
자바스크립트를 내가 혼자 공부할 수 없다면, HTML과 CSS를 좀 더 공부해보자는 생각이 들었어요. 몇 달 전부터 언니가 일하는 것을 서포터 해주고 있는데, 언니가 간혹 HTML수정이나 링크 주소, 텍스트 입력을 해야 하는 단순한 것들을 주고 있기 때문에 HTML을 조금씩 공부하고 있거든요. 너무 모르면 도움이 되지 않을 것 같은 생각에 조금이라도 알아두면 좋지 않을까 해서요. 그래서 코딩에 입문하게 되었답니다
학습에 사용할 교재
사실 HTML과 CSS를 공부해본 적이 없어서 어떤 책을 골라야 할지 감이 안 잡히더라고요. 코로나가 점점 심해지고 있어서 좋아하는 대형서점에 가서 책을 직접 보고 고르는 것도 힘들구요. 그래서 일단 알라딘에서 미리보기를 통해 목차와 대략적인 본문 내용을 보고 책을 골랐답니다.HTML로 검색했을 때 굉장히 많은 책들이 나오는데요, <생활코딩! HTML+CSS+자바스크립트>는 생활코딩 사이트에서 동영상으로 강의를 보고 있기 때문에 제외했구요. 일단 자바스크립트가 있는 책들은 전부 제외했어요. 자바스크립트를 수박 겉핥기처럼 이라도 함께 공부해야 한다면 굉장히 정신없을 거라 생각되어서 HTML과 CSS로만 구성된 책으로만 찾아보았어요.HTML과 CSS만으로 이루어진 책중에 선택하려니 선택의 폭이 굉장히 좁아지더라구요. 최근에 발행된 신간 인지도 확인하며 고른 책은 <비전공자를 위한 첫 코딩 챌린지>라는 책이에요. 30일 챌린지라고 되어있어서 2021년이 가기 전 한 달 동안 한번 싹 훑으면 좋겠다는 생각이 들어서 전자책으로 얼른 구매했어요
학습목표 정하기
처음엔 개발환경을 구축해보자는 내용으로 시작하더라구요.
1. 코드 편집기를 선택하고
2. VSCode를 설치하고
3. 책에 실린 예재 코드를 다운로드하는 것
코드 편집기는 어떤 것들이 있는지, VSCode(비주얼 스튜디오 코드)는 어떻게 다운로드하고 설치하는지, 예제코드는 어디서 다운받을 수 있는지까지 자세하게 나와있었어요. 저는 VSCode를 이미 사용하고 있었기 때문에 예제코드만 빠르게 다운받고 넘어갈 수 있었어요.
그리고 가장 중요한 학습목표; 즉 내가 어떻게 공부할 것인지, 무엇을 만들지 등을 정하는 차례가 있더라구요. 저는 딱히 무언갈 만들겠다!라는 목표가 아니라, 지금 현재는 개발자 언니가 짜 놓은 코드를 대략적이나마 읽을 수 있게 되어서 서포터의 역할을 충실히 할 수 있는 것이 최우선 목표이고, 티스토리 블로그의 스킨 디자인을 내가 원하는 대로 변경하는 것이 다음 목표예요. 메인 이미지들이 직사각으로 정렬되는 것을 정사각으로 변경한다던가, 가운데 정렬을 하도록 변경한다던가 하는 이런 것들도 HTML과 CSS를 모르면 할 수 없는 거니까요. 아무것도 모르는 상태에서 하려니 머리만 아프더라구요.
책 외에 참고할만한 사이트
사실 책으로만 공부하는 게 쉽지 않더라구요. 책 한 권으로 끝나면 참 좋겠지만, 제가 선택한 이 책은 코딩의'ㅋ'도 모르는 문과생이 30일간 도전한 코딩 입문기를 담은 책이거든요. 사실 이 부분이 굉장히 와닿아서 선택한 책이긴 하지만 코딩 맛보기만 제공한다고 쓰여있기에 이 책 한 권으로는 힘들 거라는 생각이 든 건 사실이에요. 그래서 책에도 나와있듯 책과 함께 나의 학습을 도와줄 사이트들을 소개해 드릴게요. 물론 저도 이 사이트들을 이용하고 있답니다
먼저 생활코딩 사이트입니다. https://www.opentutorials.org/course/1
생활코딩 사이트의 WEB부분을 공부하고 있답니다. 이해가 안 될 땐 계속 다시 들으며 머릿속에 저장하고 있는 중이에요. 분명히 이해한 것 같았는데 막상 직접 해보면 멍해지는 이유가 뭘까요.. 야속한 나이 탓만 해봅니다..ㅠㅠ
그리고 다음은 영문 사이트인데요.
https://developer.mozilla.org/ko/
한글이 지원되는 사이트라 굉장히 도움이 많이 되고 있어요. 전부 한글이 다 되는 건 아니라서 번역기의 도움이 필요하기도 하지만 굉장히 유용한 사이트입니다
HTML과 CSS 코드들 예제를 보며 공부할 수 있는 사이트예요
https://www.w3schools.com/
이렇게 태그를 공부하다가 어떻게 사용하는 거지?라는 의문점이 들면 꼭 찾아보는 곳 중에 하나예요. Try it Yourself를 누르면 새창이 뜨면서 직접 태그 안의 내용을 변경해본다거나, 태그를 변경해볼 수도 있어요
이 외에도 저는 20년 차 고인물 개발자 언니가 근처에 살고 있기 때문에 모르는 것을 바로바로 물어볼 수 있어 좀 더 공부하기 좋은 조건이랍니다. 이 특장점을 살려 차근차근 공부하려구요 :)
첫 번째 기록은 여기까지 입니다. 저와 같이 독학하시는 분들이 있다면 함께 파이팅해요!
from http://hailey-life.tistory.com/11 by ccl(A) rewrite - 2021-12-11 10:02:07