처음 HTML을 배워보겠다고 결심했던 날, 저는 이틀을 유튜브 영상 목록 스크롤에 날렸습니다. 조회수 높은 강의를 클릭했다가 닫고, 또 다른 걸 클릭했다가 닫는 걸 반복했습니다. 지금 돌이켜보면 그건 배우기를 망설이는 게 아니라, 잘못된 방법으로 시작할까봐 두려워하는 상태였습니다. 비전공자가 HTML/CSS를 독학할 때 가장 먼저 막히는 건 개념이 아니라 "어디서 시작하느냐"입니다. 직접 겪어보고 정리한 순서와 무료 학습 사이트, 그리고 중간에 포기하지 않는 방법을 공유합니다.
일단 치고 보는 것, 그게 시작이었습니다
저는 결국 W3Schools에서 태그를 하나씩 따라 치는 것으로 시작했습니다. 머리로 먼저 이해하려고 하지 않고, 눈에 보이는 코드를 그냥 손으로 입력하는 방식이었습니다. 그렇게 했더니 생각보다 빨리 감이 잡혔습니다. 이건 정말 효과가 있었습니다. 이해하고 치는 게 아니라, 치다 보면 이해가 된다는 것, 그게 코딩 입문의 첫 번째 비밀인 것 같습니다.
HTML에서 처음 이해해야 할 개념은 시맨틱 마크업입니다. 시맨틱 마크업이란 태그 자체가 콘텐츠의 의미를 담도록 구조를 짜는 방식을 말합니다. 그냥 div로 전부 감싸는 대신, 헤더는 header, 본문은 main, 푸터는 footer로 나누는 것입니다. 처음엔 왜 이렇게 해야 하는지 몰랐는데, 나중에 CSS로 스타일을 입힐 때 구조가 명확할수록 작업이 훨씬 수월하다는 걸 알게 됐습니다.
HTML과 CSS의 관계도 초반에 확실히 잡는 게 좋습니다. HTML은 페이지의 구조를 정의하고, CSS는 그 구조에 시각적 스타일을 입히는 역할입니다. 이 역할 분리를 이해하지 못하면 나중에 코드가 뒤엉키게 됩니다. 저도 처음엔 HTML 태그 안에 스타일을 직접 집어넣는 인라인 스타일을 썼다가, 나중에 전부 뜯어고치는 경험을 했습니다. 이 시행착오는 미리 알고 시작하면 피할 수 있습니다.
비전공자가 무료로 활용할 수 있는 학습 사이트
W3Schools는 태그별로 즉시 실행해볼 수 있어 입문에 가장 적합합니다. 생활코딩은 한국어로 HTML부터 CSS까지 단계적으로 설명해줍니다. freeCodeCamp는 실습 중심의 커리큘럼으로 인증서도 발급됩니다. MDN Web Docs는 레퍼런스 문서로, 모르는 속성이 생기면 가장 먼저 찾게 됩니다. CSS-Tricks는 CSS 심화 단계에서 실무 팁을 얻기 좋습니다.
처음부터 다섯 군데를 전부 펼쳐놓을 필요는 없습니다. W3Schools에서 기초를 잡고, 막히는 게 생기면 MDN을 찾는 루틴으로 시작하는 게 가장 현실적입니다. 플랫폼을 여러 개 동시에 펼쳐두는 건 "더 잘 배우기 위한 준비"처럼 느껴지지만, 실제로는 그게 진도를 가장 잘 막는 습관 중 하나입니다.
Flexbox가 고비였고, 게임이 해결해줬습니다
HTML 태그를 어느 정도 익히고 나면 CSS 레이아웃을 배우게 됩니다. 그중에서도 Flexbox는 비전공자 독학 과정에서 가장 큰 고비입니다. 저도 개념서를 세 번 읽었는데도 잡히지 않아서 진짜 그만두고 싶었던 날이 있었습니다.
Flexbox란 CSS에서 요소들을 가로 또는 세로 방향으로 유연하게 배치할 수 있도록 만들어진 레이아웃 모델입니다. 박스들을 원하는 방향으로 정렬하고 간격을 조절하는 데 쓰는 도구입니다. 이 개념이 텍스트로 읽으면 막막하게 느껴지는 이유는, 직접 박스가 움직이는 걸 눈으로 봐야 이해가 되기 때문입니다.
그래서 Flexbox Froggy를 해봤습니다. Flexbox Froggy는 개구리를 정해진 위치로 이동시키면서 Flexbox 속성을 익히는 웹 기반 게임입니다. 한 판 끝내고 나서 justify-content와 align-items의 차이가 갑자기 손에 잡혔습니다. 비슷한 방식으로 CSS Grid를 익히는 Grid Garden도 있습니다. Grid란 행과 열로 구성된 2차원 레이아웃 시스템으로, Flexbox보다 복잡한 구조를 구현할 때 씁니다.
CSS를 통째로 외우려 하지 마세요
일반적으로 CSS를 처음부터 끝까지 통째로 외우려는 분들이 많은데, 제 경험상 그 방법은 오히려 독입니다. 속성은 쓰다 보면 자연스럽게 익혀지고, 모르는 게 생기면 그때 MDN에서 찾으면 됩니다. 지금은 모르는 속성이 생기면 바로 MDN을 찾는 게 습관이 됐습니다. 외우는 사람보다 잘 찾는 사람이 더 빠르게 성장합니다.
CSS 속성 중 특히 캐스케이딩을 이해하고 나서 많은 것이 풀렸습니다. 캐스케이딩이란 같은 요소에 여러 스타일 규칙이 충돌할 때 어떤 규칙이 우선 적용되는지를 결정하는 CSS의 핵심 원리입니다. 이걸 모르면 분명 스타일을 적었는데 왜 안 먹히는지 이유를 알 수 없습니다. 저도 한동안 이것 때문에 삽질을 많이 했습니다.
6개월 로드맵에서 멘탈 관리가 진짜 핵심입니다
6개월 로드맵을 보면 보통 1~2개월 차에 HTML과 CSS 기초를 익히고, 3~4개월 차에 Flexbox와 Grid 같은 레이아웃을 학습하며, 5~6개월 차에 반응형 웹을 다루는 구성으로 짜입니다. 반응형 웹이란 화면 크기에 따라 레이아웃이 자동으로 조정되는 방식으로, 모바일과 PC 화면을 모두 지원하는 페이지를 만들 때 필수적입니다.
그런데 솔직히 이건 예상 밖이었습니다. 로드맵 글 대부분이 "이 사이트 가세요, 이거 하세요"로 끝나는데, 실제로 막히는 지점은 개념이 아니라 멘탈이었습니다. 진도가 안 나가는 것 같은 느낌, 이걸 대체 왜 배우는지 모르겠는 시기, 이 두 가지를 어떻게 넘기느냐가 더 핵심입니다. 그 부분을 다루는 글은 드문데, 저는 그 시기를 실제로 겪어봤기 때문에 더 확실히 말할 수 있습니다.
freeCodeCamp 학습 데이터에 따르면, 코딩 독학 중 중도 포기가 가장 많이 발생하는 시점은 레이아웃 학습 구간입니다. Flexbox와 Grid를 배우는 3~4개월 차가 바로 그 구간입니다. 이 시기에 진도가 느려지는 건 실력이 부족해서가 아니라 정상적인 학습 과정입니다.
중간에 포기하지 않는 가장 현실적인 방법은 작은 결과물을 자주 만드는 것입니다. 긴 강의를 끝내는 것보다, 간단한 명함 페이지 하나를 직접 만들어보는 게 훨씬 강한 동기부여가 됩니다. 아이디어가 생겼을 때 바로 화면에 만들어볼 수 있다는 그 감각이, 처음에 막막했던 시간 전부를 상쇄해줬습니다.
처음엔 모든 사이트가 비슷해 보이고 어디서 시작해야 할지 모르는 게 당연합니다. 중간에는 알 것 같다가 다시 모르겠고, 진도가 멈춘 것 같은 느낌이 반드시 옵니다. 하지만 그 구간을 지나고 나면 달라지는 게 있습니다. 모르는 게 생겨도 어디서 찾으면 되는지 안다는 것, 그 차이가 생각보다 훨씬 큽니다. 지름길은 없고 손으로 치는 수밖에 없지만, 어디서 치느냐는 분명 차이가 납니다.
참고: