brunch

연재 중 프로덕트 디자이너의 개발 공부 01화

라이킷 24 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by ando Nov 14. 2024

01. 동화로 이해하는 html

프로덕트 디자이너의 개발 공부

웹 세상에 첫 씨앗이 심어지다: HTML의 탄생과 성장 이야기

옛날 옛적, 컴퓨터와 인터넷이 처음 생겨났을 무렵, 사람들은 웹(Web)이라는 새로운 세상을 만들고 있었어. 그곳은 마치 하얀 도화지 같은 공간이었고, 그 안에는 아직 아무런 내용도 없었어. 사람들이 아무리 둘러봐도 그저 텅 빈 화면만이 보였지. 그때, 하얀 도화지 위에 HTML이라는 작은 씨앗이 심어졌어.

“안녕, 나는 HTML이라고 해. HyperText Markup Language야. 나의 역할은 웹 페이지에 구조와 내용을 채우는 것이야.”

HTML은 웹 세상에 자신이 해야 할 일을 찾아서 열심히 일하기 시작했어. HTML은 사람들에게 글을 보여주고, 이미지를 올리고, 다른 페이지로 이동할 수 있도록 링크를 만들었지. HTML은 웹 페이지의 뼈대와 기초를 세우며 웹 세상에 점점 생명을 불어넣었어. 사람들은 HTML 덕분에 웹 페이지를 만들고, 정보를 주고받을 수 있게 되었지.

하지만 HTML은 시간이 흐를수록, 자신의 웹 페이지가 조금 부족하다는 걸 깨닫기 시작했어. “내가 만든 페이지는 정보는 많지만, 사람들이 읽기 쉽게 정리되지 않았어. 뭔가 정돈이 필요해!”

이렇게 해서 HTML은 규칙을 하나씩 만들어가며 점점 성장하기 시작했단다.

HTML의 첫 번째 규칙: “태그는 열고 닫아야 해!”

HTML은 웹 페이지를 만들면서 무언가 규칙적인 형식이 필요하다고 느꼈어. 어디서 시작해서 어디서 끝나는지 명확히 알 수 있는 방법이 있어야 한다고 생각했지.

그래서 HTML은 첫 번째 규칙을 세웠어. “나는 태그를 열고 닫아서 사람들에게 내 구조를 보여줄 거야!”

HTML은 이렇게 자신을 태그로 둘러싸서 구조화하기로 했어. 마치 마법 주문을 쓰듯이 시작과 끝을 정확히 표시하기 위해 <와 > 기호를 사용해서 말이야. 그리고 HTML은 각 태그의 열고 닫는 규칙을 만들었어.

위와 같이, HTML은 <h1>으로 태그를 시작해 </h1>로 닫아주는 규칙을 만들었어. 이제 모든 HTML의 요소는 이렇게 태그로 둘러싸여 시작과 끝을 명확하게 표시할 수 있게 되었지. HTML은 첫 번째 규칙 덕분에 사람들이 HTML 구조를 쉽게 이해할 수 있게 되었다는 것을 깨달았어.

HTML의 두 번째 규칙: “페이지를 두 부분으로 나누자!”

HTML은 점점 더 복잡한 페이지를 만들기 시작했어. 다양한 정보들을 추가하면서 어떤 정보는 보이지 않게 숨겨두고, 어떤 정보는 사람들이 쉽게 보도록 정리할 필요가 있다고 생각했지.

그래서 HTML은 페이지를 두 가지 큰 부분으로 나누는 두 번째 규칙을 만들었어. 바로 **<head>와 <body>**라는 구역을 나누는 규칙이야.

• <head>: HTML은 “여기는 사람들이 보지 않아도 되는 숨겨진 정보를 넣는 곳이야.“라고 생각했어. <head> 부분에는 페이지의 제목이나 메타데이터 같은 중요한 정보들을 숨겨둘 수 있었지. 또, 여기에 CSS와 같은 스타일링 도구를 연결해서 페이지의 디자인을 설정할 수 있었어.

• <body>: HTML은 “그리고 여기는 사람들이 실제로 볼 수 있는 내용을 담는 곳이야.“라고 생각했어. 이제 본격적인 웹 페이지의 주요 콘텐츠가 여기에 위치하게 되었지.

