본문 바로가기
Front-end/HTML&CSS

Do it! HTML5 + CSS3 : 2장 텍스트 관련 태그들

은근이506 2020. 10. 26. 06:38

 텍스트를 덩어리로 묶어 주는 태그 

 

<hr> 태그 - 제목 표시하기

제목 텍스트는 일반 텍스트보다 굵고 진하게 표시된다. <hr> 태그는 제목을 뜻하는 heading의 줄임말인 h와 제목 크기를 나태는 숫자(1~6)을 사용해서 <h1>에서 <h6>까지 표현한다. <h1>이 가장 큰 제목이고, <h6>이 가장 작은 제목이다.

<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>

<P> 태그 - 단락 만들기

<p>태그의 p는 paragraph의 줄임말로 텍스트 단락을 만드는데 이때 단락이란, 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다. <p> 태그로 표시되는 텍스트 단락은 줄바꿈 없이 한줄로 표시되는데, 텍스트 줄이 브라우저 창의 너비보다 길어질 경우 줄이 자동으로 바뀐다.

<p>텍스트</p>

<br> 태그 - 줄 바꾸기

텍스트 단락에서는 한줄로 표시되지만, 웹 브라우저 창에서 줄바꿈을 하려면 줄을 바꿀 위치에 <br> 태그를 사용한다. <br> 태그는 break의 줄임말이고 닫는 태그 없이 사용된다.

<p>안녕하세요.<br>반갑습니다.</p>

<hr> 태그 - 분위기 전환을 위한 수평 줄 넣기

<hr> 태그는 horizontal의 줄임말로 수평 줄을 삽입할 때 사용한다. 이는 CSS를 이용해서 가로선을 없앨 수 있다. 닫는 태그는 없다.

<hr>

<blockquote> 태그 - 인용문 넣기

다른 블로그나 사이트의 글을 인용할 경우, <blockquote> 태그를 이용해 표시한다. 이때 인용 문장은 다른 텍스트보다 안으로 들여써져서 다른 텍스트와 구별된다. 사이트 주소가 명확할 경우, cite 속성을 이용해 인용 사이트 주소를 표시할 수도 있다.

<blockquote>인용 내용</blockquote>

기본적인 텍스트 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>제주 이색 여행지</h1>
    <h2>야외 텐트를 닮은 건축물 </h2>
    <p>아일랜드 출신 임피제 신부가 ...활용했습니다.</p>
    <p>제주에서 점차 다른 지방으로 ...남아 있는데<br>
    국내 근현대 건축사의 ...평가합니다.</p>
    <hr>
    <blockquote>성이시돌목장은 제주특별자치도 ...테쉬폰도 유명하다. (출처: 향토문화전자대전)</blockquote>
</body>
</html>

<pre> 태그 - 입력하는 그대로 화면에 표시하기

HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에서는 한개의 공백만 표시된다. 하지만 <pre> 태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시된다. <code>나 <samp>, <kbd> 같은 태그를 사용해 프로그램 소스를 표시할 때도 소스의 형태를 그대로 브라우저 창에 보여주여야 하므로 <pre> 태그가 사용된다. <pre>는 preformat의 줄임말이다.

 

단, <pre> 태그를 사용할 때는 접근성에 대해 한번 더 고려해야 한다. 웹문서를 소리로 읽어주는 기계나 정자로 표시해 주는 기계는 <pre> 태그가 적용된 부분을 만나면 건너뛰어 버리기 때문이다. 따라서 이 부분의 내용을 알 수 있게 대체 텍스트를 추가하는 것이 좋다.

<pre>텍스트</pre>

실습

다음은 <pre> 태그를 사용해 적절히 들여쓰면서 웹 브라우저 화면에 자바 스크립트 함수를 표시한 예제이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>로컬 스토리지(Local Storage)를 저장하는 함수 : </h3>
    <pre>
        function savetheLocal(){
            var second = decument.getElementById("second");
            var thevalue = second.value;
            localStorage.setItem(1, thevalue);
            gettheLocal();
        }
    </pre>
</body>
</html>

 텍스트를 한 줄로 표시하는 태그 

 

