HTML과 CSS: 인터넷 세상을 만드는 가장 기본적인 뼈대

Coddy에서 저희가 하는 모든 일은 한 가지 단순한 생각으로 귀결됩니다. 바로 **직접 해보며 배운다**는 것입니다.

방금 그 문장을 한번 보세요. 굵은 글씨에 기울임꼴이 적용되어 있고, 클릭할 수 있는 링크이기도 합니다. 꽤 멋지지 않나요? 그런데 화면에 어떻게 이렇게 표시될 수 있었을까요?

저희는 이 글을 Markdown Editor에서 작성하고 있기 때문에, 굵은 글씨를 위해 별표 두 개를, 기울임꼴을 위해 별표 한 개를 넣고, [text] (url) 형식을 사용해 링크를 만들었을 뿐입니다.

하지만 웹 브라우저는 마크다운이 무엇인지 전혀 모릅니다. Chrome, Safari, Firefox는 이러한 별표나 대괄호를 전혀 이해하지 못하죠. 화면에 보이는 모든 것의 이면에는 결국 다음 두 가지로 변환되어야만 합니다.

**HTML (HyperText Markup Language)**과 CSS (Cascading Style Sheets).

방금 보신 문장을 동시에 굵고, 기울어지고, 클릭 가능하게 만들려면 HTML 코드는 다음과 같이 작성해야 합니다.

<a href="https://coddy.tech/landing"><strong><em>learn by doing</em></strong></a>

자주 방문하는 웹사이트를 떠올려 보세요. 깔끔한 텍스트, 알록달록한 버튼, 부드럽게 움직이는 메뉴가 보일 것입니다. 이 모든 시각적 요소는 HTML과 CSS를 사용해 만들어집니다. 아무리 비싸고 현대적인 웹사이트라도 이 두 가지가 핵심 기반을 이룹니다.

이제 이 도구들이 어떻게 디지털 세상을 움직이는지, 그리고 첫날부터 직접 코드를 만져보며 어떻게 마스터할 수 있는지 알아보겠습니다!

모든 웹사이트가 여기서 시작하는 이유

집을 짓는다고 상상해 보세요. 지붕도 없는데 고급 소파부터 사지는 않겠죠? 예쁜 페인트 색상과 장식품을 고르기 전에 기초 공사, 나무 기둥, 콘크리트 벽돌 같은 뼈대가 먼저 필요합니다. 벽이 없으면 집도 없는 법이니까요.

**HTML (HyperText Markup Language)**은 화면에 무엇이 들어갈지 컴퓨터에 정확히 지시하는 뼈대이자 설계도라고 생각하시면 됩니다. HTML은 이렇게 말합니다. '여기에 큰 제목을 넣어줘. 저기에 본문을 넣어줘. 바로 여기에 이미지를 넣고, 그 옆에 버튼을 추가해줘.' HTML이 없다면 여러분이 가장 좋아하는 웹사이트는 그저 하얀 빈 화면에 불과할 것입니다. 볼 수 있는 것도, 할 수 있는 것도 아무것도 없겠죠.

하지만 솔직히 벽돌과 나무 기둥만 있는 집은 꽤 볼품없습니다. 회색빛에 차갑고, 아무도 살고 싶지 않을 것입니다. 완전히 미완성 상태니까요. 그래서 이를 꾸며줄 **CSS (Cascading Style Sheets)**가 필요합니다.

CSS는 HTML 구조를 가져와 멋지게 꾸며줍니다. CSS는 이렇게 말하죠. '저 큰 제목을 밝은 파란색으로 바꾸자. 이미지는 화면 정중앙에 배치하고, 버튼은 모서리를 둥글게 깎아서 마우스를 올렸을 때 빛나게 만들자!' 바로 이렇게 웹사이트가 완성되는 것입니다.

간단히 말해, 이 둘은 최고의 콤비입니다. 한쪽이 뼈대를 세우면 다른 한쪽이 살을 붙입니다. 그게 전부입니다. 스마트폰이나 노트북에서 브라우저를 열 때마다 여러분은 HTML과 CSS가 펼치는 라이브 쇼를 보고 있는 셈입니다. 둘 중 하나라도 없으면 성립되지 않습니다.

함정: 태그와 선택자 무작정 외우기