이렇게 페이지가 두 부분으로 나뉘자 HTML은 훨씬 더 깔끔한 구조를 가질 수 있었어. 사람들이 중요한 정보와 페이지의 내용을 분리해서 이해할 수 있었기 때문이지. HTML은 두 번째 규칙 덕분에 페이지가 더 명확하게 구분되어, 사람들에게 쉽게 정보를 전달할 수 있게 되었어.

HTML의 세 번째 규칙: “태그마다 역할을 주자!”

HTML은 기본적인 제목이나 문단만으로는 페이지가 단조로워 보인다는 걸 깨달았어. “나는 다양한 정보를 보여주고 싶어! 그래서 사람들에게 페이지가 어떤 구조인지 더 쉽게 이해할 수 있도록 각 태그마다 역할을 주기로 했어.”

그래서 HTML은 다양한 태그를 만들어냈어:

• 제목을 나타내는 <h1>에서 <h6> 태그: 제목을 강조하고 싶을 때는 크기와 중요도에 따라 <h1>에서 <h6>까지 다양한 태그를 사용할 수 있게 되었지.

• 문단을 나타내는 <p> 태그: 글을 한 덩어리씩 정리할 수 있는 문단을 만들었어. 이 덕분에 페이지가 훨씬 읽기 쉽게 되었지.

• 이미지를 나타내는 <img> 태그: 사람들은 텍스트 외에도 사진과 그림을 보고 싶어 했어. 그래서 HTML은 이미지를 보여줄 수 있는 태그를 추가했어.

• 링크를 만드는 <a> 태그: 사람들은 한 페이지에서 다른 페이지로 이동할 수 있기를 원했어. 그래서 HTML은 링크를 만들어주는 태그를 추가했지.

이렇게 다양한 태그를 만들고 나자, HTML은 사람들이 더 쉽게 이해하고 탐색할 수 있는 페이지를 만들 수 있었어. 각 태그가 자신의 역할을 맡으면서 페이지는 점점 더 풍성하고 체계적인 구조를 가지게 되었지.

HTML의 네 번째 규칙: “계층을 만들어라!”

HTML은 페이지를 더 복잡하게 만들면서 계층 구조의 중요성을 깨달았어. 단순히 줄을 나열하는 방식만으로는 사람들이 혼란스러워했거든. 그래서 HTML은 부모와 자식 관계를 만들어 계층 구조를 형성하는 규칙을 정했어.

“이제 나는 부모와 자식 요소로 계층을 쌓아가며 페이지를 구성할 거야.”

예를 들어, HTML은 <div>라는 태그를 만들어 페이지를 구역별로 나누기 시작했어. <div>는 마치 상자처럼 여러 요소들을 담을 수 있었지. 그리고 HTML은 각 상자 안에 제목, 문단, 이미지를 배치하며 페이지를 구체화할 수 있었어.

이렇게 HTML은 부모와 자식 관계를 만들어 계층적인 구조를 유지할 수 있었어. 이 덕분에 페이지가 더 체계적이고 정돈되어 보였지. 이제 HTML은 페이지가 복잡해도 계층 구조 덕분에 사람들이 쉽게 이해할 수 있는 페이지를 만들 수 있었어.

HTML의 다섯 번째 규칙: 의미 있는 태그를 사용해라!

HTML은 시간이 지나면서 구조를 잘 표현하는 태그가 필요하다는 것을 깨달았어. 페이지의 각 부분이 어떤 역할을 하는지 알려줄 수 있다면 더 좋을 것 같았거든. 그래서 HTML은 시맨틱 태그라는 의미 있는 태그를 만들어, 페이지가 더 이해하기 쉬운 구조를 가지게 했어.

• <header>: 페이지의 상단 부분에 위치하여 로고나 메뉴, 중요한 정보를 담는 공간으로 지정했어.

• <footer>: 페이지의 하단 부분에 위치해 저작권 정보나 추가 링크가 들어가게 했어.

• <section>: 큰 주제를 나누기 위한 구역으로 여러 콘텐츠를 구분하는 데 사용했어.

• <article>: 독립적으로 읽을 수 있는 글이나 게시물 같은 개별 콘텐츠를 담을 수 있는 공간이야.

