Text, List, Table Tag

🟦  Text Tag

텍스트를 의미 있게 표현하는 역할.

 

🔸   블록 레벨 태그 (구조를 잡는 태그)

한 줄(블록)로 시작과 끝을 나타내는 성격의 태그로 글의 전체적인 흐름과 구역을 나눈다.

• <h(n)> (Heading): 제목을 표시하는 태그. (<h1> 부터 <h6>까지 있으며 숫자가 낮수록 중요도가 높고, 글자 크기도 크다.)
• <p> (Paragraph): 본문의 문단을 나눌 때 사용하는 태그.
• <br> (Break): 단락 내 줄바꿈을 만드는 빈 태그. (닫는 태그가 없는 단독 사용)
• <hr> (Horizontal Rule): 수평 가로선을 구분하는 태그. (주제가 바뀔 때 시각적으로 분리하는 용도)
• <blockquote> (Block Quote): 인용문의 출처를 나타내는 태그. (보통 들여쓰기가 적용된 모습)

 

🔸   인라인 태그 (글자 스타일과 의미 강조 태그)

특정 부분의 스타일을 바꾸거나 의미를 부여할 때 사용한다.

• 강조와 굵게
  • <strong>: 중요한 특성 텍스트를 굵게 강조 표시할 때 사용하는 태그.
  • <b> (Bold): 특별한 의미 강조 없이 단순히 시각적으로만 글자를 굵게 만드는 태그.
• 강조와 기울임
  • <em> (Emphasis): 텍스트에서 특정 단어를 강조할 때 사용하는 태그. (브라우저에서는 기울임꼴 표시)
  • <i> (Italic): 단순한 시각적 기울임꼴 표시 태그. (기술적 용어나 생각 등을 나타낼 때 쓴다.)
• 출처 표기
  • <cite>: 인용구의 출처를 나타내는 용도로 쓰이거나, 작품(책.영화.노래 등) 의 제목을 표시하는 태그. (보통 기울임꼴 표시)

• <span>: 아무 의미 없이 묶기.
• <mark>: 형광펜 표시.

 

---

 

🟦    List Tag

메뉴바, 게시글 목록, 용어 사전 등을 만들 때 사용하는 역할.

 

🔸  <ol>

• <ol> (Ordered List): 순서가 있는 목록. (1, 2, 3 / A, B, C / Ⅰ, Ⅱ, Ⅲ 등)
  • 용도: 순서가 중요한 항목.
  • 특징: type 속성을 통해 기본값(숫자) 대신 알파벳(A, a)이나 로마자(I, i) 등으로 바꿀 수 있다.

 

🔸  <ul>

• <ul> (Unordered List): 순서가 없는 목록. (○, □ 등) 
  • 용도: 순서가 중요하지 않은 항목. (특징 나열, 쇼핑 리스트 등) 
  • 특징: CSS를 통해 점의 모양을 없애거나, 다양한 아이콘으로 바꿀 수 있다.

 

🔸  <dl>

• <dl> (Description List): 정의형(설명) 목록. (용어와 설명을 함께 묶어서 표현)
  • <dt> (Description Term): 정의하려는 용어의 제목.
  • <dd> (Description Details): 해당 용어에 대한 설명. (보통 들여쓰기가 되어 표시)
    • 용도: 사전 형식의 정의, FAQ(자주 묻는 질문), 상품의 사양(색상: 블랙, 크기: XL) 등을 표현할 때 적합하다.

 

🔸  <li> (List ltem): 목록의 각 항목을 나타내는 태그로, 반드시 <ol> 또는 <ul> 안에 위치해야 한다. 

 

 

📍  POINT 📍

✔️  <dl>설명 목록에서는 하나의 <dt>에 여러 개의 <dd>가 올 수도 있다. ✔️ 

 

 

📋 목록 태그 요약표 📋

태그	의미	자식 태그	기본 모양
<ol>	순서 있는 목록	<li>	1. 2. 3. ...
<ul>	순서 없는 목록	<li>	• • • ...
<dl>	정의형 목록	<dt>, <dd>	용어 - 설명(들여쓰기)

 

---

 

🟦   Table Tag

행(Row)과 열(Column)의 관계를 정의하여 복잡한 데이터를 한눈에 보여주는 역할.

 

🔸   테이블의 기본 구조 태크

표를 만들 때는 바깥에서 안쪽으로 들어가는 계층 구조를 이해하는 것이 중요하다.

• <table>: 표의 전체 범위를 지정하는 최상위 태그.
• <tr> (Table Row): 표의 행을 정의하는 태그.
• <th> (Table Header): 행이나 열의 제목 셀을 정의하는 태그. (기본적으로 글자가 굵게 표시되고, 중앙 정렬)
• <td> (Table Data): 표의 데이터(내용) 셀을 정의하는 태그.

 

🔸   테이블의 구조화 태그

표가 길어지면 머리글, 본문, 바닥글로 나누어 관리하는 것이 좋다.

• <thead>: 표의 제목 부분(헤더)을 그룹화.
• <tbody>: 표의 실제 데이터 본문을 그룹화.
• <tfoot>: 표의 하단 요약이나 합계 부분을 그룹화.
• <caption>: 표의 제목이나 설명을 표 상단에 붙인다.

 

🔸   칸 합치기 (Spanning)

여러 칸을 하나로 합칠 때 사용하며, <th> <td> 태그에 직접 작성한다.

• colspan="숫자": 가로로 열을 합친다. (옆으로 합치기ㅡ)
• rowspan="숫자": 세로로 행을 합친다. (아래로 합치기ㅣ)

 

 

📍  POINT 📍 

✔️  표는 <table> → <tr> → <th>/<td> 순서의 계층 구조를 가진다. ✔️ 

 

---

 

⚙️ 실 전 예제 코드 ⚙️

<table border="1">
    <caption><b>시간표</b></caption>
    <thead>
        <tr>
            <th>/</th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
            <th>토</th>
            <th>일</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td colspan="5">9:20 ~ 10:10</td>
            <th colspan="2" rowspan="9">휴일</th>
        </tr>
        <tr>
            <th>2</th>
            <td colspan="5">10:20 ~ 11:10</td>
        </tr>
        <tr>
            <th>3</th>
           <td colspan="5">11:20 ~ 12:10</td>
        </tr>
        <tr>
            <th>4</th>
            <td colspan="5">12:20 ~ 13:10</td>
        </tr>
        <tr>
            <th colspan="6">점심시간: 13:10 ~ 14:00</th>
        </tr>
        <tr>
            <th>5</th>
            <td colspan="5">14:00 ~ 14:50</td>
        </tr>
        <tr>
            <th>6</th>
            <td colspan="5">15:00 ~ 15:50</td>
        </tr>
        <tr>
            <th>7</th>
           <td colspan="5">16:00 ~ 16:50</td>
        </tr>
        <tr>
            <th>8</th>
            <td colspan="5">17:00 ~ 17:50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="8">즐거운 수업시간^^</th>
        </tr>
    </tfoot>
</table>

 

시간표

/	월	화	수	목	금	토	일
1	9:20 ~ 10:10					휴일
2	10:20 ~ 11:10
3	11:20 ~ 12:10
4	12:20 ~ 13:10
점심시간: 13:10 ~ 14:00
5	14:00 ~ 14:50
6	15:00 ~ 15:50
7	16:00 ~ 16:50
8	17:00 ~ 17:50
즐거운 수업시간^^

 

---

 

🔗  Table example 🔗 

https://codepen.io/lshjju/pen/mdrMvRP