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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

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

html

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

html

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

html

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

html

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

html

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

같은 문단이라도 어떤 것은 조용히 읽히면 좋고, 어떤 것은 독자의 눈에 조금 더 또렷하게 남아야 합니다. 사진도 마찬가지입니다. 화면에 사진 한 장을 놓는 것만으로는 부족할 때가 있습니다. 어느 사진을 보여 줄지 알려야 하고, 사진을 보지 못하는 사람에게는 그 장면을 말로 전할 필요도 있습니다. HTML의 속성은 태그가 맡은 역할에 구체적인 이름, 주소, 설명을 더해 주는 작은 정보입니다.

앞선 글에서 태그가 문서의 역할표라면, 속성은 그 역할표에 덧붙이는 메모라고 이야기했습니다. 이번에는 웹 문서를 만들 때 자주 만나게 되는 네 가지 메모, `class`, `id`, `src`, `href`를 살펴봅니다. 넷은 모두 태그 안에 적히지만, 하는 일은 서로 다릅니다. `class`는 비슷한 친구들을 묶고, `id`는 하나만 있는 대상을 가리키며, `src`는 가져올 것을 찾고, `href`는 다음으로 갈 곳을 알려 줍니다.

1.속성이 태그에 어떤 정보를 더하는지 다시 짚어 봅니다.

2.`class`가 여러 요소를 같은 무리로 묶는 방법을 알아봅니다.

3.`id`가 문서 안의 한 자리를 고유하게 부르는 이유를 살펴봅니다.

4.`src`와 `href`가 사진과 링크에 길을 만들어 주는 방식을 이해합니다.

속성은 태그가 알아야 할 추가 정보입니다

태그가 ‘이것은 이미지입니다’ 또는 ‘이것은 링크입니다’라고 말한다면, 속성은 그다음에 필요한 질문에 답합니다. 어떤 이미지인가요? 링크를 누르면 어디로 가나요? 이 문단은 다른 문단과 무엇이 다른가요? 태그 하나만으로는 말하지 못한 세부 정보를 적어 두는 곳이 속성입니다.

속성은 보통 태그 이름 뒤에 `이름="내용"`처럼 붙습니다. 이때 왼쪽의 이름은 무엇을 알려 줄지 정하고, 오른쪽의 내용은 그 질문에 대한 실제 답을 적습니다. 예를 들어 `src="flower.jpg"`라면 `src`라는 메모 칸에 `flower.jpg`라는 사진의 위치를 적은 셈입니다. 처음에는 이 모양을 모두 외우기보다, 속성은 질문이고 값은 그 질문에 적는 답이라고 생각하면 충분합니다.

속성은 글을 화려하게 만드는 장식만은 아닙니다. 웹 문서에서 길을 찾게 하고, 같은 성격의 부분을 정리하며, 사진의 의미를 더 잘 전하게 합니다. 태그가 문서의 뼈대를 세운다면, 속성은 각 부분이 다른 부분과 어떻게 관계를 맺는지 구체적으로 알려 줍니다.

`class`는 비슷한 것들을 묶는 이름입니다

학교에서 같은 동아리의 학생에게 같은 배지를 달아 주는 장면을 생각해 봅니다. 사진부 배지를 단 학생들은 서로 다른 사람이지만, 사진부라는 공통점을 갖습니다. HTML의 `class`도 이런 배지와 닮았습니다. 여러 제목, 문단, 버튼, 사진 가운데 비슷한 성격을 지닌 것들에게 같은 이름을 붙여 한 무리로 묶습니다.

예를 들어 글 안에서 특히 기억해 둘 문단이 여러 개 있다면, 그 문단들에 `class="important"`라는 이름을 붙일 수 있습니다. 그러면 나중에 그 이름을 가진 문단만 골라 같은 방식으로 꾸미거나, 필요한 때 함께 찾을 수 있습니다. 각각은 여전히 서로 다른 문단이지만, ‘중요한 내용’이라는 공통된 역할을 공유하게 됩니다.

`class`의 좋은 점은 여러 곳에서 다시 쓸 수 있다는 데 있습니다. 책의 각 장에 같은 모양의 인용문이 여러 번 등장한다면, 매번 새로운 이름을 붙일 필요 없이 모두 `class="quote"`처럼 같은 이름으로 묶을 수 있습니다. 한 태그에 공통점이 여러 개 있다면 이름을 둘 이상 붙이는 일도 가능합니다. 다만 처음에는 이름을 너무 많이 만들기보다, 독자가 보아도 이유를 짐작할 수 있는 기준으로 묶는 편이 좋습니다.

