6. 제목, 문단, 구분선, 정형화된 텍스트

프론트엔드/HTML & CSS 강의

6. 제목, 문단, 구분선, 정형화된 텍스트

syleemomo 2023. 6. 8. 13:00

728x90

큼직큼직한 구분은 시맨틱 태그를 사용하면 되므로 지금부터는 내부에 들어가는 컨텐츠에 사용되는 세부적인 태그들을 알아보자!

제목 (heading)

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>heading tag</title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    
    <body>
        <h1>heading 1</h1>
        <h2>heading 2</h2>
        <h3>heading 3</h3>
        <h4>heading 4</h4>
        <h5>heading 5</h5>
        <h6>heading 6</h6>
    </body>
    
</html>

웹페이지에서 가장 중요하다고 생각되는 제목은 h1 태그로 작성한다. 그 다음으로 중요하다고 생각되는 제목은 h2 태그로 작성하고, 중요도에 따라 h1~h6 태그를 선택해서 사용하면 된다. 주의할 점은 제목의 크기에 따라 중요도가 결정되는 것이 아니라 태그에 따라 중요도를 선택해야 한다. 제목의 크기는 CSS 스타일에 따라 h3 가 h1보다 더 큰 경우가 있을수 있기 때문이다.

개발자 도구에서 제목(h1~h6) 태그의 스타일을 확인해보면 기본적으로 상하 여백이 적용되어 있는 것을 확인할 수 있다. 이는 브라우저의 디폴트 스타일이다. 현재 크롬 브라우저에서 h1 태그의 디폴트 마진은 0.67em 정도로 설정되어 있다. 디폴트 스타일은 브라우저마다 다르기 때문에 브라우저 호환성을 생각한다면 디폴트 스타일을 제거하고 새로 스타일링하는 것이 좋다.

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>heading tag</title>
    </head>
    
    <body>
        <h1>heading 1</h1>

        <h2>heading 2</h2>
        <h2>heading 2</h2>
        <h2>heading 2</h2>
        <h2>heading 2</h2>
        <h2>heading 2</h2>
    </body>
    
</html>

동일한 중요도를 가지는 제목은 위와 같이 리스트 형태로 나열될 수 있다.

제목 태그의 그룹화 - hgroup

https://developer.mozilla.org/ko/docs/Web/HTML/Element/hgroup

<hgroup> - HTML: Hypertext Markup Language | MDN

HTML <hgroup> 요소는 문서 구획의 다단계 제목을 나타냅니다. 다수의 <h1>-<h6> 요소를 묶을 때 사용합니다.

developer.mozilla.org

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>heading tag</title>
    </head>
    
    <body>
        <hgroup>
            <h1>Frankenstein</h1>
            <p>Or: The Modern Prometheus</p>
        </hgroup>
        <p>Victor Frankenstein, a Swiss scientist, has a great ambition: to create intelligent life. But when his creature first stirs, he realizes he has made a monster. A monster which, abandoned by his master and shunned by everyone who sees it, follows Dr Frankenstein to the very ends of the earth.</p>
    </body>
    
</html>

hgroup 은 제목을 그룹으로 묶을때 사용되는 시맨틱 태그이다. 단순히 h1~h6 태그만 그룹으로 묶는 것이 아니라 제목 영역이라고 생각되는 모든 태그를 그룹으로 묶으면 된다.

<hgroup>
  <h1>주요 제목</h1>
  <h2>부제목</h2>
</hgroup>

MDN 문서에는 hgroup 이 HTML5 명세에서 제거되었으며, hgroup 을 사용한다고 해서 브라우저가 이를 인식하지는 못하고 이론적으로만 유효하다고 한다.

참고: <hgroup> 요소는 W3C HTML5 명세에서 제거되었고, WHATWG판 HTML에만 남아있습니다. 
그러나 대부분의 브라우저에서 부분적으로 구현 중이므로 사라지지는 않을 것으로 보입니다. 
다만, <hgroup> 요소의 주요 목적이 HTML 명세의 개요 알고리즘에서 제목의 표시 방법을 설정하기 위함이며, 
어떠한 브라우저도 개요 알고리즘을 구현하지 않았음을 고려할 때, <hgroup>의 의미는 이론적으로만 유효합니다.

문단 (paragraph)

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>heading tag</title>
    </head>
    
    <body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde ratione dolore, facere fugiat natus quod deserunt officiis nam earum. Nobis nam tempore ea porro dolorem possimus aliquid nostrum commodi?
        Quaerat ab tenetur unde maxime dignissimos temporibus! Asperiores, tenetur in. Dolorum reprehenderit sapiente autem quo fugiat, impedit veniam corporis delectus eos aliquam sit exercitationem eum dolore quidem culpa necessitatibus. Reiciendis?
        Temporibus vel in natus fugit aut, dolorem autem consequatur maxime harum libero quaerat molestias error distinctio soluta odio at nesciunt eum eos facere? Quis doloremque expedita nobis vero voluptatibus perspiciatis.</p>
    </body>
    
