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일간 도전한 코딩 입문기를 담은 책이라 처음 시작하는 저와 잘 맞을 것 같아서 선택했습니다. 하지만 코딩 맛보기만 제공한다고 쓰여있기에 이 책 한 권으로는 힘들 거라는 생각이 든 건 사실입니다. 그래서 책에도 나와있듯 책과 함께 나의 학습을 도와줄 사이트들을 소개해 드리려고 합니다. 물론 저도 이 사이트들을 이용하고 있습니다.

 

 

먼저 생활코딩 사이트입니다. 

 

생활코딩 사이트의 WEB부분을 공부하고 있답니다. 이해가 안 될 땐 계속 다시 들으며 머릿속에 저장하고 있는 중입니다. 분명히 이해한 것 같았는데 막상 직접 해보면 멍해지기에 엄한 나이 탓만 해봅니다.

 

 

 

그리고 다음은 영문 사이트 NDN Web Docs라는 사이트입니다. 

한글이 지원되는 사이트라 굉장히 도움이 많이 되고 있습니다. 전부 한글로 볼 수 없기 때문에 번역기의 도움이 필요하기도 하지만 굉장히 유용한 사이트입니다.

 

 

 

HTML과 CSS 코드들 예제를 보며 공부할 수 있는 사이트 W3School 입니다.

이렇게 태그를 공부하다가 어떻게 사용하는 건지 의문점이 들면 꼭 찾아보는 곳 중에 하나입니다. Try it Yourself를 누르면 새창이 뜨면서 직접 태그 안의 내용을 변경해 본다거나, 태그를 변경해 볼 수도 있습니다.

 

 

---

 

저는 20년 차 개발자 언니가 근처에 살고 있기 때문에 모르는 것을 바로바로 물어볼 수 있어 좀 더 공부하기 좋은 조건이긴 합니다. 이 특장점을 살려 차근차근 공부해보려고 합니다. 저의 첫 번째 기록은 여기까지입니다. 저와 같이 독학하시는 분들이 있다면 함께 파이팅 하면 좋겠습니다.