Opkle(옵클) - 창작자를 위한 앱과 시스템

EDITOR

CLASS

BLOG

표현한다는 것의무한한 가능성,

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.

텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.

HTML은 어떻게 문서의 언어가 되었을까

html

HTML의 기본 문법, 글에 역할을 붙이는 법

html

HTML 속성, 글과 요소에 이름을 붙이는 법

html

HTML, head, body: 웹문서의 세 공간

html

head 태그 안에는 무엇이 들어갈까

html

2 HTML의 기본 문법, 글에 역할을 붙이는 법

HTML을 처음 보면 꺾쇠 괄호와 낯선 짧은 단어가 줄지어 있어 조금 겁이 날 수 있습니다. 하지만 그 안에서 벌어지는 일은 생각보다 단순합니다. HTML은 문장 앞뒤에 작은 표지를 붙여 “여기부터는 제목입니다”, “이 부분은 한 문단입니다”라고 알려 줍니다. HTML의 기본 문법은 글을 감싸는 표지와, 그 표지에 덧붙이는 작은 설명으로 이루어져 있습니다.

이 표지를 보통 ‘태그’라고 부릅니다. 처음부터 어려운 이름으로 외울 필요는 없습니다. 선물 상자에 ‘받는 사람’과 ‘내용’을 적은 라벨을 붙이듯, 태그는 글이 맡은 일을 알려 주는 라벨이라고 생각하면 됩니다. 어떤 태그는 글의 앞과 뒤를 함께 감싸고, 어떤 태그는 혼자서 한 번의 일을 합니다. 또 필요한 경우에는 태그에 추가 정보를 적어, 같은 역할의 글도 조금 더 정확하게 설명할 수 있습니다.

1.태그가 글의 앞뒤에 붙어 어떤 역할을 하는지 알아봅니다.

2.시작을 알리는 표지와 끝을 알리는 표지가 왜 함께 필요한지 살펴봅니다.

3.혼자서 일을 마치는 태그는 어떤 경우에 쓰이는지 생각해 봅니다.

4.속성과 값이 태그에 어떤 추가 설명을 더하는지 이해합니다.

태그는 글에 붙이는 역할표입니다

책 원고에 편집자가 연필로 ‘여기부터 소제목’, ‘이 문장은 인용’, ‘이 줄들은 목록’이라고 메모해 두는 모습을 떠올려 봅니다. 그 메모 덕분에 나중에 책을 만들 때 각 부분을 알맞게 정리할 수 있습니다. HTML의 태그도 비슷합니다. 웹 브라우저가 글을 읽을 때, 어느 부분이 제목이고 어느 부분이 보통 문장인지 알아볼 수 있도록 표시를 남깁니다.

태그는 보통 꺾쇠 괄호 안에 짧은 이름을 적는 모양입니다. 예를 들어 `〈p〉`는 한 문단이 시작된다는 표지로 생각할 수 있습니다. 여기서 p는 문단을 뜻하는 영어 낱말 paragraph의 첫 글자이지만, 지금은 ‘문단 표지’라는 뜻만 기억해도 충분합니다. 태그의 이름은 컴퓨터에게 글의 역할을 전달하고, 독자에게는 그 역할에 맞춰 정리된 화면을 보여 줍니다.

HTML을 읽을 때 중요한 것은 낱말 하나하나를 해석하는 것보다, 표지가 어떤 글을 가리키는지 보는 일입니다. `〈h1〉`이라는 표지를 만나면 ‘큰 제목을 위한 자리구나’ 하고 이해하면 됩니다. `〈p〉`를 만나면 ‘여기부터는 하나의 생각을 담은 문단이구나’ 하고 읽습니다. HTML은 글자와 표지를 섞어 쓰지만, 실제로 독자에게 건네는 중심은 언제나 그 안의 내용입니다.

태그를 보는 가장 쉬운 방법

태그는 글이 무엇인지 알려 주는 작은 역할표입니다.

꺾쇠 괄호 안의 짧은 이름은 제목, 문단, 이미지처럼 글의 성격을 가리킵니다.

브라우저는 태그를 읽고, 독자가 내용을 알아보기 좋은 모습으로 보여 줍니다.

태그 자체보다 태그가 감싸거나 가리키는 글의 뜻이 더 중요합니다.

여는 태그와 닫는 태그는 한 쌍의 책갈피입니다