</html>

p 태그는 가장 많이 쓰이는 태그 중 하나이다. paragraph 의 첫글자이며 긴 문장들을 묶어서 하나의 문단을 표현할때 사용한다. p 태그는 블록레벨 요소이며 인라인 요소들을 하나로 묶어주는 역할도 한다.

https://www.lipsum.com/

Lorem Ipsum - All the facts - Lipsum generator

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spec

www.lipsum.com

lorem ipsum 은 해당 사이트에 있는 아무 의미없는 텍스트를 생성해준다. 이를 더미 텍스트라고 한다. 웹페이지를 디자인하거나 코딩할때 아직 컨텐츠 내용이 정해지지 않은 경우 웹페이지의 특정 위치에 더미 텍스트를 배치해서 디자인을 미리 체크해볼 수 있다.

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>heading tag</title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    
    <body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde ratione dolore, facere fugiat natus quod deserunt officiis nam earum. Nobis nam tempore ea porro dolorem possimus aliquid nostrum commodi?
            Quaerat ab tenetur unde maxime dignissimos temporibus! Asperiores, tenetur in. Dolorum reprehenderit sapiente autem quo fugiat, impedit veniam corporis delectus eos aliquam sit exercitationem eum dolore quidem culpa necessitatibus. Reiciendis?
            Temporibus vel in natus fugit aut, dolorem autem consequatur maxime harum libero quaerat molestias error distinctio soluta odio at nesciunt eum eos facere? Quis doloremque expedita nobis vero voluptatibus perspiciatis.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde ratione dolore, facere fugiat natus quod deserunt officiis nam earum. Nobis nam tempore ea porro dolorem possimus aliquid nostrum commodi?
            Quaerat ab tenetur unde maxime dignissimos temporibus! Asperiores, tenetur in. Dolorum reprehenderit sapiente autem quo fugiat, impedit veniam corporis delectus eos aliquam sit exercitationem eum dolore quidem culpa necessitatibus. Reiciendis?
            Temporibus vel in natus fugit aut, dolorem autem consequatur maxime harum libero quaerat molestias error distinctio soluta odio at nesciunt eum eos facere? Quis doloremque expedita nobis vero voluptatibus perspiciatis.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde ratione dolore, facere fugiat natus quod deserunt officiis nam earum. Nobis nam tempore ea porro dolorem possimus aliquid nostrum commodi?
            Quaerat ab tenetur unde maxime dignissimos temporibus! Asperiores, tenetur in. Dolorum reprehenderit sapiente autem quo fugiat, impedit veniam corporis delectus eos aliquam sit exercitationem eum dolore quidem culpa necessitatibus. Reiciendis?
            Temporibus vel in natus fugit aut, dolorem autem consequatur maxime harum libero quaerat molestias error distinctio soluta odio at nesciunt eum eos facere? Quis doloremque expedita nobis vero voluptatibus perspiciatis.</p>
    </body>
    
</html>

p 태그에는 기본적으로 상하 여백이 존재한다. 이는 p 태그에 대한 브라우저의 디폴트 스타일이다. 크롬 브라우저에서 확인해보면 p 태그의 상하 마진은 1em 정도이다. 디폴트 스타일은 브라우저마다 다르다.

p 태그는 대표적인 블록레벨 요소 중 하나이며 인라인 요소들을 묶어서 그룹화할때 사용할 수 있다. a 태그는 대표적인 인라인레벨 요소이며 아래 코드는 p 태그를 사용하여 a 태그들을 그룹화하였다.

<p>
    <a href="">naver</a>
    <a href="">daum</a>
</p>

p 태그는 블록레벨 요소이지만 p 태그 안에는 다른 블록레벨 요소가 들어갈 수 없다. 다시말해 section, article, h1 태그는 p 태그 안에 포함할 수 없다. 즉, p 태그는 인라인 레벨 요소만 묶을수 있다.

<body>
    <p>
        <a href="">naver</a>
        <a href="">daum</a>
        <h1>p 태그 안에 넣어도 밖으로 빠져나온다.</h1>
    </p>
</body>

p 태그 안에 포함하더라도 아래와 같이 h1 태그는 p 태그 밖으로 빠져나온다.

텍스트의 일부분을 꾸며주는 태그

