본문 바로가기
코딩 공부/HTML + CSS

[HTML+CSS] 02_단락의표현

chocbi 2020. 5. 9. 17:50

단락의 표현

#01. XHTML에서의 단락 관련 HTML 태그들

1) 단락을 나누기 위한 HTML 태그의 종류

  • XHTML에서는 단락을 통하여 문서의 구조를 표현하고, 이 태그들이 CSS와 결합하여 페이지의 레이아웃을 구성하게 된다.
태그 설명
div division의 약자로, "영역"을 의미
h1~h6 제목을 의미한다. 1수준부터 6수준까지있다.
ol 순서 있는 목록을 의미한다.
이태그안에는
  • 태그가 포함될 수 있으며, 포함된 항목은 순서대로 일련번호가 포함된 상태로 출력된다.
    		•
    ul 순서 없는 목록을 의미한다.
    이 태그 안에는
  • 태그가 포함될 수 있으며, 포함된 항목은 순서대로 도형표시가 포함된 상태로 출력된다.
    		•

    01-문서의제목.html

    <!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <!--h1~h6: 제목을 표시하기 위한 태그로서, 6단계의 수준을 갖는다.
        "h"는 Heading의 줄임말.
    -->
    <h1>H1 수준의 제목</h1>
    <h2>H2 수준의 제목</h2>
    <h3>H3 수준의 제목</h3>
    <h4>H4 수준의 제목</h4>
    <h5>H5 수준의 제목</h5>
    <h6>H6 수준의 제목</h6>
</body>

</html>

    #### 출력결과

    2) 목록 정의하기와 선긋기

    • 목록 정의 태그
          태그나
              로 목록의 범위를 명시한다.
              • ''
                  ''태그 --> 순서 있는 목록(Ordered List)으로 포함하는 항목 앞에 일련번호를 표시한다.
                1. "
                    "태그 --> 순서 없는 목록(Unordered List)으로 포함하는 항목 앞에 아이콘을 표시한다.(메뉴를 표시하는데 주로 사용된다.)
                2. 직선을 표시하는 "
                  " 태그
                  • 레이아웃의 영역을 나누는 과정에서 디자인 적용 전 영역을 구별하고자 사용

              02-목록정의.html

              <!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
<h1>사이트메뉴</h1>
<!-- 순서 없는 목록 (목록 앞에 점이 표시된다.) -->
<ul>
    <!-- 목록의 각 항목 정의 -->
    <li>카페</li>
    <li>블로그</li>
    <li>지식검색</li>
</ul>
< !--가로 줄 긋기 -->
    <hr />
    <h1>인기순위</h1>
    <!-- 순서 있는 목록 (목록 앞에 일련번호가 표시된다.) -->
    <ol>
        <!-- 목록의 각 항목 정의 -->
        <li>XHTML + CSS2</li>
        <li>HTML5 + CSS3</li>
        <li>Javascript + jQuery</li>
    </ol>
</body>
</html>

              출력결과

              3) 문단 정의 하기

              • 본문을 정의하기 위한 태그

                <p>
     ... 내용 ...
</p>
                - 게시물의 본문 등과 같이 하나의 문단을 구성하고자 할 경우 사용
- 서로 다른 "<p>" 태그 간에는 문단간 여백이 형성된다.

              • 인용문을 표현하기 위한 태그

                <blockquote>
    ... 내용 ...
</blockquote>
                • 다른 곳의 인용한 내용을 알리기 위해 사용된다.
                • 인용문임을 표현하기 위해서 왼쪽 들여쓰기가 형성된다.
                • 여러 개의 문단을 사용하기 위해서는 "

                  "태그나 "",

                    ,
                      을 포함할 수 있다.

                03-문단정의.html

                <!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <!-- 제목 -->
    <h1>웹 접근성이란?</h1>
    <!-- 소제목 -->
    <h2>
        장애에 구애 없이 모든 사람들이 정보를 공유할 수 있는 인터넷 공간 만들기
    </h2>
    <!-- 본문 -->
    <p>
        월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다.
    </p>
    <!-- 인용문 -->
    <blockquote>
        <p>
            월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리 (Tim Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였다.
        </p>
    </blockquote>
</body>

</html>

                출력결과

                4) 웹 페이지의 영역 나누기

                • 영역을 구부한기 위한 "

                  "태그

                  <div>
    ... 내용 ...
