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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

body 태그: 독자와 만나는 웹문서의 본문

html

CSS는 왜 HTML과 나뉘어 있을까

css

CSS 선택자: 꾸밀 대상을 찾아 부르는 법

css

CSS 문법은 어떻게 HTML과 만날까

css

CSS 박스 모델: 태그가 화면의 자리가 되는 법

css

6 body 태그: 독자와 만나는 웹문서의 본문

웹페이지를 열었을 때 우리가 읽고 누르고 살펴보는 거의 모든 것은 body 안에 있습니다. 화면의 큰 제목, 이어지는 문단, 사진, 다른 글로 가는 링크, 주문을 위한 버튼, 댓글을 적는 칸까지 모두 body에서 독자를 만납니다. head가 문서를 소개하고 준비하는 조종실이라면, body는 준비된 문서가 실제로 독자에게 펼쳐지는 본문이자 무대입니다.

그러나 body를 단지 ‘보이는 것을 모두 넣는 상자’라고 생각하면 금세 길을 잃습니다. 웹문서에는 제목과 본문, 안내와 메뉴, 독립된 글과 부가 설명처럼 서로 다른 역할이 있습니다. HTML은 이 차이를 태그로 나누어 적게 합니다. body 안의 태그를 잘 고르면 화면이 조금 더 예뻐지는 데서 그치지 않고, 독자와 브라우저가 페이지의 흐름을 더 정확하게 이해할 수 있습니다.

이번 글은 body에서 특히 자주 쓰는 태그들을 한꺼번에 외우게 하려는 목록이 아닙니다. 글을 쓰는 자리, 페이지의 구역을 나누는 자리, 다른 곳으로 이어지는 자리, 사진을 보여 주는 자리, 독자가 답을 건네는 자리를 차례로 살펴보려 합니다. 태그의 이름보다 먼저 ‘이 내용은 문서에서 무슨 일을 하는가’를 물으면, body는 복잡한 상자가 아니라 잘 정리된 한 편의 글로 보이기 시작합니다.

1.body가 문서의 내용 전체를 담는 이유를 알아봅니다.

2.제목·문단·목록처럼 글의 흐름을 만드는 태그를 살펴봅니다.

3.header·main·section·article·footer처럼 페이지의 구역을 나누는 태그를 이해합니다.

4.링크·이미지·버튼·입력칸이 독자와 문서를 연결하는 방식을 정리합니다.

body는 한 페이지의 실제 내용을 담습니다

HTML 문서에는 body가 하나 있습니다. 그 안에는 브라우저가 화면에 펼칠 내용이 들어갑니다. 웹 표준은 body를 문서의 내용 자체를 나타내는 자리로 설명합니다. 즉, 제목과 문단처럼 읽는 내용뿐 아니라 메뉴, 이미지, 표, 영상, 입력칸처럼 독자가 페이지에서 만나고 이용하는 요소들이 이곳에 놓입니다.

head에 적는 title, meta, link 같은 태그가 ‘이 페이지를 어떻게 준비하고 소개할까요?’에 답한다면, body는 ‘독자가 이 페이지에서 무엇을 읽고 무엇을 할까요?’에 답합니다. 그래서 여행 안내 페이지라면 여행지의 제목과 설명, 지도 사진, 예약 링크가 body에 들어갑니다. 온라인 서점이라면 책 표지, 줄거리, 가격, 장바구니 버튼이 body에 들어갑니다. 내용의 종류는 달라도, 실제 만남이 일어나는 자리라는 점은 같습니다.

body 안에는 매우 다양한 태그가 들어갈 수 있습니다. 하지만 처음부터 모든 태그를 한 종류의 도구 상자처럼 쌓아 둘 필요는 없습니다. 먼저 글의 흐름을 만들고, 그 흐름을 몇 개의 의미 있는 구역으로 나누며, 필요한 곳에 사진과 링크, 반응할 수 있는 요소를 더하면 됩니다. 좋은 body는 요소가 많은 문서가 아니라, 독자가 다음에 무엇을 읽고 어디로 갈지 자연스럽게 알 수 있는 문서입니다.

body를 시작하며 기억할 것

body는 독자가 페이지 안에서 실제로 읽고 보고 누르는 내용을 담습니다.

일반적인 HTML 문서에는 body가 하나 있습니다.

제목·글·사진·링크·버튼·입력칸 모두 body에서 제자리를 찾습니다.

무엇을 많이 넣을지보다, 각 내용이 어떤 역할인지 먼저 구분하는 것이 중요합니다.

