본문 바로가기
Frontend Developer/HTML

[HTML] 제목, 문단, 컨테이너 태그 ( <h1>, <p>, <div>, <span> )

by 똑쥐 2021. 2. 5.

 

제목 태그 : <h1> - <h6>

h 태그라고도 하고 헤딩(heading) 태그라고도 하는, HTML의 제목 요소이다. '구획 제목 요소'라고도 하는 데, 단계별로 구획을 나눌 수 있기 때문이다. 구획 단계는 <h1>이 가장 높고 <h6>로 숫자가 올라갈 수록 단계는 낮아진다. 

<h1>Level 1</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6</h6>

이렇게 단계 별로 글씨 크기와 굵기에 차이가 생긴다. 그러나 글씨 크기를 위해 제목 태그를 사용하면 안된다. 글씨 크기라던가 굵기는 모두 CSS의 스타일적 요소이다. HTML은 전달하고자 하는 정보 콘텐츠를 위한 마크업일 뿐, 스타일링은 CSS로 처리할 수 있고 그렇게 해야한다! 따라서 논리적으로 생각해 이 제목이 어떤 레벨인지를 결정하고 그에 맞는 제목 태그를 사용하면 된다. 하지만 처음엔 막상 마크업을 하다 보면 <h3> 태그를 써야 하는지, <h4> 태그를 써야 하는지 구획 단계에 정확한 판단이 서지 않을 경우가 많다. 이걸 엄청나게 고민하며 작성할 필요는 없고.. 다음 두 가지 정도만 유념하면 된다.

  • 페이지 당 하나의 <h1> 태그만 사용할 것

  • 제목 단계를 건너뛰지 말 것

<h1> 태그를 여러 개 써도 오류는 아니지만 <h1>은 그 페이지의 가장 중요한 대 제목과도 같으므로 전체 페이지의 목적을 설명할 수 있는 하나의 <h1>을 작성하는 것이 모범 사례라 할 수 있다. 또한 제목 단계를 건너뛰지 않고, <h1>으로 시작해 <h2>, <h3> 이렇게 순차적으로 기입하는 것이 좋다. 단, 같은 단계의 다른 주제일 경우 중첩 사용은 가능하다.

 

 

문단 태그 : <p>

<p> 요소는 하나의 문단을 나타낸다. 

<p>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi nostrum labore, officiis optio tenetur accusantium odit! Alias explicabo perspiciatis doloribus aspernatur omnis soluta, delectus accusamus enim minima molestiae commodi, hic quam eligendi, exercitationem eos! Animi impedit ut corrupti nemo! Repudiandae dolores aliquid et illum, nihil corrupti nulla distinctio perferendis repellendus. Consequatur explicabo accusamus et! Odio nulla ducimus minus voluptatum corrupti, labore assumenda magni corporis excepturi? Voluptate, minima hic dolorum earum eius placeat perspiciatis maiores id et recusandae qui optio itaque ullam distinctio fugit tenetur dicta, ipsa beatae sed ipsum dolorem molestias blanditiis voluptates doloribus? Facere eveniet sint est omnis deleniti.
</p>
<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quidem voluptate hic debitis ab ipsum dignissimos qui quasi totam quis, modi repellendus explicabo assumenda, nisi laborum asperiores, culpa labore maiores rem repudiandae vitae iure facere nulla nihil. Necessitatibus nostrum officiis voluptatem alias quod id voluptatibus aut veniam hic? Fugiat odit sit, eveniet aut modi molestiae aliquid ab dolor fuga et quo qui nostrum quia dignissimos suscipit. Explicabo id cum optio, ipsa culpa repellat amet inventore consequuntur laudantium. Pariatur porro quos deleniti libero! Deleniti suscipit temporibus vero dignissimos, enim eveniet cum molestias, optio at repellendus ducimus amet, eaque aspernatur numquam consectetur accusamus rerum? Totam hic eum culpa! Dolores a, voluptates dolorem excepturi odio aut corrupti labore esse rerum harum ratione ea laboriosam. A minima maiores at libero, quas sit nostrum numquam fuga. Magni atque a, incidunt sint ratione odio nisi laborum cupiditate quam explicabo nesciunt tempora culpa praesentium animi temporibus placeat recusandae laudantium amet maxime sit neque dolor. Eius ea fuga dolore enim beatae expedita pariatur reiciendis explicabo molestias et, quam quo corporis aspernatur nam consequatur totam consectetur dignissimos architecto perferendis rerum tempora asperiores qui. Est quas perspiciatis tempore dolorem, soluta accusantium eaque maiores nobis blanditiis porro accusamus, harum illum vero.
</p>

