HTML 텍스트(Text) 2

< HTML 텍스트(TEXT) 태그 >

* 목록(list) 생성 태그(tag)

---

• <ul> ~ </ul>

      <li> ~ </li>

      <li> ~ </li>

  : 순서 없는 목록

  : unordered list의 줄임말

  : list item의 줄임말

  : CSS에서 불릿 수정 가능

 

ex) 

    <ul>
        <li>주주디</li>
        <li>쥬쥬디</li>
        <li>주쥬디</li>
    </ul>

 

 

 

• <ol> ~ </ol>

      <li> ~ </li>

      <li> ~ </li>

  : 순서 있는 목록

  : ordered list의 줄임말

  : list item의 줄임말

  : 속성값을 통해 종류, 시작 번호를 설정할 수 있다.

  : 또는 CSS에서 변경 가능

 

→ type 속성

속성 값	설명
1	숫자 (기본값)
a	영문 소문자
A	영문 대문자
ⅰ	로마숫자 소문자
Ⅰ	로마숫자 대문자

  ⇒ ex) <ol type="A"> ~ </ol>

 

→ start 속성

: 지정하는 숫자, 문자 등 부터 시작 가능

  ⇒ ex) <ol type="A" start="3">

 

→ reversed 속성

: 항목을 역순으로 표시

 

  !  

</li> 생략 가능

: 여러 항목을 나열할 때 </li> 태그 생략 가능

  <li> 이후 <li>를 만나면 자동으로 </li> 태그가 있는 것처럼 인식

 

  !  

중복 목록 생성 가능

ex) <li> ~

         <li> ~ </li>

    </li>

 

 

 

• <dl> ~ </dl>

      <dt> ~ </dt>

      <dd> ~ </dd>

  : 제목과 설명이 한 쌍인 설명 목록

  : description list의 줄임말

 

→ <dl>

    : 목록

 

→ <dt>

    : 제목

 

→ <dd>

    : 설명

    : 브라우저 화면에서 들여쓰기로 표시됨

---

😉 지금까지 배운 내용으로 웹 페이지 만들기!

        <div id="main">
            <!-- 자기 소개 -->
            <section>
                <h2 class="subtitle">Who am I?</h2>
                <img src="images/fnvl3.png">
                <p>I am jujudy
                    <br>I'm studying to become a web developer.
                    <br> I'm going to <mark>get a job</mark> <i>next year</i>.
                </p>

            </section>

            <!-- 경력 -->
            <section>
                <h2 class="subtitle">Experience</h2>
                <img src="images/si.png">
                <ol type="A">
                    <li>PL사업부 QA part</li>
                    <ol type="1">
                        <li>DAZED</li>
                        <li>DESIGN UNITED</li>
                        <li>사외오더</li>
                    </ol>
                    <img src="images/jaju.png">
                    <li>JAJU</li>
                    <ul>
                        <li>식품</li>
                        <li>가구가전수납</li>
                    </ul>
                    
                </ol>
           
            </section>

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

            </section>
        </div>

 

---

* HTML 검사기

http://validator.w3.org/ 

The W3C Markup Validation Service

문법, 웹 표준 검토할 수 있다.

 

---

* 표(table) 태그(tag)

행(row)과 열(column)으로 이루어진 테이블을 생성하는 태그

행(row) x 열(column) = 셀(cell)

 

---

⁕ 표 만들기

  1. 테이블 생성

  2. 행 생성

  3. 셀 생성

 

• <table> ~ </table>

  : 테이블 생성

  : 속성으로 테두리 표시 가능

  : CSS에서도 생성 가능

 

ex) <table border="1">

     → border 두께

 

→ aria-describedby 속성

  : 표 설명을 별도의 문장으로 작성하여 화면 낭독기에서 표에 대한 정보가 전달되도록 하는 속성

ex)

<p id="summary"> 주주디는 코린이다.</p>
    <table aria-describedby="summary">
        <caption> jujudy </caption>
        <tr>
            <th> 1 </th>
        </tr>
    </table>

 

 

• <tr> ~ </tr>

  : 행 생성

  : table row의 줄임말

 

 

• <td> ~ </td>

  : 셀 생성

 

 

• <th> ~ </th>

  : 셀 제목

  : 가운데 정렬, 굵게 표시

 

→ 행 합치기

    <td colspan="합칠 셀의 개수"> ~ </td>

    <th colspan="합칠 셀의 개수"> ~ </th>

    : column의 줄임말

 

→ 열 합치기

    <td rowspan="합칠 셀의 개수"> ~ </td>

    <th rowspan="합칠 셀의 개수"> ~ </th>

 

  ✔ <col> 

     : 한 열에 있는 모든 셀에 같은 스타일 적용 

     : 닫는 태그 없음

     : span 속성을 이용해 2개 이상의 열에 같은 스타일 적용 가능

 

  ✔ <colgroup> ~ </colgroup>

     : 여러 열에 같은 스타일 적용

     : 묶는 열의 개수만큼 <col> 태그 삽입

 

    !  

  <col> 태그와 <colgroup> 태그는 <caption>태그와 <tr>, <td> 태그 사이에 사용해야 한다.

  <colgourp> 태그 안에 있는 <col>태그 수와 단독 <col> 태그 수는 표의 열의 개수와 같아야 한다.

 

ex)

    <table border="1">
        <caption>예시</caption>
        <colgroup>
            <col>
            <col span="2" style="background-color:green;">
            <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>

---

⁕ 제목 붙이기

 

• <caption> ~ </caption>

  : <table> 태그 다음에 바로 사용

  : 표의 위쪽 중앙에 표시

  : 부가 설명 추가 가능

 

ex)

    <table border="1">
        <caption> judy </caption>
        <tr>
            <th> 1 </th>
            <th> 2 </th>
        </tr>
        <tr>
            <th>3</th>
            <th>4</th>
        </tr>
    </table>

 

• <figcaption> ~ </figcaption>

  : <table> 바깥의 위 또는 아래에 사용 가능

  : figure + caption의 합성어

  : 왼쪽 정렬

  : 제목이나 설명 글 표시 가능

  !  

<figure>과 <figcaption> 차이 구분

 

ex) 

    <figcaption>
        <p>주주디<br>
        <b>jujudy</b></p>
    </figcaption>
    <table border="1">
        <tr>
            <th> 1 </th>
            <th> 2 </th>
        </tr>
        <tr>
            <th>3</th>
            <th>4</th>
        </tr>
    </table>

 

ex) 

    <table border="1">
        <tr>
            <th> 1 </th>
            <th> 2 </th>
        </tr>
        <tr>
            <th>3</th>
            <th>4</th>
        </tr>
    </table>
    <figcaption>
        <p>주주디<br>
        <b>jujudy</b></p>
    </figcaption>

 

---

⁕ 표의 구조

  화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있다.

  CSS에서 배경색 등 변경 가능

 

• <thead> ~ </thead>

  : 제목 부분

 

• <tbody> ~ </tbody>

  : 본문 부분

 

• <tfoot> ~ </tfoot>

  : 요약 부분

 

---

😊 Do it! HTML5 + CSS 웹 표준의 정석 책으로

     독학하는 코린이의 공부 기록