</div>
                  • 상단, 메뉴, 본문, 하단 등과 같이 웹 페이지의 레이아웃에 대한 영역을 구분하기 위해 사용된다.
                  • 서로 중첩되어 사용할 수 있으며, 다른 태그를 포함할 수 있다.

                • 모든 태그에 사용되는 id속성

                  <TAG id="값"> ...내용... </TAG>
                  • 현재 웹 페이지에서 고유한 요소를 의미하기 위한 값.
                  • 영역을 나누느 div에 사용될 경우, 해당 태그가 어떤 영역으로 사용되었는지를 파악하기 위해 지정된다.
                  • 다른 요소와 중복된 값을 갖지 못한다.

                • 카피라이트, 주소, 연락처 등을 표시하는

                  태그

                  <address>
    ...내용...
</address>
                  • address태그는 주소 뿐만이 아닌, 저작권 회사의 연락처나 주소 등을 의미하는 문장을 강조하기 위해 사용된다.
                  • 다른 문단의 구성요소로 포함된다.

                • 카피라이트 특수문자

                  • ⓒ형태의 특수문자를 HTML에서는 &copy;로 표시한다.

                • XHTML의 문서 구조를 표현

                  • <div>태그가 복잡하게 중복된 형태로 제작되어 HTML 문서 소스의 구조를 파악하기 어려웠다 이것을 각 영역의 구분은 <div>태그에 고유한 id값을 부여하여 처리한다.

                04-영역나누기.html

                <!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <!-- 사이트 전체 영역  (정렬,사이트 폭 설정 등의 용도) -->
    <div id="container">
        <!-- 사이트 상단 영역 (로고, 메인메뉴 등)-->
        <div id="header">
            <h1>우리사이트</h1>
        </div>
        <hr />
        <!-- 사이트 내용 영역 (사이드바, 내용 등)-->
        <div id="content">
            <!-- 왼쪽 사이드바 영역 -->
            <div id="sidebar">
                <h2>메뉴 선택하기</h2>
                <ul>
                    <li>메뉴1</li>
                    <li>메뉴2</li>
                    <li>메뉴3</li>
                </ul>
            </div>
            <!--영역간의 구분선 -->
            <hr />
            <!-- 오른쪽 본문 영역-->
            <div id="main">
                <!-- 제목 -->
                <h1>웹 접근성이란?</h1>
                <!-- 소제목 -->
                <h2>
                    장애에 구애 없이 모든 사람들이 정보를 공유할 수 있는 인터넷 공간 만들기
                </h2>
                <!-- 본문 -->
                <p>
                    월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다.
                </p>
                <!-- 인용문 -->
                <blockquote>
                    <p>
                        월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리 (Tim Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였다.
                    </p>
                </blockquote>
            </div>
        </div>
    </div>
    <hr />
    <!-- 사이트 하단 영역 (카피라이트, 주소 등)-->
    <div id="footer">
        <address>
            copyright&copy;itpaper.co.kr
        </address>
    </div>
    </div>
</body>

</html>

                출력결과

                5) HTML5에 추가된 시멘틱 요소

                • HTML5는 문서의 구조를 다양하게 표현하는 것을 지원
                  • HTML5에서는 <div>태그들이 헤더, 내용, 푸터, 메뉴 등 용도에 따라 세분화 되었다.
                  • 기존과 같이 <div>태그만으로 작업하는 것도 가능하지만, 용도에 맞는 태그들을 적절히 사용하면 더욱 시멘틱한 웹을 표현 가능하다.

                image-20191125224740776

                • 새롭게 추가된 구조를 표현하기 위한 시멘틱 태그들
                태그 설명
                section 일반적인 문서나 어플리케이션 영역을 표시한다.
                섹션의 제목을 나타내는 <h1> ~ <h6> 태그와 함께 사용할 수 있다.
                header 헤더 부분으로, 사이트의 소개나 네비게이션 영역등을 포함하기도 하고 내용 중간에서는 머릿글 역할을 하기도 한다.
                article 블로그 포스팅, 뉴스, 기사, 회사 소개등의 페이지에서 본문 내용을 의미하는 영역을 표시한다.
                aside 문서의 본모과 상관 없는 사이드바 영역이나 베너 영역등을 표시한다.
                footer 사이트의 하단 부분에 주로 사용하는 태그로서, 사이트 제작자나 저작권 정보 등을 나타낼 때 주로 사용한다.
                nav 사이트 안의 내비게이션 요소를 표시한다.
                주로 메뉴를 표시하기 위해 사용된다.
                hgroup 제목과 그에 관련괸 부제목을 하나로 묶어 표현한다.

                05-시멘틱요소.html

                <!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <!--페이지의 전체 폭을 결정하기위한 영역 -->
    <div>
        <!-- 상단 헤더 -->
        <header>
            <hgroup>
                <h1> 서바이벌 게임팀 - 건맨 </h1>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#">팀소개</a></li>
                    <li><a href="#">멤버전용</a></li>
                    <li><a href="#">커뮤니티</a></li>
                    <li><a href="#">가이드</a></li>
                </ul>
            </nav>
        </header>
        <!-- 중앙 영역 -->
        <section>
            <div>
                <h2>초보자 가이드</h2>
            </div>
            <div>
                <h2>서바이벌 게임이란?</h2>
                <p>
                    서바이벌 게임(Survival game) 또는 줄여서 서바이벌(Survival)은 총으로 하는 게임의 일종으로, 서로 총게임을 해서 맞추는 것이다.
                </p>
            </div>
            <div>
                <h2>서바이벌 게임의 목적</h2>
                <p>
                    * 무한 경쟁시대에 적응하는 한국인의 근로의욕과 확고부동한 정신자세를 구축<br />
                    * 조직구성원으로 하여금 창의적이며 유기적인 조직활동을 할 수 있는 실천능력을 배양<br />
                    * 기존의 사고와 행동에서 탈피, 새로운 각오와 신념으로 적극적인 조직 활동을 전개<br />
                    * 급속하게 변하는 현실상황에 따라 침착성과 판단력을 자율적으로 길러 위기대처 능력 배양<br />
                    * 대자연속에서 Team-Work을 형성하여 상부상조하는 동료애와 개인간의 조화능력을 함양<br />
                    * 훈련을 통한 경쟁으로 승부욕을 유발시키며 성취감과 도전의식을 심어주어 정신 재무장및 조직력 및 창의력강화<br />
                    * 호기심과 흥미를 유발시키며 군생활의 향수및 미지의 세계에 대한 상상력으로 유사시 국민행동에 지침을 성취동기
                </p>
            </div>
        </section>
        <!-- 하단 영역 -->
        <footer>
            <address>copyright 2012. itpaper.co.kr</address>
        </footer>
    </div>
</body>

</html>

                출력결과

    '코딩 공부 > HTML + CSS' 카테고리의 다른 글

    [HTML+CSS] 05_멀티미디어  (0) 2020.05.09
    [HTML+CSS] 04_표만들기  (0) 2020.05.09
    [HTML+CSS] 03_문장이나 단어를 강조하기  (0) 2020.05.09
    [HTML+CSS] 01_화면구현 시작하기  (0) 2020.05.09
    [HTML+CSS] 00_웹페이지 기본구조  (0) 2020.05.09

    '코딩 공부/HTML + CSS' Related Articles

    티스토리툴바