제목과 문단은 body의 읽는 흐름을 만듭니다

가장 먼저 만나는 태그는 제목과 문단입니다. `h1`부터 `h6`까지의 제목 태그는 글의 크기를 키우는 장식이 아니라, 문서 안에서 내용이 어떤 순서로 이어지는지 알려 주는 이정표입니다. 보통 h1은 페이지가 다루는 가장 큰 주제를 말하고, 그 아래의 h2와 h3은 그 주제를 더 작은 갈래로 나눕니다. 책의 책 제목, 장 제목, 소제목이 서로 다른 역할을 하는 것과 같습니다.

`p` 태그는 한 문단을 담습니다. 한 문단에는 하나의 생각을 놓고, 생각이 바뀌면 다음 문단으로 넘어가는 습관은 종이 글에도 웹 글에도 유효합니다. 문단을 줄바꿈만으로 흉내 내기보다 p로 구분해 두면, 브라우저와 화면을 읽어 주는 도구가 이곳이 하나의 생각 단위라는 사실을 더 잘 이해합니다. 독자에게도 숨을 고를 곳이 생깁니다.

여러 내용을 나란히 정리할 때에는 목록 태그가 잘 어울립니다. 순서가 중요하지 않은 준비물이나 특징은 `ul`과 `li`로, 첫째·둘째처럼 순서가 중요한 과정은 `ol`과 `li`로 묶습니다. ul과 ol은 목록 전체를 감싸고, li는 그 안의 한 항목을 뜻합니다. 목록은 문단을 짧게 잘라 붙이는 방법이 아니라, 서로 같은 무게로 나열된 내용임을 알려 주는 구조입니다.

때로는 특별히 강조할 한 문장, 다른 사람의 말, 코드나 표처럼 글의 흐름과 조금 다른 요소도 필요합니다. body에는 이런 다양한 표현을 위한 태그도 있습니다. 하지만 처음에는 제목·문단·목록을 정확히 나누는 일만으로도 긴 글의 질서가 크게 달라집니다. 가장 기본적인 태그가 가장 자주 독자의 길을 밝혀 줍니다.

글의 흐름을 만드는 태그

`h1`~`h6`: 제목의 크기 경쟁이 아니라 내용의 위계를 나타냅니다.

`p`: 한 가지 생각을 담는 문단을 만듭니다.

`ul`: 순서가 중요하지 않은 목록 전체를 묶습니다.

`ol`: 순서가 중요한 목록 전체를 묶습니다.

`li`: 목록 안의 항목 하나를 나타냅니다.

페이지에도 현관과 거실, 본문과 뒷마당이 있습니다

한 웹페이지는 긴 글 하나만 있는 경우도 있지만, 대개 여러 구역으로 이루어집니다. 맨 위에는 사이트 이름과 메뉴가 있고, 가운데에는 지금 읽을 핵심 내용이 있으며, 옆에는 관련 글이나 도움말이 놓이고, 맨 아래에는 저작권이나 연락처가 나옵니다. 모든 것을 div라는 이름 없는 상자에 넣을 수도 있지만, HTML에는 각 구역이 맡은 일을 더 분명하게 말해 주는 태그들이 있습니다.

`header`는 페이지나 글의 시작 부분에서 제목, 소개, 메뉴 같은 머리말 역할을 합니다. `nav`는 여러 페이지나 같은 페이지 안의 중요한 이동 경로를 모아 둔 안내판입니다. `main`은 이 페이지에서 가장 중심이 되는 내용을 담습니다. 예를 들어 기사 페이지에서는 기사 본문이, 상품 페이지에서는 상품을 살펴보고 고르는 내용이 main에 들어갈 수 있습니다. main은 한 페이지의 주인공을 위한 자리라고 생각하면 쉽습니다.

`footer`는 페이지나 글의 끝에서 출처, 저작권, 작성자, 관련 링크처럼 마무리 정보를 담습니다. header와 footer는 페이지 전체에 한 번씩만 쓰이는 경우가 많지만, 긴 article 안에서 그 글만의 제목과 작성 정보, 마무리 정보를 위해 다시 쓸 수도 있습니다. 중요한 것은 화면에서 위에 있으니 header, 아래에 있으니 footer가 아니라, 그 구역이 시작을 소개하는가, 끝의 정보를 정리하는가를 보고 고르는 일입니다.