각각의 <p> 태그 안에 더미 텍스트(dummy text)를 넣어주면 문단이 형성되고, 문단 간 한 줄의 간격으로 분리되는 것을 알 수 있다. 이러한 문단 간 간격이나, 문단 시작의 들여쓰기와 같은 것은 후에 CSS로 처리한다.

 

 

컨테이너 태그 : <div>, <span>

<div> 요소는 순수 컨테이너로 아무것도 표현하지 않는다. 즉, 브라우저에 특별한 의미 전달을 하지 않는다. 다만 다른 요소들을 묶는 그룹핑(grouping) 역할을 하는 태그로, 이는 후에 CSS 작업 시 class, id 선택자로 꾸미고자 하는 HTML 요소를 지정하는 데 유용하게 쓰일 수 있다. 

 

<span> 요소는 '인라인' 컨테이너로 역시 아무것도 나타내지는 않지만, 스타일 적용을 위해 사용한다. 

 

<div>와 <span>은 유사하지만, <div>는 블록 레벨 요소인 반면 <span>은 인라인 요소라는 차이가 있다. 마크업을 할 때에도 이 차이를 유념해야 하는데, 그럼 블록 레벨 요소와 인라인 요소가 무엇인지 알아보자.

<head>
    <style>
        div {
            border: 1px solid red;
        }
        span {
            color: white;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
    	<p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus suscipit blanditiis sequi reiciendis atque nostrum quia quidem quo facilis vel architecto expedita et,hic accusantium numquam porro dolor natus eum aspernatur repellendus esse nihil molestias? Dolores, corrupti ad aliquam quis corporis assumenda ducimus, dolore perferendis nisi repellendus expedita impedit voluptates.
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam, sapiente amet eum odit est illum voluptates quasi repellendus officia cupiditate, tenetur fugit? Commodi molestias sit voluptate veritatis cupiditate sequi! Aut aperiam molestias tenetur! Suscipit sunt aperiam doloribus fugit perferendis sint, illo fugiat adipisci iure distinctio odio nesciunt, aliquam hic debitis! Expedita reprehenderit explicabo quidem sapiente iure molestias laudantium harum quibusdam facilis delectus, similique provident debitis repudiandae ipsam corporis aspernatur, cum voluptate minus exercitationem asperiores. Quibusdam dolorum, obcaecati earum vitae unde, nulla corporis ab fuga in excepturi eos amet eveniet soluta cum ullam veniam vel aspernatur consequatur esse explicabo non aliquam labore. <span>Laborum nemo id tempore,</span> aspernatur sunt accusamus, officia nobis, quibusdam est deserunt totam iure explicabo eius numquam. Vel atque eaque molestiae, natus quis minima corrupti delectus, voluptatibus eligendi rem excepturi ducimus earum facilis adipisci modi consequatur voluptate nemo fuga eos dolore, quos aliquam. Pariatur nostrum, quam maiores mollitia quod excepturi, commodi nisi neque qui iure reiciendis odio fugiat fugit quaerat dolorum deserunt beatae magnam laboriosam veritatis sunt dignissimos nesciunt? Optio commodi officiis odit reiciendis dolore illo tempora consectetur quae nemo itaque sed rem alias, delectus, reprehenderit est corrupti voluptatibus nisi debitis saepe facilis consequatur perspiciatis iste? Porro, deleniti modi?
        </p>
    </div>
</body>

먼저 위 코드를 보면, 두 개의 <p> 태그로 만들어진 문단 두 개를 <div>가 감싸고 있고, 두 번째 문단 중간에 <span>으로 감싸진 문장이 있다. 그리고 <div> 요소는 빨간색 테두리를, <span> 요소는 글 색상을 흰색으로 바꾸고 배경색을 빨간색을 주고 있다. (편의를 위해 HTML 문서 내에 스타일 코드를 작성했지만 이는 외부 CSS 파일에 작성하는 것이 더 좋다!!)  

 

HTML의 요소는 크게 '블록 레벨' 요소와 '인라인' 요소로 분류할 수 있다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지해 블록(block)을 만든다. 상자를 쌓는 것처럼! 위에서 다룬 <p> 태그에서 각 문단이 자동으로 한 줄 간격으로 분리가 되는 것을 보았다. <p> 또한 블록 요소이기 때문에 마치 라잌 상자처럼 하나의 문단 상자 밑에 다른 문단 상자가 오는 것 처럼 요소를 개행하는 것이다. 이를 감싸고 있는 <div> 또한 블록 요소라고 했으니, <div> 요소에 준 스타일 대로 빨간색 테두리로 자신의 영역을 블록 형태로 나타내고 있다. 블록 레벨 요소는 기본적으로 좌우 양쪽으로 최대한 늘어나 부모 요소의 모든 너비를 차지하고 새로운 블록 레벨 요소는 언제나 새로운 줄에서 시작한다.

반면에 <span> 태그로 감싸진 문장은 문단 내에 그대로 존재하며 스타일이 적용되고 있다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 할당된 공간만을 차지한다. 그래서 <span>으로 감싸진 Laborum nemo id tempore, 라는 문장만큼의 너비만을 자신에게 할당된 공간으로 여기고 배경색을 빨간색으로 바꾸게 된 것이다. 정리하자면!

  • <div>는 블록 레벨 요소이다. 블록 레벨 요소는 새로운 줄에서 시작하고(개행), 부모 요소의 전체 너비를 차지한다.

  • <span>은 인라인 요소이다. 인라인 요소는 콘텐츠의 흐름 내에서 새로운 줄을 만들지 않으며 필요한 너비만 차지한다.

 

 

더미 텍스트(dummy text)

웹사이트를 만들거나 디자인 시 빈 공간을 채우기 위한 placehorder(자리 표시 자)로서 의미 없는 텍스트를 채워 넣는 것이다. 이런 더미 텍스트를 생성하는 사이트도 있지만 보통은 코드 에디터 프로그램에서 'lorem'을 치면 자동으로 더미 텍스트가 생성된다. 'lorem' 뒤에 10, 100, 200 등 숫자를 붙이면 그만큼의 더미 텍스트가 생겨나 쉽고 유용하게 사용할 수 있다. 

 

무료 lorem-ipsum 생성기 사이트 ‣ www.websiteplanet.com/ko/webtools/lorem-ipsum/

 

무료 로렘 입숨 생성기 – 더미 & 필터 텍스트 생성기

해당 무료 온라인 도구를 사용하여 단어, 문장, 단락을 로렘 입섬 텍스트로 빠르게 생성하세요. 디자인, 모형, 웹 사이트 더미 텍스트가 생성됩니다.

www.websiteplanet.com

보통 lorem-ipsum을 많이 사용하겠지만, 청춘 예찬과 별 헤는 밤으로 더미 텍스트를 만들 수 있는 사이트도 있다. 한글 판 더미 텍스트 생성기 사이트 ‣ hangul.thefron.me/

 

한글입숨 - 무의미한 한글 텍스트 생성기

한글판 로렘입숨. 무의미한 한글 텍스트를 생성해 줍니다.

hangul.thefron.me

 

 

'Frontend Developer > HTML' 카테고리의 다른 글

[HTML] 앵커 태그로 하이퍼링크 만들기 ( <a> )  (0) 2021.02.06
[HTML] 강조, 인용, 출처 태그 ( <em>, <strong>, <blockquote>, <q>, <cite> )  (0) 2021.02.06
[HTML] <head> 태그와 <body> 태그 채우기 ( <title>, <link>, <style>, <meta>, <script> )  (0) 2021.02.04
[HTML] <!DOCTYPE html> 선언과 문서 구조, 부모・자식・형제 요소  (0) 2021.02.03
HTML이란? HTML의 기본, 태그!  (0) 2021.02.02

관련글

댓글

티스토리툴바