[HTML] 목록 요소 | 표를 만드는 순서

 목록 요소 

<ul> 태그?  점으로 표시되는 목록, 정렬되지 않은 목록

<li>태그? 목록 만들기

<ul> 태그를 사용하고 <ul> 태그를 사용한다.

순서 없는 목록의 경우, 각 항목앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙는다.

    <ul>
      <li>To be able to use the fundamental web dev language</li>
      <li>
        To hand-craft beautiful websites instead of relying on tools like
        Worpress or Wix
      </li>
      <li>To build web applications</li>
      <li>To impress friends</li>
      <li>To have fun</li>
    </ul>

 

<ol> 태그  순서가 있는 목록

<li> 태그? 목록 만들기

<ol> 태그를 사용하고 <li> 태그를 사용한다.

 

    <ol>
      <li>The opening tag</li>
      <li>The closing tag</li>
      <li>The actual element</li>
    </ol>

<ol type="A">?   <ol> 태그 속성 옆에 type 속성을 붙인다. → start 속성 (순서 목록은 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있다.) → reversed 속성 (항목을 역순으로 표시)  

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

 

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

<dl> 태그는 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록을 만든다.

예를 들면 '단어/정의' 목록이나 '질문/답' 목록에서 사용할 수 있다.

<dt> 태그는 제목 

<dd>태그는 설명을 표시

<dt>태그에 여러 개의 <dd> 태그 값을 가질 수 있고 여러 개의 <dt> 태그를 가질 수 있다.

올레 1코스

코스: 시흥 초등학교 옆- 광치기 해변

거리: 14.6km

 

 HTML 테이블 (HTML Tables)

표? 데이터 테이블

2차 원 행과 열 구조

테이블 데이터? 일부 데이터를 근사하고 명확하게 표시하는 방법

 

 기본적인 표를 만드는 순서 

<tr> 태그? The Table Row element →  표 안에 있는 셀들이 모인 행

<td>태그? The Table Data Cell element, 단일 셀 → 데이터를 포함한 표 안에 있는 단일 셀

<th> 태그? The Table Head element, 헤더 → 데이터를 포함한 표 안에 있는 단일 셀

<thead> 태그? The Table Head element

<tbody> 태그? The Table Body element

<tfoot> 태그? The Table Foot element

 

 

<table> 태그, <tr> 태그, <td> 태그, <th> 태그 옆에 적은 순서대로 코드를 작성한다.

1. <table> 태그로 표 자리를 먼저 만든다.

2. <tr> 태그로 n개의 행을 만든다.

3. <td> 태그로 각 행마다 셀을 n개 씩 만든다. 

 

<th> 태그? 표에 제목 셀을 만드는 것

<td> 태그 대신 <th> 태그를 사용하면 간다한 제목 셀을 만들 수 있다.

 

colspan, rowspan 속성? 행 또는 열을 합치는 것

셀을 합치는 것이므로<td> 태그 / <th> 태그에서 이뤄진다.

가로 행을 합치고 싶다면? colspan 속성     

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

세로 행을 합치고 싶다면? rowspan 속성

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

 

<caption> 태그, <figcaption> 태그? 표에 제목 붙이는것

<caption> 태그는 <table> 태그 바로 다음에 사용한다.

<caption> 태그를 사용한 표 제목은 표의 위쪽 중앙에 표시된다.

<figcaption> 태그는 figure와 caption의 합성어이다.

설명 글을 붙이고 싶은 대상을 <figure> 태그로 감싸고 

<figcaption>태그를 이용해 제목이나 설명 글을 입력한다.

<caption> 태그와 다르게 중앙에 표시되지 않는다.

 

<thead> 태그, <tbody> 태그, <tfoot> 태그? 표 구조 정의

 table의 t와 제목 부분인 head, 본문 부분인 body, 요약 부분인 foot이 합쳐진것이다. 

 

<col> 태그, <colgroup> 태그? 

여러 열 묶어 스타일 지정

<col> 태그? 

한 열에 있는 모든 셀에 같은 스타일 적용하려고 할때 사용한다.

닫는 태그가 없다.

<colgroup> 태그? 여러 열을 묶어 스타일 적용

<colgroup> 태그 안에 있는 <col> 태그를 비롯해 사용한 <col>태그와 표의 열의 개수가 같아야 한다.

<colgroup> 태그를 먼저 사용하고 <col> 태그를 사용한다.