앞에서는 텍스트 태그 중 블록 레벨 태그에 대해 살펴보았고, 이번에는 텍스트에서 사용하는 태그 중, 줄바꿈 없이 텍스트를 표시하는 '인라인 레벨' 태그에 대해 알아본다. 이번에 소개되는 태그는 닫는 태그를 필수로 한다.

 

<strong> 태그, <b> 태그 - 굵게 표시하기

텍스트 중에서 굵게 표시하려고 할 때 <strong> 태그나 <b> 태그를 사용한다. 두 태그는 시각적으로는 큰 차이가 없으나 화면 낭독기에서 기능이 다르다. 화면 낭독기에서 <stroing> 태그는 의미적으로 강조된 것으로 취급하고, <b>는 단순히 구별을 위해 굵게 표시한 것으로 취급한다. 

    <strong>굵게 강조할 텍스트</strong>
    <b>굵게 표시할 텍스트</b>

<em> 태그, <i> 태그 - 이탤릭체로 표시하기

텍스트를 비스듬히 이탤릭체로 표시할 때는 <em> 태그나 <i> 태그를 사용한다. <em> 태그는 emphasis의 줄임말이며, <i> 태그는 italic의 줄임말이다. 의미적으로 강조하고 싶을때에는 <em>을 사용하고, 그 밖에는 <i> 를 사용한다. 

    <i>이탤릭체로 표시할 텍스트</i>
    <em>이탤릭체로 강조할 텍스트</em>

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>제주 이색 여행지 - 이중섭 거리</h2>
    <p><strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다<div class=""></div></p>
    <p><em>'아트마켓'</em>이라고도 부르는데 <i>문화예술체험</i>이나 <i>공연관람</i>을 할 수도 있고 <br>
    작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.</p>
</body>
</html>

<q> 태그 - 인용 내용 표시하기

<q> 태그는 인용한 내용을 표기하기 위한 것으로 quote의 줄임말이다. <blockquote>은 블록 레벨 태그이므로 인용 내용이 줄이 바뀌어 나타나며 다른 내용과도 구별되도록 안으로 들여써지지만, <q> 태그는 인라인 레벨 태그이므로 줄바꿈 없이 다른 내용과 함께 한 줄료 표시되고, 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 붙여 표시한다. 

<p>인용 내용</p>

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>웹 접근성</h1>
    <p>웹의 창시자인 팀 버너스 리의 <q cite ="http://www.w3.org/standards/webdesign/accessibility">
        웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.</q>
    라는 말로 웹 접근성을 설명한다.</p>
</body>
</html>

<mark> 태그 - 형광펜 효과 내기

<mark> 태그는 선택한 부분의 배경색이 노란색으로 되어 형관펜으로 그은 듯한 효과를 낸다. HTML4에서는 이 효과를 내기 위해 스타일 시트를 사용해야 했으나 HTML5에서는 <mark> 태그로 이런 효과를 쉽게 낼 수 있다.

<mark>텍스트</mark>

<span> 태그 - 줄바꿈 없이 영역 묶기

<span> 태그는 태그 자체로는 아무 의미가 없으나 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용된다. 

<span>내용</span>

실습

텍스트 단락 안에서 일부 글자만 형광펜으로 표시하거나 파란색으로 바꾼 예제이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h2>
    <p>아일랜드 출신 ....남아 있으며 <span style = "color:blue;">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다.</span>
    고 전문가들은 평가합니다.</p>
</body>
</html>

<ruby> 태그 - 동아시아 글자 표시하기

<ruby> 태그는 주로 동아시아 국가들의 굴자에 추석을 함께 표기하기 위한 용도로 사용되며 주석으로 표시할 내용을 <ruby> 태그 안에 <rt> 태그로 표시한다.

    <ruby>내용<rt>주석</rt></ruby>

다음 예제는 일본어 글자와 함께 표시하기 위해 <rt> 태그로 발음 기호를 감싸준 것이다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>루비(Ruby)는 1995년, 일본의 프로그래머인 마츠모토 유키히로 (<ruby>松本行弘<rt>まつもとゆきひろ</rt></ruby>)가 만든 프로그래밍 언어입니다.</p>
</body>
</html>

기타 텍스트 관련 태그들

태그 설명 예시
<abbr> 약자 표시. title 속성을 함께 사용할 수 있다.

<p><b><abbr title="Internet of Things">IOT</abbr></b>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다.</p>
<cite> 웹 문서나 포스트에서 참고 내용 표시

