[HTML] 텍스트 관련 태그와 예제 - 2

🌐 FrontEnd/HTML & CSS 2022. 5. 8. 00:59

텍스트와 관련된 태그들

HTML 에서 텍스트와 관련된 태그들을 공부해봅시다.

3. 목록을 만드는 태그들

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

각 항목 앞에 작은 원이나 사각형 같은 불릿 (bullet) 이 붙습니다.
기본형 : <ul>
<li> 내용 </li>
<li> 내용 </li>
...
</ul>

(1) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>스타벅스 윤리경영 핫라인</title>
</head>
<body>
    <h1>윤리경영 핫라인</h1>
    <h3>개선/제안 사항을 접수하는 제도 입니다.</h3>
    <p>윤리경영 핫라인은 스타벅스 임직원, 고객 및 주주 등 기업 이해관계자가 부정부실 행위를 신고하거나 윤리경영 측면에서
        잘못된 관행이나 정책부문에 대한 개선/제안 사항을 접수하는 제도 입니다.</p>
    <ul>
        <li>주소 : 서울특별시 중구 퇴계로 100 9F 주식회사 에스씨케이컴퍼니 윤리경영 핫라인 담당자 앞</li>
        <li>팩스번호 : 02) 3015 - 1106</li>
        <li>이메일 : sck_ethics@shinsegae.com</li>
    </ul>
</body>
</html>

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

항목을 나열하되 순서가 필요한 목록을 만들 때 사용됩니다.
type 속성 : 1, a, A, i, I
start 속성 : 순서 목록은 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있습니다.
reserved 속성 : 항목을 역순으로 표시합니다.
기본형 : <ol>
<li> 내용 </li>
<li> 내용 </li>
...
</ol>

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>1박 2일 여행 코스</title>
</head>
<body>
    <h1>1박 2일 여행 코스</h1>
    여행 일자 목록
    <ol>
        <li>1일차</li>
        <li>2일차</li>
    </ol>
    <ul>
        <li>1일차
            <ol type="a">
                <li>오프닝</li>
                <li>점심 복불복</li>
                <li>등산</li>
                <li>저녁 복불복</li>
            </ol>
        </li>
        <li>2일차
            <ol type="a" start="5">
                <li>아침 복불복</li>
                <li>클로징</li>
            </ol>
        </li>

    </ul>
</body>
</html>

(3) <dl>, <dt>, <dd> 태그 – 설명 목록 만들기