많은 태그는 글의 시작과 끝을 함께 알려 줍니다. 이를테면 문단의 시작에는 `〈p〉`를 적고, 문단의 끝에는 `〈/p〉`를 적습니다. 두 번째 표지에 들어간 빗금은 ‘여기서 문단이 끝납니다’라는 뜻입니다. 사이에 들어간 문장은 하나의 문단으로 묶여, 브라우저가 문단답게 보여 줄 수 있습니다.

`〈p〉오늘은 창문을 열었습니다.〈/p〉`라는 표기를 떠올려 봅니다. 맨 앞의 `〈p〉`는 문단을 여는 태그이고, 맨 뒤의 `〈/p〉`는 문단을 닫는 태그입니다. 두 표지 사이에는 독자가 읽을 실제 문장이 들어갑니다. 마치 책의 한 장을 펼칠 때 첫 장과 마지막 장이 그 안의 내용을 감싸듯, 여는 태그와 닫는 태그는 어디까지가 한 덩어리인지 알려 줍니다.

여는 태그와 닫는 태그의 이름은 반드시 같아야 합니다. `〈p〉`로 시작했다면 `〈/p〉`로 마쳐야 하고, 제목을 위한 `〈h1〉`로 시작했다면 `〈/h1〉`로 끝내야 합니다. 시작한 책갈피를 다른 곳에서 닫아 버리면 문서의 구분이 흐려지듯, 짝이 맞지 않으면 브라우저도 글의 경계를 헷갈릴 수 있습니다. 처음에는 이 한 가지 약속, 열었으면 같은 이름으로 닫는다는 원칙만 익혀도 HTML이 훨씬 친숙해집니다.

한 태그 안에는 더 작은 태그가 들어갈 수도 있습니다. 책의 한 장 안에 여러 문단이 있고, 한 문단 안에 특히 강조하고 싶은 한 문장이 있는 것처럼 말입니다. 이때는 먼저 연 표지를 나중에 닫는 순서를 지키는 것이 좋습니다. 상자를 열어 물건을 넣었다면 작은 상자를 먼저 닫고 큰 상자를 닫는 것과 같습니다. 이 질서가 지켜질 때 HTML은 글의 관계를 또렷하게 전달합니다.

한 쌍으로 움직이는 태그의 약속

여는 태그는 어떤 역할의 글이 시작되는지 알려 줍니다.

닫는 태그는 이름 앞에 빗금을 넣어 그 역할이 끝났음을 알려 줍니다.

같은 이름으로 시작했다면 같은 이름으로 닫아야 합니다.

태그가 여러 겹이라면, 가장 안쪽에서 연 것을 먼저 닫는 순서를 지킵니다.

혼자 있는 태그는 한 번의 행동을 합니다

모든 태그가 문장을 앞뒤에서 감쌀 필요는 없습니다. 어떤 것은 사이에 글을 넣지 않고, 그 자리에서 한 가지 일을 해 냅니다. 사진을 문서에 놓거나, 문단과 문단 사이에 줄을 그어 주거나, 글을 다음 줄로 넘기는 표지가 그렇습니다. 이런 태그는 열고 닫는 두 개의 표지 대신, 혼자서 “여기에 이것을 놓아 주세요”라고 말합니다.

예를 들어 이미지 태그는 사진을 불러올 위치를 알려 주는 역할을 합니다. 사진 자체가 태그 사이에 들어가는 것이 아니라, 태그가 사진이 있는 곳을 가리키면 브라우저가 그 사진을 가져와 보여 줍니다. 그래서 이미지 태그에는 ‘어떤 사진을 보여 줄까요?’라는 추가 정보가 특히 중요합니다. 이 추가 정보는 곧이어 살펴볼 속성과 값으로 적습니다.

한 줄을 바꾸는 표지나 구분선을 넣는 표지도 같은 방식입니다. 글을 길게 감싸는 것이 아니라, 문서의 흐름에 작은 변화 하나를 놓습니다. 혼자 있는 태그는 외워야 할 예외처럼 보일 수 있지만, 안에 담을 글이 없는 한 번의 행동이라고 생각하면 이해하기 쉽습니다. 태그가 둘이 아니라 하나인 이유도, 그 표지가 앞뒤로 감쌀 내용이 없기 때문입니다.

속성은 태그에 붙이는 자세한 메모입니다

태그가 ‘이것은 사진입니다’라고 말하는 큰 라벨이라면, 속성은 그 라벨 아래에 적는 자세한 메모입니다. 예를 들어 사진을 넣을 때에는 사진이 어디에 있는지, 사진을 볼 수 없는 사람에게 어떤 설명을 들려줄지 같은 정보가 필요합니다. 태그의 기본 역할만으로 부족한 부분을 속성이 채워 줍니다.