<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다. - 영화,<cite>'비포선셋'</cite>중</p>
<code> 컴퓨터 인식을 위한 소스 코드

<pre><code>function savetheLocal() {....}</code></pre>
<kbd> 키보드 입력이나 음성 명령 같은 사용자 입력 내용

<p>웹화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다.</p>
<small> 작게 표시되는 텍스트

<p>가격:13,000원 <small>(부가세 별도)</small></p>
<sub> 아래 첨자

<p>물의 화학식은 <b>H<sub>2</sub>O</b>다</p>
<sup> 위 첨자

<p>E=mc<sup>2</sup></p>
<s> 취소선

<p><s>34,000원</s><strong>19,000원</strong></p> 
<u> 밑줄

<p>링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u>u 태그</u></p>

 목록을 만드는 태그 

 

목록과 관련된 태그는 웹 표준 이전에는 텍스트를 정리하기 위한 용도였으나 이제는 이미지든 텍스트든 목록화해 정리할 수 있고, CSS를 적용해 메뉴나 본문 내용 등에서 다양하게 활용가능하다. 

<ul> 태그, <li> 태그 - 순서 없는 목록 만들기

순서가 필요하지 않은 목록을 만들 때는 <ul> 태그를 사용하고 <ul> 안에 <li> 태그(list item)를 사용해 각 항목을 표시한다. 이 때, 각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙는다. HTML4까지는 <li> 태그의 type 속성을 이용해 불릿을 바꿨으나, 이제는 CSS의 list-style-type 속성을 이용해서 불릿을 수정한다.

    <ul>
        <li>내용</li>
        <li>내용</li>
    </ul>

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>관광 안내 전화</h1>
    <p>한국관광공사에서는 ....실시하고 있습니다.</p>
    <p>1330에는 ...이용가능합니다.</p>
    <ul>
        <li>일반 전화: (국번없이) 1330</li>
        <li>휴대 전화: 064-1330</li>
    </ul>
</body>
</html>

<ol> 태그, <li> 태그 - 순서 목록 만들기

순서가 필요한 목록을 만들 때에는 <ol> 태그를 사용하고, <li> 태그를 사용해 각 항목을 표시한다. <ol> 태그에는 여러 속성이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있다.

    <ol>
        <li>내용</li>
        <li>내용</li>
    </ol>

<ol> 태그 속성으로 순서 목록의 숫자와 순서 바꾸기

<ol> 태그에는 순서와 관련된 몇가지 속성이 있으므로 속성 값에 따라 조금씩 다른 형태로 표시할 수 있다.

  • type 속성 : 항목 앞에 1, 2, ...와 같은 숫자가 기본으로 붙는데, type 속성을 이용해 숫자의 종류를 다양하게 조절할 수 있다. type 속성에서 사용할 수 있는 다음 표와 같다. 또한 이 속성 대신 CSS의 list-style-type 속성을 이용해 지정할 수도 있다.
속성값 설명
1 숫자(기본값)
a 영문 소문자
A 영문 대문자
i 로마숫자 소문자
I 로마숫자 대문자
  • start 속성 : 순서 목록을 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있다.
  • reversed 속성 : 항목을 역순으로 표시할 수 있다.

</li> 태그 생략이나 목록 중첩

<li> 태그를 사용하는데 여러 항목이 나열될 때 </li> 태그를 생략해도 <li> 태그가 다음에 오는 <li> 태그를 만나면 자동으로 그 전에 </li> 태그가 있는 것처럼 인식한다. 따라서 다음과 같이 작성이 가능하다.

    <ol>
        <li>내용
        <li>내용
        <li>내용
        <li>내용
    </ol>

또한 목록의 항목 안에서 또다른 목록을 포함할 수도 있다. 이때는 <li>와 </li> 사이에 목록을 넣으면 된다.

    <ol>
        <li>내용</li>
        <li>
            <ol>
                <li>내용1</li>
                <li>내용2</li>
                <li>내용3</li>
            </ol>
        </li>
    </ol>

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1일차
            <ol type="a">
                <li>해녀박물관</li>
                <li>낚시체험</li>
            </ol>
        </li>
        <li>2일차
            <ol type="a" start="3">
                <li>용눈이오름</li>
                <li>만장굴</li>
                <li>카약체험</li>
            </ol>
        </li>
    </ul>