`aside`는 지금 읽는 중심 내용의 곁에서 도움을 주는 부가 정보입니다. 관련 글, 짧은 용어 설명, 광고, 작성자 소개처럼 본문에서 잠시 비켜난 내용을 담을 수 있습니다. 독자가 aside를 읽지 않아도 main의 핵심 흐름은 이해되어야 합니다. 그렇게 생각하면 ‘부가 정보’와 ‘본문에서 빠지면 안 되는 정보’를 나누기가 쉬워집니다.

페이지의 큰 구역을 나타내는 태그

`header`: 페이지나 글의 제목·소개·메뉴가 시작되는 머리말입니다.

`nav`: 독자가 중요한 곳으로 이동하도록 돕는 길 안내입니다.

`main`: 그 페이지에서 가장 중심이 되는 내용을 담습니다.

`aside`: 본문 옆에서 도움을 주는 관련·부가 정보를 담습니다.

`footer`: 출처, 작성자, 저작권처럼 끝에서 정리할 정보를 담습니다.

`section`과 `article`, `div`는 무엇이 다를까요

body를 나누다 보면 section, article, div가 모두 ‘상자’처럼 보여 헷갈립니다. 하지만 셋은 같은 상자가 아닙니다. `section`은 하나의 주제로 묶이는 내용의 갈래입니다. 예를 들어 긴 글 안의 ‘HTML 태그란 무엇인가’와 ‘속성은 왜 필요한가’ 같은 소제목 아래의 내용은 각각 하나의 section이 될 수 있습니다. 보통 독자가 이 구역의 제목을 보고 어떤 주제인지 알 수 있을 때 section이 자연스럽습니다.

`article`은 그 자체로 떼어 내어 읽어도 하나의 완결된 글이 되는 내용을 위한 태그입니다. 블로그 글, 뉴스 기사, 상품 후기, 독립된 댓글처럼 다른 곳에 옮겨도 의미가 이어지는 단위가 article에 잘 어울립니다. 한 페이지에 여러 개의 글 요약이 나열되어 있다면, 각 요약은 article이 될 수 있습니다. 반대로 하나의 긴 글 안에서 주제만 나뉘는 곳은 article보다 section에 가까운 경우가 많습니다.

`div`는 특정한 뜻을 미리 품지 않은 일반 상자입니다. 여러 요소를 함께 묶어 배치하거나, 꾸밈과 동작을 적용하기 위한 경계가 필요할 때 씁니다. ‘여기는 독립된 글입니다’나 ‘여기는 하나의 주제입니다’라고 말할 수 있다면 article이나 section이 더 분명할 수 있습니다. 하지만 그런 특별한 뜻 없이 단지 함께 묶어야 한다면 div가 정직한 선택입니다.

세 태그 중 무엇이 더 좋은 것은 아닙니다. 내용의 의미에 맞는 태그가 좋은 태그입니다. section을 쓰면서 제목도 없고 무슨 주제인지 설명할 수 없다면 div가 더 나을 수 있습니다. 반대로 독립된 글을 div로만 감싸면, 사람과 도구가 그 글의 성격을 알아볼 기회를 놓칠 수 있습니다. 태그를 고르는 일은 상자의 모양을 고르는 일이 아니라, 안에 담긴 내용의 이름을 고르는 일입니다.

세 가지 상자를 나누는 질문

‘이곳은 하나의 주제 갈래인가요?’라면 `section`을 생각합니다.

‘이것만 따로 떼어도 하나의 글로 읽히나요?’라면 `article`을 생각합니다.

‘특별한 뜻 없이 함께 묶어 두기만 하면 되나요?’라면 `div`를 생각합니다.

링크와 이미지는 body를 바깥 세계로 연결합니다

`a` 태그는 독자가 다른 페이지나 문서 안의 특정 자리로 갈 수 있게 하는 링크입니다. 앞선 글에서 href가 목적지를 적는 주소라고 배웠다면, a는 그 주소를 독자가 누를 수 있는 길로 만드는 태그입니다. 링크 문장은 ‘여기를 누르세요’처럼 모호하기보다, ‘HTML 속성 알아보기’처럼 어디로 갈지 짐작하게 적는 편이 친절합니다. 링크의 목적이 글 안에 담길 때 독자는 길을 선택할 수 있습니다.

`img` 태그는 이미지를 보여 줍니다. src에는 가져올 이미지의 주소를, alt에는 이미지를 보지 못할 때 대신 전할 설명을 적습니다. alt는 사진 파일의 이름을 반복하는 자리가 아닙니다. 사진이 글에서 무엇을 말하는지 알려 주는 짧은 문장이 좋습니다. 예를 들어 ‘cover-01.jpg’보다 ‘노란 표지의 독립출판 책이 창가에 놓인 모습’이 독자에게 더 많은 장면을 전합니다.