속성은 여는 태그 안에서 태그 이름 뒤에 적습니다. `〈img src="garden.jpg" alt="창가의 작은 화분"〉`라는 모습을 보면, `img`는 이미지를 놓는 태그이고 `src`와 `alt`는 그 이미지에 대한 추가 메모입니다. 등호 오른쪽의 `"garden.jpg"`와 `"창가의 작은 화분"`은 각각의 메모에 들어가는 실제 내용입니다. 이를 어렵게 부르면 값이라고 하지만, 그냥 속성에 채워 넣는 답이라고 이해해도 좋습니다.

`src`는 어느 사진을 가져올지 알려 주고, `alt`는 사진을 보지 못할 때 대신 전할 짧은 설명을 적는 자리입니다. 사진의 이름만 정확히 적는 것보다, 사진이 글 안에서 어떤 의미를 갖는지 설명해 주는 편이 더 친절합니다. 예를 들어 ‘image1’보다 ‘비 오는 날 창문 옆에 놓인 빨간 우산’처럼 적으면, 화면을 읽어 주는 기능을 쓰는 독자도 장면을 함께 상상할 수 있습니다.

속성은 이미지만을 위한 것은 아닙니다. 다른 글로 이어지는 링크에는 어디로 갈지 적을 수 있고, 특별히 구분할 글에는 나중에 꾸밈을 더하기 위한 이름을 붙일 수도 있습니다. 다만 처음에는 모든 태그에 많은 정보를 덧붙이려 애쓸 필요가 없습니다. 태그가 맡은 기본 역할을 먼저 고르고, 그 역할을 더 정확하게 하기 위해 정말 필요한 메모만 적는 편이 문서를 더 맑게 만듭니다.

속성과 값을 이해하는 작은 공식

태그는 큰 역할을 말하고, 속성은 그 역할에 필요한 자세한 정보를 더합니다.

속성은 보통 태그 이름 뒤에 `이름="내용"`처럼 적습니다.

등호 오른쪽의 내용은 속성이 묻는 질문에 넣는 답이며, 이를 값이라고 부릅니다.

좋은 속성은 기계만이 아니라, 화면을 다른 방식으로 이용하는 독자도 돕습니다.

문법은 외울 규칙보다 읽히게 하는 약속입니다

HTML의 문법에는 작은 약속이 많아 보입니다. 여는 태그와 닫는 태그를 맞추고, 혼자 있는 태그에는 필요한 정보를 적으며, 속성과 내용 사이에는 등호를 둡니다. 하지만 이 약속들은 컴퓨터를 시험 보게 하려는 규칙이 아닙니다. 사람이 쓴 문서의 구조를 브라우저와 다른 도구가 오해 없이 읽게 하려는 배려입니다.

처음에는 표지를 쓰다가 하나를 빠뜨리거나, 닫는 순서를 헷갈리는 일이 자연스럽습니다. 그때 문서를 다시 읽으며 ‘이 문장은 어디서 시작해 어디에서 끝나는가’, ‘이 사진은 무엇을 보여 주는가’를 물어보면 됩니다. HTML 문법을 고치는 일은 암호를 풀기보다, 원고의 표지와 메모가 제자리에 있는지 살피는 편집에 가깝습니다.

결국 HTML의 기본 문법은 세 가지 생각으로 돌아옵니다. 글의 역할을 태그로 알려 주고, 감싸는 글에는 시작과 끝을 함께 표시하며, 더 필요한 정보는 속성과 값으로 덧붙이는 일입니다. 이 약속을 이해하면 낯선 꺾쇠 괄호도 조금씩 문서의 목소리로 읽히기 시작합니다.

이 글의 핵심

태그는 제목, 문단, 이미지처럼 글과 요소의 역할을 알려 주는 표지입니다.

많은 태그는 여는 태그와 닫는 태그가 한 쌍이 되어 그 사이의 내용을 감쌉니다.

이미지나 줄바꿈처럼 혼자 있는 태그는 안에 담을 글 없이 한 번의 일을 합니다.

속성은 태그에 필요한 추가 메모이고, 값은 그 메모에 채우는 구체적인 내용입니다.

목록으로

저작권 고시

본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

상호 :추상적 형상 디자인(Abstract cloud) | 대표자 :배창규

사업자등록번호 :249-74-00533

통신판매업 신고번호 :2025-의정부송산-0634

주소 :경기도 의정부시 부용로 49, 108동 402호