</body>
</html>

<dl>, <dt>, <dd> 태그 - 설명 목록 만들기

<dl> 태그는 '제목'과 '설명'이 한 쌍인 설명 목록(description list)을 만든다. 가령, '단어/정의' 목록이나 '질문/답' 목록과 같은 관계를 표현할 수 있다. <dl> 태그는 목록을 만들고 <dt> 태그는 제목을, <dd> 태그는 설명을 표시한다. <dt> 태그 안에 여러개의 <dd> 혹은 <dt>를 가질 수 있다.

    <dl>
        <dt>제목</dt>
        <dd>설명</dd>
    </dl>

실습 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>올레 1코스</dt>
        <dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
        <dd>거리 : 14.6km(4~5시간)</dd>
        <dd>난이도 : 중</dd>
        <dt>올레 2코스</dt>
        <dd>코스 : 광치기 해변 - 온평 포구</dd>
        <dd>거리 : 14.5km(4~5시간)</dd>
        <dd>난이도 : 중</dd>
    </dl>
</body>
</html>

 온라인 프로필 사이트 만들기 

 

index-text.html 파일에는 전체적인 구조만 만들어져있고, 내용은 채워지지 않은 상태이다.

주석
HTML 문법에서 주석을 처리하는 형식은 <!-- 주석 내용 -->이다. 반면, CSS에서는 /* 주석 내용 */이다.

<p> 태그를 사용해서 간략한 자신의 소개글을 입력한다.

<!doctype html>
<html lang="ko">
<head>
	<title>온라인 프로필</title>
	<meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="container">
        <!-- 사이드바 -->
        <!-- <aside>
            <div id="namecard">

            </div>
            <div id="detail">
                               
            </div>
            <div id="sns">
                <h2>SNS</h2>

            </div>        
        </aside> -->
        <div id="main">
            <!-- 자기 소개 -->
            <section>
                <h2 class="subtitle">Who am I?</h2>
                <p>안녕하세요, 저는 국비 수업을 듣고 있는 <strong><mark>자바</mark> 개발 지망생</strong>입니다.
                    <br>다양한 경험을 하며 많은 것을 배우고 싶습니다.</p>

            </section>

            <!-- 경력 -->
            <section>
                <h2 class="subtitle">Experience</h2>
                <ul>
                    <li>배운 내용
                        <ul>
                            <li>자바 문법</li>
                            <li>네트워크</li>
                            <li>컴퓨터 기초 지식</li>
                            <li>알고리즘</li>
                            <li>프론트엔드</li>
                        </ul>
                    </li>
                    <li>진행 해본 프로젝트
                        <ul>
                            <li>bitflix</li>
                            <li>word-chain-game</li>
                        </ul>                        
                    </li>
                </ul>             
            </section>

            <!-- 숙련도 -->
            <section>
                <h2 class="subtitle">Skills</h2>

            </section>

            <!-- 학력 -->
            <section>
                <h2 class="subtitle">Education</h2>

            </section>
        </div>        
    </div>
</body>
</html>

이렇게 작성하고 브라우저를 통해 확인하면 다음과 같이 화면이 뜬다.

Who am I?

안녕하세요, 저는 국비 수업을 듣고 있는 자바 개발 지망생입니다.
다양한 경험을 하며 많은 것을 배우고 싶습니다.

Experience

  • 배운 내용
    • 자바 문법
    • 네트워크
    • 컴퓨터 기초 지식
    • 알고리즘
    • 프론트엔드
  • 진행 해본 프로젝트
    • bitflix
    • word-chain-game

Skills

Education

W3C HTML 검사기
웹 브라우저에서 원하는 결과가 나왔더라도 HTML 문법에 맞게 작성되었는지, 웹 표준에 어긋나는 부분은 없는지 확인해보아야한다. 웹표준을 제정하는 W3C에서는 https://validator.w3.org/에서 온라인 HTML 검사기를 제공하고 있다. 문서를 선택하고 검사를 하면 오류 여부와 문서에서 오류의 위치를 확인할 수 있다.

 표를 만드는 태그 

 