이미지가 글의 중요한 근거라면, 그림 설명을 함께 두는 일도 좋습니다. 단순히 분위기를 더하는 사진과, 읽지 않으면 글의 뜻을 놓칠 수 있는 도표는 필요한 설명의 양이 다릅니다. body 안의 이미지도 문단과 마찬가지로 이야기의 흐름 속에 놓일 때 더 잘 읽힙니다. 사진을 많이 넣는 것보다, 사진이 왜 이 글에 필요한지 드러내는 편이 중요합니다.

버튼과 입력칸은 독자가 답을 건네는 자리입니다

웹페이지는 책처럼 읽기만 하는 문서일 수도 있지만, 독자가 무언가를 선택하고 입력하고 보낼 수 있는 공간이 되기도 합니다. `button`은 누르면 어떤 행동을 시작하게 하는 버튼입니다. ‘구매하기’, ‘더 보기’, ‘검색’처럼 버튼의 이름은 누른 뒤 어떤 일이 일어나는지 분명하게 말해야 합니다. 예쁜 아이콘만 놓고 뜻을 감추면 처음 온 독자는 어디를 눌러야 할지 알기 어렵습니다.

`form`은 독자가 적거나 고른 여러 정보를 한 번에 모아 전달하는 양식입니다. 회원 가입, 검색, 연락처 문의, 배송지 작성이 form의 예입니다. 그 안에는 글자를 적는 `input`, 긴 내용을 적는 `textarea`, 선택지를 고르는 `select` 같은 요소가 들어갈 수 있습니다. `label`은 각 입력칸이 무엇을 묻는지 알려 주는 이름표입니다. ‘이름’, ‘이메일 주소’, ‘문의 내용’처럼 말입니다.

입력칸은 보기에만 그럴듯하게 만드는 장식이 아닙니다. 독자가 무엇을 적어야 하는지 명확히 알려 주고, 키보드만으로도 이동할 수 있으며, 화면을 읽어 주는 기능도 질문과 입력칸의 관계를 알 수 있게 해야 합니다. body는 정보를 일방적으로 보여 주는 공간을 넘어, 독자가 자기 답을 안전하고 분명하게 건넬 수 있는 대화의 자리가 됩니다.

독자와 상호작용하는 기본 태그

`button`: 누르면 어떤 행동이 시작되는지 알려 주는 버튼입니다.

`form`: 입력한 내용을 모아 전달하는 한 묶음입니다.

`input`: 짧은 글, 날짜, 선택처럼 한 가지 값을 입력받습니다.

`textarea`: 문의나 의견처럼 긴 글을 입력받습니다.

`select`: 준비된 선택지 가운데 하나를 고르게 합니다.

`label`: 입력칸이 무엇을 묻는지 명확하게 알려 줍니다.

body는 태그의 전시장이 아니라 독자를 위한 흐름입니다

body에서 쓸 수 있는 태그는 오늘 살펴본 것보다 훨씬 많습니다. 표를 만들 때의 태그, 날짜와 시간을 적는 태그, 영상과 소리를 넣는 태그도 있습니다. 하지만 태그를 많이 아는 것과 읽기 좋은 body를 만드는 일은 다릅니다. 좋은 body는 독자가 페이지를 처음 만났을 때 이것이 무엇에 관한 내용인지 알고, 필요한 정보를 차례로 읽고, 원한다면 다음 행동을 할 수 있게 합니다.

이를 위해서는 제목과 문단으로 생각의 흐름을 먼저 세우고, 의미 있는 구역을 header·main·footer와 section·article로 나누며, 링크와 이미지에 필요한 설명을 더하면 됩니다. 버튼과 입력칸이 있다면 독자가 무엇을 하게 되는지도 분명히 말해야 합니다. 태그는 화면을 복잡하게 만들기 위한 부품이 아니라, 문서가 독자에게 더 정확히 말을 걸기 위한 언어입니다.

이 글의 핵심

body는 제목·글·사진·링크·버튼처럼 독자가 실제로 만나는 문서의 내용을 담습니다.

h1~h6, p, ul·ol·li는 글의 위계와 읽는 흐름을 만듭니다.

header·nav·main·aside·footer와 section·article은 페이지의 역할 있는 구역을 드러냅니다.

a·img·button·form은 독자가 다른 정보로 가고, 보고, 직접 답하게 하는 통로입니다.

태그를 고를 때에는 모양보다 ‘이 내용은 문서에서 어떤 일을 하는가’를 먼저 생각합니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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