나만의 첫 웹사이트를 만든다는 생각에 잔뜩 설렙니다. 그다음엔 어떻게 할까요? 아마 500페이지짜리 두꺼운 책을 찾아보거나, 인터넷에서 10시간짜리 동영상 강의 재생목록을 찾을 것입니다. 자리에 앉아 음료를 한 잔 마시며 마스터가 될 준비를 하겠죠.

처음 몇 시간 동안은 기분도 좋고 새로운 시작처럼 느껴질 것입니다. 강사가 <h1> 태그가 무엇인지, 배경색을 어떻게 바꾸는지 설명하면 필기를 하거나 정의에 밑줄을 긋기도 합니다. 심지어 속으로 *'오, 나 꽤 잘하고 있는데?'*라고 생각할지도 모릅니다.

그러고 나서 하루 이틀 뒤, 노트북에 빈 파일을 열어봅니다. 화면은 완전히 하얗고, 작은 커서만 깜빡이며 여러분을 기다립니다. 순간 머릿속이 하얘지며 *'어... 이제 뭐 해야 하지?'*라는 생각이 듭니다. 그리고 스스로에게 묻게 되죠. 링크 태그가 뭐였더라? CSS 파일은 어떻게 연결하지? 내 글씨는 왜 사라진 거야?!

이것이 바로 사람들이 흔히 말하는 '수동적 학습의 함정'입니다. HTML과 CSS에 관한 글을 읽으면 진도가 나가는 것처럼 느껴지기 쉽지만, 뇌는 그저 정의를 일시적으로 기억하고 있을 뿐입니다.

그리고 그것은 실력을 쌓는 것과는 거리가 멉니다. 모든 HTML 태그를 외우려고 하는 것은 새로운 외국어를 배우기 위해 두꺼운 사전을 처음부터 끝까지 읽는 것과 같습니다. 진만 빠질 뿐, 우리 대부분에게는... 전혀 효과가 없습니다.

복사-붙여넣기 습관: 성장을 가로막는 이유

또 다른 흔한 실수는 복사-붙여넣기 습관에 빠지는 것입니다. 동영상 강의를 따라 할 때 화면 속 강사가 타이핑하는 것을 그대로 받아 적기 쉽습니다. 코드가 강사의 것과 똑같아 보이고, 저장 버튼을 누르면 짜잔! 잘 작동합니다.

하지만 그것이 왜 작동했는지 정말로 이해하셨나요?

코드를 그냥 복사해서 붙여넣기만 하면, 코딩에서 가장 중요한 부분인 **실수하고 이를 해결하는 과정**을 놓치게 됩니다. 왜냐하면 진짜 웹 개발 실력은 무언가 완전히 잘못되었을 때 길러지기 때문입니다.

예를 들어, 텍스트가 가로로 3단 배열된 간단한 레이아웃을 만든다고 해봅시다. HTML을 작성하고 CSS를 적용했는데, 갑자기 세 번째 단이 페이지 맨 아래로 툭 떨어집니다. 화면이 깨진 것이죠.

튜토리얼을 보고 그대로 베끼기만 했다면, 그 이면의 논리를 스스로 세우지 않았기 때문에 어떻게 고쳐야 할지 전혀 감이 오지 않을 것입니다. 그렇기 때문에 직접 숫자를 바꾸고, 레이아웃이 깨지는 것을 보고, 웹의 규칙이 어떻게 작동하는지 직접 체험하며 실험할 수 있는 안전한 공간이 필요합니다.

코드가 즉시 살아 움직이는 것을 확인하세요

HTML과 CSS를 배우는 가장 좋은 방법은 즉각적인 피드백을 받는 것입니다. HTML 코드를 한 줄 작성했을 때 그 결과가 화면에 바로 나타나면 학습에 큰 도움이 됩니다.

<h1>My Awesome Website</h1>라고 입력하는 순간, 타이핑을 마치자마자 화면 오른쪽에 굵은 제목이 툭 튀어나오는 것을 상상해 보세요. 이어서 h1 { color: orange; }라고 입력하면 눈앞에서 글자색이 선명한 주황색으로 변하는 것을 보게 됩니다.