표는 행과 열로 이뤄져있고, 행과 열이 만나 이루는 영역을 셀이라고 한다. 하나의 표를 만들기 위해서는 여러개의 태그가 필요하다.

<table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기

기본적인 표 만들기

  • <table> 태그를 이용해 표 전체의 윤곽을 잡는다.
  • <tr> 태그로 행(row)을 먼저 만든다.
  • <td> 태그로 각 행마다 셀을 만든다.
  • 각 셀에 들어갈 내용은 <td>와 </td> 사이에 입력한다.

<th> 태그 - 표에 제목 셀 만들기

첫번째 행이나 열에 셀의 제목을 넣고자 하면, <td> 태그 대신 <th> 태그를 사용하여 제목 셀을 만들 수 있다. 이를 사용하면, 해당 셀에 들어가는 내용을 셀의 중앙에 위치시키고, 굵게 표시한다.

 

이렇게 만든 표는 다음과 같은 모습으로 표시된다. 기본적으로 표는 테두리 없이 표시되므로 border 속성을 이용하거나 CSS를 사용해서 테두리를 표시해야 한다.

    <table>
        <tr>
            <th>제목 셀</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <th>제목 셀</th>
            <td>2행 2열</td>
            <td>2행 3열</td>

        </tr>
    </table>

 

colspan, rowspan 속성 - 행 또는 열 합치기

행이나 열을 합치려면 <td> 태그나 <th> 태그 안에서 colspan 속성을 사용하여 몇개의 셀을 가로로 합칠지 지정한다.

<td colspan="합칠 셀의 개수"> 내용 </td>
<th colspan="합칠 셀의 개수"> 내용 </td>

행을 합칠 때에도 <td> 태그나 <th> 태그에서 rowspan 속성을 이용해 세로로 합칠 셀의 개수를 지정한다.

실습

    <table>
        <tr>
            <th>이름</th>
            <td></td>
            <th>연락처</th>
            <td></td>
        </tr>
        <tr>
            <th>주소</th>
            <td colspan="3"></td>
        </tr>
        <tr>
            <th>자기소개</th>
            <td colspan="3"></td>
        </tr>
    </table>

웹 표준에 맞게 작성하기 위해서는 소스 태그만으로 표의 구조를 이해할 수 있어야 한다. 화면 낭독기 뿐만 아니라, 시각적인 프로그램을 사용하지 않고, 웹문서를 살펴보는 경우도 고려해야 하기 때문이다.

<caption> 태그, <figcaption> 태그 - 표에 제목 붙이기

표에 제목을 붙일 때는 보통 <caption> 태그를 사용하지만 <figcaption> 태그를 사용할 수도 있다.

<caption> 태그 사용하기

<caption> 태그는 <table> 태그 바로 다음에 사용하며, <caption> 태그를 사용한 표 제목은 표의 위쪽 중앙에 표시된다.

<caption>표 제목</caption>

<caption> 안에는 다른 태그를 사용해서 제목을 여러줄로 할수도, 텍스트를 꾸밀 수도 있다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <caption>
            <strong>Modern Browser</strong>
            <p>국내에서 자주 사용하는 모던 브라우저</p>
        </caption>
        <tr>
            <th>브라우저</th>
            <th>제조업체</th>
            <th>다운로드</th>
        </tr>
        <tr></tr>
        <tr></tr>
    </table>
</body>
</html>

<figcaption> 태그 사용하기

<figure> 태그와 <figcaption> 태그를 사용할 수도 있다. 설명 글을 붙이고 싶은 대상을 <figure> 태그로 감싼 후, <figcaption> 태그를 이용해 제목이나 설명 글을 입력한다. <caption>과 달리 중앙에 정렬되지 않는다. <figcaption> 태그를 <table>보다 앞에 사용하면 표 위에 제목이 표시되고, </table> 다음에 추가하면 표 아래에 제목이 표시된다.

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <figure>
        <figcaption>
            <p>국내에서 자주 사용하는 <b>모던 브라우저</b></p>
        </figcaption>
        <table>
            <tr>
                <th>브라우저</th>
                <th>제조업체</th>
                <th>다운로드</th>
            </tr>
            <tr></tr>
            <tr></tr>
        </table>
    </figure>
</body>
</html>

aria-describedby 속성 - 표에 대한 설명 제공하기