사전 구성처럼 '제목'과 '설명' 이 한 쌍인 설명 목록을 만듭니다.
기본형 : <dl>
<dt> 제목 </dt>
<dd> 설명 </dd>
</dl>

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>포켓몬스터</title>
    <style>
        dl {
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>포켓몬스터를 알아보자</h1>
    <dl>
        <dt>파이리</dt>
        <dd>도감 번호 : 004</dd>
        <dd>성비 : 남 87.5% 여 12.5%</dd>
        <dd>타입 : 불꽃</dd>
    </dl>
    <dl>
        <dt>피카츄</dt>
        <dd>도감 번호 : 025</dd>
        <dd>성비 : 남 50% 여 50%</dd>
        <dd>타입 : 전기</dd>
    </dl>
</body>
</html>

4. 표를 만드는 태그

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

<th> 태그? : <td> 태그 대신 사용하면 간단히 제목 셀 (굵게 표시하고 셀의 중앙에 배치) 을 만들 수 있습니다.
colspan, rowspan 속성 : 열 또는 행 합치기 (ex. colspan = "합칠 셀 갯수")
기본형 : <table>
<tr>
<td> 내용 </td>
<td> 내용 </td>
...
</tr>
...
</table>

(1) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>표 만들기</title>
    <style>
        td{
            padding: 5px; /* 셀 테두리와 내용 사이의 간격(패딩) */
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>제목 셀1</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <th>제목 셀2</th>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
        <tr>
            <th>제목 셀3</th>
            <td>3행 2열</td>
            <td>3행 3열</td>
        </tr>
    </table>

</body>
</html>

예제를 보면, <tr> 태그와 <th> 태그를 이해할 수 있습니다.

<tr> : 새로운 행을 만듭니다.

<th> : 열을 추가합니다.

이제 열 합치기의 colspan 과 행 합치기의 rowspan 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>표 합치기</title>
    <style>
        th {
            padding: 15px; /* 셀 테두리와 내용 사이의 간격(패딩) */
        }
    </style>
</head>
<body>
    <table border="3">
        <colgroup>
            <col style="width: 100px;"> /* 칼럼 간격 */
            <col style="width: 300px;">
            <col style="width: 100px;">
            <col style="width: 300px;">
        </colgroup>
        <tr>
            <th>이름</th>
            <td>손흥민</td>
            <th>연락처</th>
            <td>@hm_son7</td>
        </tr>
        <tr>
            <th>소속팀</th>
            <td colspan="3">토트넘 홋스퍼 FC</td>
        </tr>
        <tr>
            <th>자기소개</th>
            <td colspan="3">대한민국 국적의 토트넘 홋스퍼 FC 소속 축구선수. 주 포지션은 윙어이며 현재 대한민국 축구 국가대표팀 주장을 맡고 있다.</td>
        </tr>
        <tr>
            <th rowspan="2">등번호</th>
            <td>국가대표</td>
            <td colspan="2">7</td>
        </tr>
        <tr>
            <td>토트넘 홋스퍼</td>
            <td colspan="2">7</td>
        </tr>
    </table>

</body>
</html>

(2) <caption> 태그, <figcaption> 태그 – 표에 제목 붙이기

<caption> 태그는 <table> 태그 바로 다음에 사용합니다.
<figcaption> 태그를 <table> 태그보다 앞에 사용하면 표 위에 제목이 표시됩니다.
<figcaption> 태그를 </table> 태그 다음에 추가하면 표 아래에 제목이 표시됩니다.
aria-describedby 속성 : 표에 대한 설명 제공하기

(2) <caption> 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"> 
    <title>표 제목 붙이기 - 1</title> 
    <style>
        td, th {
            padding: 10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
        }
    </style>
</head>
<body>
    <h2>모던 브라우저 정리하기</h2>
    <p>정리 표를 첨부하도록 하겠습니다.</p>
    <table border="1">
        <caption>
            <strong>Modern Browser</strong>
            <p>국내에서 자주 사용하는 모던 브라우저</p> 
        </caption>
        <tr>
            <th>브라우저</th> 
            <th>제조업체</th> 
            <th>다운로드</th>
        </tr> 
        <tr>
            <th>크롬(Chrome)</th>
            <td>Google</td> 
            <td>https://www.google.com/chrome/</td>
        </tr>
        <tr>
            <th>파이어폭스(Firfox)</th> 
            <td>Mozilla</td>
            <td>https://www.mozilla.org/ko/firefox/</td>
        </tr>
        <tr>
            <th>엣지(Edge)</th>
            <td>Microsoft</td> 
            <td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
        </tr>
    </table>
</body>
</html>

(2) <figcaption> 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"> 
    <title>표 제목 붙이기 - 2</title> 
    <style>
        td, th {
            padding: 10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
        }
    </style>
</head>
<body>
    <h2>모던 브라우저 정리하기</h2>
    <p>정리 표를 첨부하도록 하겠습니다.</p>
    <figure>
        <figcaption>
            <p>
                국내에서 자주 사용하는 <b>모던 브라우저</b>
            </p>
        </figcaption>
        <table border="1">
            <tr>
                <th>브라우저</th> 
                <th>제조업체</th> 
                <th>다운로드</th>
            </tr>
            <tr>
                <th>크롬(Chrome)</th>
                <td>Google</td> 
                <td>https://www.google.com/chrome/</td>
            </tr>
            <tr>
                <th>파이어폭스(Firfox)</th>
                <td>Mozilla</td> 
                <td>https://www.mozilla.org/ko/firefox/</td>
            </tr>
            <tr>
                <th>엣지(Edge)</th>
                <td>Microsoft</td> 
                <td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
            </tr>
        </table>
    </figure>
</body>
</html>

(2) aria-describedby 속성 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>aria-descibedby 속성 사용하기</title>
    <style>
        td, th {
            padding: 10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
        }
    </style>
</head>
<body>
    <h2>모던 브라우저 정리하기</h2>
    <p>정리 표를 첨부하도록 하겠습니다.</p>
    <p id="summary">
    다음 표는 HTML5를 지원하는 모던(Modern Browser)를 정리한 것입니다. 최신 버전일수록 HTML5를 좀더 많이 지원하기 때문에 최신 버전을 다운로드하는 것이 좋습니다.
    </p>
    <table border="1" aria-describedby="summary">
        <caption>Modern Browser</caption>
        <tr>
            <th>브라우저</th>
            <th>제조업체</th>
            <th>다운로드</th>
        </tr>
        <tr>
            <th>크롬(Chrome)</th>
            <td>Google</td> 
            <td>https://www.google.com/chrome/</td>
        </tr>
        <tr>
            <th>파이어폭스(Firfox)</th>
            <td>Mozilla</td> 
            <td>https://www.mozilla.org/ko/firefox/</td>
        </tr>
        <tr>
            <th>엣지(Edge)</th>
            <td>Microsoft</td> 
            <td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
        </tr>
    </table>
</body>
</html>

(3) <thead>, <tbody>, <tfoot> 태그 – 표 구조 정의하기

기본형 : <thead>
<tr> ... </tr>
<thead>
<tbody>
<tr> ... </tr>
</tbody>
<tfoot>
<tr> ... </tr>
</tfoot>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"> 
    <title>표 구조 알아보기</title>
    <style>
        th, td {
            width: 80px; /* 셀의 너비 */
            padding: 10px; /* 셀 테두리와 내용 사이의 간격(패딩) */ 
        }

        thead, tfoot {
            background: #eeeeee; /* thead와 tfoot의 배경 색 */
        }
    </style>
</head>
<body>
    <table border="1">
        <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>
                <th>초등학교</th> 
                <td>111</td> 
                <td>1,720</td> 
                <td>37,686</td> 
                <td>2,632</td>
            </tr>
            <tr>
                <th>중학교</th> 
                <td>44</td> 
                <td>699</td> 
                <td>21,274</td> 
                <td>1,412</td>
            </tr>
            <tr>
                <th>고등학교</th> 
                <td>29</td> 
                <td>676</td> 
                <td>22,019</td> 
                <td>1,433</td>
            </tr>
            <tr>
                <th>특수학교</th> 
                <td>3</td> 
                <td>90</td>
                <td>428</td>
                <td>160</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>합계</th> 
                <td>300</td> 
                <td>3,437</td> 
                <td>86,954</td> 
                <td>6,111</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

(4) <col>, <colgroup> 태그 – 여러 열 묶어 스타일 지정하기

<col> 태그 : 한 열에 있는 모든 셀을 묶습니다. 닫는 태그는 없습니다.
<colgroup> 태그 : 여러 개의 <col> 태그를 묶어 그룹으로 스타일을 적용합니다.
기본형 : <colgroup>
<col>
...
</colgroup>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"> 
    <title>colgroup 이용해보기</title> 
    <style>
        td {
            width: 100px; /* 셀 너비 */ 
            height: 30px; /* 셀 높이 */
        }
    </style>
</head>
<body>
    <table border="1">
        <caption>colgroup 연습</caption>
        <colgroup>
            <col>
            <col span="2" style="background-color: black;">
            <col style="background-color: yellow;">
        </colgroup>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

마무리

지금까지 텍스트와 관련한 태그들을 예제와 함께 공부해보았습니다.

텍스트 이외에도 이미지, 폼과 관련된 태그들 또한 예제와 함께 공부해보도록 하겠습니다.

댓글과 공감은 언제나 환영합니다!

'🌐 FrontEnd > HTML & CSS' 카테고리의 다른 글

[HTML] 폼 관련 태그와 예제 - 1 (0)	2022.05.15
[HTML] 이미지와 하이퍼링크 관련 태그와 예제 (0)	2022.05.09
[HTML] HTML 특수문자 사용법 (0)	2022.05.07
[HTML] 텍스트 관련 태그와 예제 - 1 (0)	2022.05.07
[HTML] HTML 기본 문서 구조 (0)	2022.05.06

ABOUT ME

Whatever can happen will happen Whatever can happen will happen

텍스트와 관련된 태그들

3. 목록을 만드는 태그들

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

(1) 예제

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

(2) 예제

(3) <dl>, <dt>, <dd> 태그 – 설명 목록 만들기

(3) 예제

4. 표를 만드는 태그

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

(1) 예제

(2) <caption> 태그, <figcaption> 태그 – 표에 제목 붙이기

(2) <caption> 예제

(2) <figcaption> 예제

(2) aria-describedby 속성 예제

(3) <thead>, <tbody>, <tfoot> 태그 – 표 구조 정의하기

(4) <col>, <colgroup> 태그 – 여러 열 묶어 스타일 지정하기

마무리

'🌐 FrontEnd > HTML & CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

텍스트와 관련된 태그들

3. 목록을 만드는 태그들

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

(1) 예제

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

(2) 예제

(3) <dl>, <dt>, <dd> 태그 – 설명 목록 만들기

(3) 예제

4. 표를 만드는 태그

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

(1) 예제

(2) <caption> 태그, <figcaption> 태그 – 표에 제목 붙이기

(2) <caption> 예제

(2) <figcaption> 예제

(2) aria-describedby 속성 예제

(3) <thead>, <tbody>, <tfoot> 태그 – 표 구조 정의하기

(4) <col>, <colgroup> 태그 – 여러 열 묶어 스타일 지정하기

마무리

'🌐 FrontEnd > HTML & CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바