이렇게 하면 공부가 게임처럼 즐거워집니다. 결과를 보기 위해 몇 주 동안 이론만 공부하는 대신, 시작하자마자 무언가를 만들어내게 됩니다. 글꼴 크기를 바꾸고, 테두리를 추가하고, 이미지를 이리저리 움직여 보며 어떤 일이 일어나는지 마음껏 테스트해 보세요! 멋지게 나오면 좋은 것이고, 깨지더라도 CSS 레이아웃 규칙이 어떻게 작동하는지 새로운 사실을 배우게 되는 것입니다.

레이아웃이 깨지면 어떻게 해야 할까요?

HTML과 CSS를 작성하다 보면 가끔 정말 답답할 때가 있습니다. 버튼이 왜 박스 정중앙에 들어가지 않는지 알아내려고 CSS 코드를 30분 동안 뚫어지게 쳐다보기도 합니다. 철자를 확인하고 페이지를 새로고침해 봐도 아무것도 바뀌지 않죠. 노트북을 창밖으로 던져버리고 싶은 충동이 들지도 모릅니다!

보통 문제는 아주 사소한 것입니다. CSS에서 세미콜론 ;을 빼먹었거나 HTML tag 오타 같은 것들이죠.

책이나 동영상만 보며 혼자 공부할 때는 이런 사소한 버그 때문에 며칠 동안 진도를 나가지 못하기도 합니다. 쉽게 좌절하고 코딩은 나랑 맞지 않는다고 생각하기 쉽죠.

하지만 실습하는 동안 바로 옆에 친절한 도우미가 앉아 있다고 상상해 보세요. HTML 레이아웃이 깨지거나 글자색이 바뀌지 않을 때마다 학습 화면에 내장된 AI 어시스턴트 Bugsy에게 물어볼 수 있습니다. Bugsy는 그냥 복사해서 붙여넣을 답만 툭 던져주지 않습니다. 여러분의 코드를 가리키며 이렇게 말해주죠. "저기, 14번째 줄을 보세요! HTML 태그를 닫는 걸 깜빡하셨네요." 혹은 "박스 요소의 CSS margin 설정을 한번 확인해 보세요."

잠도 자지 않고, 아무리 질문해도 지치지 않으며, 실시간으로 코드를 고칠 수 있게 도와주는 인내심 많은 친구가 곁에 있는 것과 같습니다. 덕분에 미소를 지으며 계속 앞으로 나아갈 수 있죠.

HTML과 CSS를 마스터하는 실전 방법 2가지

1. 작은 HTML 컴포넌트부터 만들기

왜 첫날부터 웹사이트 전체를 만들려고 서두르시나요? 스포일러를 하자면, 그건 머리만 아파지는 지름길입니다. 며칠 만에 거대하고 복잡한 레이아웃을 만들려고 애쓰는 대신, 아주 작고 구체적인 조각에 집중해 보는 건 어떨까요?

단 10분 동안 버튼 하나, 기본 로그인 폼, 혹은 간단한 네비게이션 바를 위한 HTML 태그를 작성하는 법을 배운다고 상상해 보세요. 훨씬 낫지 않나요? 이런 작은 조각들을 직접 타이핑해 보면 뇌는 빠르게 성취감을 느낍니다. 그리고 어느새 스트레스 없이 그 작은 조각들을 결합해 완성도 높고 아름다운 웹페이지를 만들고 있는 자신을 발견하게 될 것입니다.

2. 일부러 CSS 망가뜨려 보기

비밀을 하나 알려드릴게요. 코드를 얌전하게만 다루면 실력이 더디게 늡니다. 모든 것이 항상... 완벽하게만 보인다면 padding, margin, 정렬 같은 까다로운 CSS 속성들이 어떻게 작동하는지 어떻게 배울 수 있겠어요?

멀쩡한 박스 레이아웃에서 크기를 20픽셀에서 200픽셀로 바꾸면 어떻게 될까요? 망설이지 말고 한번 해보세요! 글자가 어디로 날아가 버렸나요? 화면 밖으로 완전히 사라졌나요?

일부러 디자인을 망가뜨리는 것이 조금 이상하게 들릴지 모르지만, 이는 CSS 규칙이 실제 환경에서 어떻게 작동하는지 뇌가 가장 빠르게 학습하는 방법입니다. 그러니 주저하지 말고 오늘 당장 레이아웃을 깨뜨려 보고 어떤 일이 일어나는지 확인해 보세요!