`class`는 ‘이것은 이 무리에 속합니다’라고 말하는 이름입니다. 그래서 하나뿐인 대상을 찾기보다, 반복되는 요소에 일관성을 주고 싶을 때 잘 어울립니다. 같은 배지를 단 여러 사람이 모여 있듯, 같은 class를 가진 요소는 문서 안에 얼마든지 있을 수 있습니다.

`class`를 떠올리는 방법

`class`는 비슷한 성격을 가진 여러 요소에 붙이는 공통 이름입니다.

같은 이름을 여러 문단, 이미지, 버튼에 반복해서 쓸 수 있습니다.

같은 무리에 묶인 요소는 나중에 함께 꾸미거나 찾기 쉬워집니다.

이름은 ‘무엇처럼 보이게 할지’보다 ‘무슨 역할을 하는지’를 떠올릴 수 있게 붙이면 좋습니다.

`id`는 문서 안에서 단 하나만 쓰는 이름입니다

`class`가 동아리 이름이라면, `id`는 학생 번호나 집의 정확한 주소에 가깝습니다. 문서 안에서 딱 한 곳을 가리켜야 할 때 `id`를 붙입니다. 예를 들어 긴 글의 맨 마지막에 있는 ‘문의’ 부분, 또는 책의 한 장을 시작하는 특정 제목처럼 다른 곳과 헷갈리면 안 되는 자리에 사용할 수 있습니다.

`id="contact"`라고 적힌 부분이 있다면, 문서 안에서는 `contact`라는 이름을 가진 자리가 하나라고 약속하는 셈입니다. 같은 이름을 여러 곳에 붙이면 ‘어느 contact로 가야 할까요?’라는 질문이 생겨 문서의 길이 흐려질 수 있습니다. 그래서 `id`는 반복되는 무리의 이름이 아니라, 한 페이지 안에서 한 번만 부르는 고유한 이름으로 생각하는 편이 좋습니다.

이 고유한 이름은 긴 문서에서 특히 쓸모가 있습니다. 링크를 만들어 독자를 글의 맨 위나 특정 소제목으로 곧바로 데려갈 수 있기 때문입니다. 종이책에서 ‘127쪽의 3장을 보세요’라고 안내하는 것보다, 웹에서는 그 제목의 `id`를 향해 바로 건너가게 할 수 있습니다. 문서 안의 작은 표지판 하나가, 독자가 길을 되짚거나 필요한 곳을 다시 찾게 하는 목적지가 됩니다.

`id`는 강한 이름인 만큼 아껴 쓰는 편이 좋습니다. 단지 예쁘게 보이게 하려고 모든 문장에 다른 id를 붙이면 문서는 불필요하게 복잡해집니다. 정말 한 곳을 정확히 가리켜야 하는지 먼저 묻고, 그렇다면 다른 이름과 겹치지 않게 간단하고 분명한 이름을 붙이면 됩니다.

`class`와 `id`의 차이

`class`는 여러 곳에 붙일 수 있는 공통된 무리의 이름입니다.

`id`는 한 페이지 안에서 한 곳에만 붙이는 고유한 이름입니다.

반복되는 인용문이나 안내문에는 `class`가, 특정 소제목이나 목적지에는 `id`가 잘 어울립니다.

둘 모두 글의 뜻과 역할을 드러내는 이름일수록 나중에 이해하기 쉽습니다.

`src`는 가져올 사진과 자료의 위치를 알려 줍니다

웹페이지 안에 사진을 넣는다고 생각해 봅니다. 이미지 태그는 ‘여기에 사진을 보여 주세요’라고 말하지만, 사진이 어디에 있는지는 저절로 알지 못합니다. 이때 필요한 것이 `src`입니다. source, 곧 ‘가져오는 곳’이라는 말에서 온 이 속성은 브라우저에게 어떤 파일을 찾아 보여 줄지 알려 줍니다.