화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 작성한 후, <table> 태그 안에 aria-describedby 속성에 추가해 연결하면 표를 이해하는데 도움이 된다.

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id = "summary"> 다음 표는 HTML5를 지원하는 모던 브라우저를 정리한 것입니다.
        최신 버전일수록 HTML5를 좀 더 많이 지원하기 때문에 최신 버전을 다운로드 하는 것이 좋습니다.</p>
        <table aria-describedby="summary">
            <caption>Modern Browser</caption>
            <tr>
                <th>브라우저</th>
                <th>제조업체</th>
                <th>다운로드</th>
            </tr>
            <tr></tr>
            <tr></tr>
        </table>
</body>
</html>

<thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기

표 아래쪽에 합계나 요약 내용을 표시하기도 하는 데, 이런 표의 각셀은 제목이 있는 부분과, 실제 내용이 있는 부분, 요약 내용이 있는 부분으로 표의 구조를 나누는 것이 좋다. 이때 사용되는 태그가 <thead>, <tbody>, <tfoot>이다.

    <table>
        <thead>
            <tr>...</tr>
        </thead>
        <tbody>
            <tr>...</tr>
        </tbody>
        <tfoot>
            <tr>...</tr>
        </tfoot>
    </table>
    
    <table>
        <thead>
            <tr>...</tr>
        </thead>
        <tfoot>
            <tr>...</tr>
        </tfoot>
        <tbody>
            <tr>...</tr>
        </tbody>
    </table>

HTML4에서는 <tfoot> 태그를 <tbody> 태그 다음에 쓰면 오류가 생겼기 때문에 대부분 웹 편집기들이 <tfoot> 을 <tbody> 앞에 사용하는 것을 기본으로 하고 있다. HTML5에서는 <tfoot>을 <tbody> 앞이나 뒤 어디든 써도 된다.

 

이렇게 적절히 표의 구조를 정의하면 화면 낭독기 만으로도 표를 제대로 이해할 수 있을 뿐만 아니라, CSS를 사용해 표의 제목부분과 요약 부분, 본문에 각각 다른 스타일을 적용할 수가 있다. 

 

또한 표의 본문이 길어져 화면을 넘어갈 경우, 자바 스크립트를 이용해 제목 부분과 요약 부분은 표의 위아래에 고정하고, 본문만 스크롤되도록 만들 수 있다. 또, 내용이 긴 표를 여러장에 걸쳐 인쇄할 때에도 각 장마다 표의 제목 부분과 요약부분이 자동으로 인쇄되므로 편리하다.

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <caption>제주특별자치도 학교 현황(2015.4.1 기준)</caption>
        <thead>
            <tr>
                <th>구분</th>
                <th>학교수</th>
                <th>학급수</th>
                <th>학생수</th>
                <th>교원수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>유치원</th>
                <td>117</td>
                <td>252</td>
                <td>5,547</td>
                <td>474</td>
            </tr>
            <tr>...</tr>
            <tr>...</tr>
        </tbody>
        <tfoot>
            <tr>
                <th>합계</th>
                <td>304</td>
                <td>3,437</td>
                <td>86,954</td>
                <td>6,111</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

 표 추가하기 

 

            <!-- 학력 -->
            <section>
                <h2 class="subtitle">Education</h2>
                <table>
                    <caption>학력 사항</caption>
                    <thead>
                        <tr>
                            <th>출신학교</th>
                            <th>전공</th>
                            <th>기간</th>
                            <th>구분</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>고려대학교</th>
                            <th>미디어학부</th>
                            <th>2016.3 - 2021.8</th>
                            <th>재학</th>
                        </tr>
                        <tr>
                            <th>짐실여자고등학교</th>
                            <th> - </th>
                            <th>2014.3 - 2016.2</th>
                            <th>졸업</th>
                        </tr>
                    </tbody>
                </table>
            </section>

 

'Front-end > HTML&CSS' 카테고리의 다른 글

Do it! HTML5 + CSS3 : 5장 CSS 기초  (0) 2020.11.16
Do it! HTML5 + CSS3 : 3장 이미지와 하이퍼링크  (0) 2020.11.01
Do it! HTML5 + CSS3 : 1장 HTML 기본 다지기  (0) 2020.10.19

'Front-end/HTML&CSS' Related Articles

티스토리툴바