공식 문서(Documentation)와 친해질 준비하기

기본적인 HTML 페이지를 작성하고 CSS로 스타일을 입히는 것이 익숙해지면 완전히 새로운 문이 열립니다. 더 큰 프로젝트를 바라보게 될 것이고, 이때 개발자의 진정한 단짝인 **개발 문서(programming documentation)**를 만나게 됩니다.

공식 문서는 소프트웨어, 도구, 고급 코드를 위한 최고의 설명서라고 생각하시면 됩니다. 시스템의 모든 규칙과 기능, 그리고 이를 사용하는 명확한 예시가 정리되어 있습니다.

개발 문서를 읽는 법을 배우는 것은 합법적인 치트키를 발견하는 것과 같습니다. 단 하나도 외울 필요가 없으니까요! HTML과 CSS의 기본을 마스터하고 나면, 어떤 문서든 자신 있게 열어 예시를 확인하고 이를 활용해 큰 프로젝트를 빌드할 수 있게 됩니다. 실습 공간 바로 옆에서 이러한 가이드가 어떻게 작동하는지 이해하는 것만으로도, 여러분은 어느새 완전히 독립적인 개발자로 성장해 있을 것입니다.

20가지 이상의 언어로 향하는 문을 열어주는 HTML과 CSS

HTML과 CSS가 어떻게 함께 작동하는지 이해하고 나면, 소프트웨어를 바라보는 시각이 달라집니다. 앱, 게임, 그리고 즐겨 찾는 플랫폼 뒤에 숨겨진 뼈대가 보이기 시작하죠.

HTML과 CSS는 최고의 입문 도구입니다. 복잡한 논리나 어려운 수학이 필요 없기 때문에 처음 시작할 때 매우 친숙하게 다가옵니다. 색상, 글꼴, 레이아웃 같은 시각적인 요소를 다루기 때문에 진행 상황을 즉시 확인할 수 있습니다.

하지만 페이지를 만들고 스타일을 입히는 기술을 마스터하고 나면, 자연스럽게 더 흥미로운 질문을 던지기 시작할 것입니다.

• 이 버튼을 누르면 사용자 데이터가 저장되게 하려면 어떻게 해야 하지?
• 사용자가 선택한 설정을 기억하는 다크 모드 스위치는 어떻게 만들지?
• 페이지 전체를 새로고침하지 않고 새로운 콘텐츠를 불러오려면 어떻게 해야 하지?

이 단계에 도달했다면 축하합니다! 이제 JavaScript, Python, PHP 같은 언어를 배울 준비가 된 것입니다. 이미 기초를 알고 있기 때문에 "진짜" 프로그래밍 언어를 배우는 것이 훨씬 쉬워집니다. 이제 여러분은 이미 만들 줄 아는 아름다운 웹페이지를 제어하는 스크립트를 작성할 수 있게 됩니다.

모바일 앱을 만들고 싶든, 데이터 과학을 공부하고 싶든, 멋진 인디 게임을 개발하고 싶든, 그 여정은 거의 항상 이 두 가지 간단한 레이아웃 도구에서 시작됩니다.

오늘부터 나만의 웹 공간을 만들어 보세요

인터넷은 거대하고 아름다우며 혼란스러운 공간이지만, 결국 사람들이 단순한 도구를 사용해 만든 것입니다. 그리고 HTML과 CSS는 기술 천재나 수학 천재들만의 전유물이 아닙니다. 무에서 유를 창조해 멋진 것을 만들고 싶은 사람이라면 누구나 배울 수 있습니다.

시작하는 데 아주 좋은 컴퓨터도, 대학 학위도, 몇 달 동안 들어야 하는 강의도 필요하지 않습니다. 약간의 호기심, 기꺼이 재미있는 실수를 저지를 수 있는 마음가짐, 그리고 코드를 입력하고 결과를 즉시 확인할 수 있는 실시간 플랫폼만 있으면 됩니다.

그러니 왜 아직도 멋진 웹사이트들을 그냥 스크롤하며 어떻게 만들어졌는지 궁금해만 하고 계신가요? 지금 바로 간단한 미니 레슨을 시작하고, 첫 HTML 코드를 입력해 오늘부터 나만의 인터넷 공간을 만들어 보세요!

오늘 첫 웹페이지 만들기