태그	설명
b	볼드체
i	이탤릭체
strong	볼드체 (강조의 의미를 포함)
em	이탤릭체 (강조의 의미를 포함)
small	작은 글자
sub	아래에 달라붙는 글자
sup	위에 달라붙는 글자
ins	글자 아래쪽에 추가하는 선
del	글자를 가로지느는 선

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>heading tag</title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            b, i, strong, em,
            small, sub, sup, ins, del{
                background-color: goldenrod;
            }

        </style>
    </head>
    
    <body>
        <p>Lorem ipsum dolor, sit <b>amet</b> consectetur adipisicing elit. <i>Harum</i> excepturi consequatur accusantium nesciunt voluptate rem <small>minima</small> eos nihil architecto, voluptatibus <strong>voluptates</strong> at possimus sint ad nisi similique eius ex asperiores.
        Laudantium, earum <sub>veritatis</sub> mollitia velit dolore dolores in explicabo eius voluptatibus tempore doloremque <sup>voluptatum</sup> eligendi tenetur est sequi itaque animi minus quas. Qui, voluptates commodi! Distinctio iste nisi tempore quae?
        Dolorum animi accusamus consectetur. <ins>Laudantium</ins> reprehenderit possimus nihil recusandae voluptas dolore a id excepturi fugiat corporis similique facilis necessitatibus <del>corrupti</del> deserunt atque saepe, minima fugit <em>officiis</em> vel quis dolorem illo!</p>
    </body>
    
</html>

브라우저 화면에서 확인해보면 아래와 같다. 태그가 사용된 부분은 쉽게 구분하기 위하여 CSS 스타일을 적용하였다. strong, em 은 브라우저가 강조의 의미를 인식할 수 있는 태그이지만 b, i 태그는 단순히 스타일만 꾸며주고 브라우저가 인식하지는 못한다.

내용의 구분 - hr 태그

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>heading tag</title>
    </head>
    
    <body>
       <div id="wrapper">
           <header>
               <h1>Logo</h1>
               <nav>
                   <h2>Menu</h2>
               </nav>
           </header>
           <hr>
           <main>
               <aside>
                   <h2>Sub Menu</h2>
               </aside>
               <hr>
               <section>
                   <h2>Main content</h2>
               </section>
           </main>
           <hr>
           <footer>
               <h2>Footer</h2>
               <address>
                   <p>서울시 양천구 목동</p>
                   <p>010-1234-5678</p>
               </address>
           </footer>
       </div> 
    </body>
    
</html>

주제를 분리할때는 hr 태그를 사용하면 된다. hr 은 horizontal rule 의 약자이며 주제의 분리, 화제의 전환, 컨텐츠 구분 등에 사용된다. 웹페이지에서 문서의 헤더, 본문, 푸터, 사이드메뉴 등을 구분할때 사용한다. 본문은 다시 컨텐츠 내용에 따라 hr 태그로 분리할 수 있다.

hr 태그도 기본적으로 상하 여백이 존재한다. 개발자 도구에서 확인해보면 크롬 브라우저에서 hr 태그의 디폴트 상하마진은 0.5em 이다. 물론 디폴트 스타일은 브라우저마다 다르다.

정형화된 텍스트 - pre 태그

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>정형화된 텍스트</title>
    </head>
    
    <body>
       <h1>정형화된 텍스트</h1>
       <p>
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio nam, iusto incidunt, nesciunt velit nostrum eligendi nobis odit delectus fugit vel! Distinctio, et perspiciatis! Corrupti officia ullam sit earum eius?
           Perspiciatis exercitationem totam, sit provident repellendus architecto animi aperiam libero facere aspernatur hic nobis, incidunt excepturi molestias natus quidem quis sunt modi omnis nam mollitia recusandae dolore adipisci ex. Numquam!
           Veniam sunt aspernatur mollitia nisi culpa a hic dolor, quaerat numquam officiis repudiandae esse in unde, quisquam tenetur dolore molestiae nesciunt commodi fuga! Illo suscipit facere, ut laboriosam voluptate harum?
       </p>
    </body>
    
</html>

위와 같은 HTML 문서에서 공백이나 들여쓰기를 해야 한다고 가정해보자! 그래서 아래와 같이 스페이스바와 탭키 그리고 엔터키를 사용하여 문장 사이에 공백을 주고 들여쓰기를 하였다.

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>정형화된 텍스트</title>
    </head>
    
    <body>
       <h1>정형화된 텍스트</h1>
       <p>
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio nam, 
           
           iusto incidunt, nesciunt velit nostrum eligendi nobis odit delectus fugit vel! 
           
           Distinctio, et perspiciatis! Corrupti officia ullam sit earum eius?
                    Perspiciatis exercitationem totam, sit provident repellendus architecto animi aperiam libero facere aspernatur hic nobis, incidunt excepturi molestias natus quidem quis sunt modi omnis nam mollitia recusandae dolore adipisci ex. Numquam!
                    Veniam sunt aspernatur mollitia nisi culpa a hic dolor, quaerat numquam officiis repudiandae esse in unde, quisquam tenetur dolore molestiae nesciunt commodi fuga! Illo suscipit facere, ut laboriosam voluptate harum?
       </p>
    </body>
    