이렇게 시맨틱 태그를 사용하자 웹 페이지가 더 의미 있는 구조를 가지게 되었어. 사람들이 HTML의 규칙을 더 잘 이해하게 되었고, 웹 페이지는 각 부분의 역할이 분명해졌지.

HTML과 CSS의 협력: HTML의 규칙을 더욱 빛나게 하다

HTML은 자신의 규칙 덕분에 페이지를 구조화하고 의미 있게 만드는 데 성공했지만, 여전히 마음속에서 무언가 부족한 느낌이 들었어. “페이지가 정돈되긴 했지만, 사람들에게 더 매력적이고 보기 좋은 모습을 보여주고 싶어.”

그때, HTML 앞에 CSS라는 친구가 다가왔어. CSS는 HTML에게 미소를 지으며 이렇게 말했어.

“안녕, HTML! 나는 CSS라고 해. 너의 웹 페이지를 더 아름답고 매력적인 모습으로 꾸며줄 수 있어. 색상을 입히고 글자를 예쁘게 꾸미는 건 물론, 다양한 레이아웃으로 페이지를 배치할 수도 있지.”

HTML은 CSS와 힘을 합쳐 웹 페이지를 더욱 풍성하게 꾸미는 방법을 찾기 시작했어. CSS는 HTML이 만든 규칙에 따라 선택자를 사용해 페이지의 특정 요소들을 꾸몄어. 이제 HTML의 <header>와 <footer>, <section>과 <article> 같은 태그들이 색상과 디자인을 입고 사람들에게 더 잘 보이게 되었어.

HTML은 CSS 덕분에 각 부분이 더욱 돋보이고, 구조와 스타일이 조화를 이루는 멋진 웹 페이지를 만들 수 있었어. 이제 HTML과 CSS는 웹 페이지에서 완벽한 파트너로 자리 잡게 되었고, 사람들은 두 친구 덕분에 더 매력적이고 의미 있는 웹 세상을 경험할 수 있었지.

요약: HTML과 CSS의 웹 세상 모험

옛날 옛적, HTML이라는 친구가 웹 세상에 태어나 구조와 내용을 만드는 일을 시작했어. HTML은 사람들에게 정보를 전달하기 위해 자신의 규칙을 하나씩 만들어갔지. 첫 번째로 태그를 열고 닫는 규칙을 정하고, 페이지를 head와 body로 나누는 구조를 잡았어. 이어서 태그에 역할을 부여하고, 부모와 자식 요소로 계층을 구성하면서 점점 더 체계적인 페이지를 만들게 되었어.

하지만 여전히 단조롭고 흑백으로 보이는 페이지를 보며 고민하던 HTML은 CSS라는 멋진 친구를 만나게 되었지. CSS는 HTML의 규칙을 더욱 빛나게 해주었어. 선택자와 속성을 통해 HTML의 각 부분을 꾸며주고, 레이아웃을 배치하면서 웹 페이지는 더욱 매력적이고 다채로운 모습으로 변했지.

이렇게 HTML과 CSS는 협력해 사람들에게 보기 좋고, 이해하기 쉬운 웹 페이지를 선사할 수 있게 되었어. 이제 두 친구는 계속해서 웹 세상을 아름답게 꾸미며, 더 많은 사람들에게 즐거운 웹 경험을 선사할 준비가 되어 있었단다. �

HTML의 이야기 속에서 다뤄진 핵심 이론

1. HTML의 역할

• HTML은 웹 페이지의 구조와 내용을 정의하는 언어로, 웹 페이지의 뼈대 역할을 한다.

• HTML은 각 요소의 구조와 의미를 정리하여 사람들에게 정보를 전달한다.

2. HTML 태그 열고 닫기

• HTML 요소는 태그로 감싸여 시작과 끝을 표시한다.

• <태그명>내용</태그명> 형태로 열고 닫아, 사람들이 각 요소의 시작과 끝을 쉽게 알 수 있도록 한다.

• 예시: <h1>안녕하세요!</h1>

3. 페이지를 두 부분으로 나누기

• HTML은 페이지를 크게 두 부분으로 나눈다: <head>와 <body>.

• <head>: 페이지 제목, 메타데이터, 스타일 등을 넣어 보이지 않는 정보를 담는다.