`src="sunset.jpg"`는 ‘sunset.jpg라는 사진을 가져와 주세요’라는 뜻입니다. 사진의 이름과 위치가 정확해야 브라우저도 원하는 이미지를 찾아낼 수 있습니다. 주소를 잘못 적으면 택배가 엉뚱한 곳으로 가듯, 사진도 화면에 나타나지 않을 수 있습니다. `src`는 사진을 만들거나 꾸미는 말이 아니라, 이미 준비된 사진을 문서 안으로 데려오는 길입니다.

`src`는 사진 외에도 영상이나 다른 자료를 불러올 때 만날 수 있습니다. 하지만 처음에는 이미지와 함께 기억하면 가장 쉽습니다. ‘이 자리에 보여 줄 것은 무엇이고, 그것은 어디에 있나요?’라는 질문에 답하는 속성이 바로 `src`입니다. 그리고 사진이 글에서 무엇을 말하는지도 함께 전하기 위해, `src` 옆에는 종종 `alt`라는 설명 메모를 두게 됩니다.

`href`는 독자가 다음으로 갈 곳을 알려 줍니다

`href`는 링크에 붙이는 길 안내입니다. 어떤 단어나 문장을 누르면 다른 글, 다른 페이지, 혹은 같은 페이지의 특정 자리로 이동할 수 있습니다. 링크 태그가 ‘여기는 누를 수 있는 길입니다’라고 말한다면, `href`는 ‘이 길을 따라가면 어디에 도착하나요?’라고 답합니다.

`href="about.html"`이라고 적으면 ‘about.html이라는 페이지로 이어 주세요’라는 뜻이 됩니다. 멀리 있는 웹사이트 주소를 적을 수도 있고, 같은 문서 안의 특정 `id`를 가리킬 수도 있습니다. 그래서 href는 글에서 인용한 자료의 원래 자리로 독자를 안내하거나, 긴 안내문에서 원하는 항목으로 바로 이동하게 할 때 유용합니다.

좋은 링크는 독자를 낯선 곳으로 밀어 넣지 않습니다. 지금 읽고 있는 말과 자연스럽게 이어지는 자료, 더 알아볼 수 있는 출처, 다음에 필요한 페이지로 조심스럽게 안내합니다. `href`에 적는 주소는 단순한 글자가 아니라, 독자가 믿고 따라갈 길입니다. 링크를 만들 때에는 어디로 가는지 분명히 알려 주고, 그곳이 여전히 유효한지도 살피는 태도가 필요합니다.

`src`와 `href`를 구분하는 쉬운 질문

화면에 사진이나 자료를 가져와야 하나요? 그렇다면 `src`를 떠올립니다.

독자가 눌러 다른 곳으로 이동해야 하나요? 그렇다면 `href`를 떠올립니다.

`src`는 문서 안으로 무언가를 데려오는 주소입니다.

`href`는 문서에서 다른 곳으로 이어지는 길의 주소입니다.

속성의 이름은 문서의 관계를 또렷하게 합니다

`class`, `id`, `src`, `href`는 모두 짧은 단어이지만, 문서 안에서 서로 다른 관계를 만듭니다. class는 여러 요소를 한 무리로 연결하고, id는 하나의 자리에 고유한 이름을 붙입니다. src는 필요한 자료를 안으로 데려오고, href는 독자를 다른 문서와 생각으로 건너가게 합니다. 화면에 보이는 글은 같아 보여도, 이 정보들이 있으면 문서는 더 정확한 지도를 갖게 됩니다.

처음에는 네 가지를 한꺼번에 쓸 필요가 없습니다. 사진을 넣을 때는 src가 왜 필요한지, 링크를 만들 때는 href가 어디를 향하는지부터 생각해 보면 됩니다. 비슷한 요소가 여러 번 반복될 때 class를, 꼭 한 곳을 가리켜야 할 때 id를 꺼내면 됩니다. 속성은 외워야 하는 단어 목록이 아니라, 문서가 무엇을 연결하고 누구에게 어떻게 읽힐지를 세심하게 정하는 말입니다.

이 글의 핵심

속성은 태그에 이름, 주소, 설명처럼 더 구체적인 정보를 더합니다.

`class`는 여러 요소를 공통된 성격으로 묶는 반복 가능한 이름입니다.

`id`는 문서 안의 한 자리를 정확히 가리키는 고유한 이름입니다.

`src`는 사진이나 자료를 가져올 곳을, `href`는 독자가 이동할 곳을 알려 줍니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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