</html>

하지만 확인해보면 원하는대로 공백과 들여쓰기가 적용되지 않는다. 이렇게 HTML 문서에서는 스페이스 하나 이상의 공간은 무시하고 화면에 보여준다. 그렇다고 하더라도 상황에 따라 지금처럼 공백과 들여쓰기를 하고 싶은 경우도 있다.

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>정형화된 텍스트</title>
    </head>
    
    <body>
       <h1>정형화된 텍스트</h1>
       <pre>
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio nam, 
           
           iusto incidunt, nesciunt velit nostrum eligendi nobis odit delectus fugit vel! 
           
           Distinctio, et perspiciatis! Corrupti officia ullam sit earum eius?
                    Perspiciatis exercitationem totam, sit provident repellendus architecto animi aperiam libero facere aspernatur hic nobis, incidunt excepturi molestias natus quidem quis sunt modi omnis nam mollitia recusandae dolore adipisci ex. Numquam!
                    Veniam sunt aspernatur mollitia nisi culpa a hic dolor, quaerat numquam officiis repudiandae esse in unde, quisquam tenetur dolore molestiae nesciunt commodi fuga! Illo suscipit facere, ut laboriosam voluptate harum?
       </pre>
    </body>
    
</html>

이런 상황에서는 pre 태그를 사용하면 원하는대로 공백과 들여쓰기가 적용이 된다.

https://blog.naver.com/PostView.nhn?blogId=reactionweb&logNo=221391803770&parentCategoryNo=&categoryNo=10&viewDate=&isShowPopularPosts=true&from=search

html 특수문자 코드표 엔티티코드 모음

출처 - http://egloos.zum.com/keep/v/1030642

blog.naver.com

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>정형화된 텍스트</title>
    </head>
    
    <body>
       <h1>정형화된 텍스트</h1>
       <pre>
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio nam, 
           
           iusto incidunt, nesciunt velit nostrum eligendi nobis odit delectus fugit vel! 
           
           Distinctio, et perspiciatis! Corrupti officia ullam sit earum eius?
                    Perspiciatis exercitationem totam, sit provident repellendus architecto animi aperiam libero facere aspernatur hic nobis, incidunt excepturi molestias natus quidem quis sunt modi omnis nam mollitia recusandae dolore adipisci ex. Numquam!
                    Veniam sunt aspernatur mollitia nisi culpa a hic dolor, quaerat numquam officiis repudiandae esse in unde, quisquam tenetur dolore molestiae nesciunt commodi fuga! Illo suscipit facere, ut laboriosam voluptate harum?
        <code>
&lt;!DOCTYPE html&gt;
&lt;html lang="ko"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;정형화된 텍스트&lt;&#47;title&gt;
    &lt;&#47;head&gt;
    &lt;body&gt;
        &lt;h1&gt;정형화된 텍스트&lt;&#47;h1&gt;
        &lt;script src="main.js"&gt;&lt;&#47;script&gt;
    &lt;&#47;body&gt;
&lt;html&gt;</code>
        </pre>
    </body>
    
</html>

코드를 그대로 보여주려고 할때는 pre 태그 안에 code 태그를 추가하면 된다. 이때 부등호(< >)나 슬래쉬(/)는 엔티티 코드를 사용해서 표현하였다.

연습문제 1

수업내용에서 배운걸 활용해서 티스토리 메인화면 하단에 있는 아래 텍스트를 디자인해보세요!

1. 문단의 너비는 50% 로 설정한다.
2. 페이지 가로 방향으로 중앙에 정렬한다.
3. 폰트크기나 컬러는 티스토리 메인 페이지에서 개발자 도구를 열어서 확인한다.

728x90

저작자표시 비영리 변경금지

'프론트엔드 > HTML & CSS 강의' 카테고리의 다른 글

8. 표를 만드는 테이블 요소 (0)	2023.06.09
7. 목록을 표현하는 요소 (0)	2023.06.08
5. HTML5 섹셔닝 (시맨틱 태그) (0)	2023.06.07
4. div 요소로 작성하는 문서의 그룹화 (0)	2023.06.07
3. 텍스트 정의 요소 (0)	2023.06.05

현재글6. 제목, 문단, 구분선, 정형화된 텍스트

250x250

웹개발과 일상에 대해 포스팅하는 블로그입니다.

데이터베이스 쿼리연습, 배열, em, Array, express 배포, 리액트 연습문제, MongoDB, 히로쿠 서버, 몽고디비 쿼리연습, node.js todo, node.js 프로젝트, 몽고디비 연동, 리액트 연습과제, 자바스크립트 배열, 노드 프로젝트, 리액트 스타일링, 몽고디비, 컴포넌트 스타일링, 부트스트랩 연습, NoSQL,

Today :
Yesterday :