smarti,스마트아이

기본요소 3

리스트(List)

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다.
HTML에서는 여러 요소들을 나열한 목록이나 명단을 표현 할 수 있는 태그를 제공하고 있다.
- 순서가 있는 목록(ordered list)
- 순서가 없는 목록(unordered list)
- 정의 목록(definition list)

순서가 있는 목록 (ordered list)

순서가 있는 목록는 <ol>태그로 작성하고, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 작성한다. 각각의 목록 요소 앞에는 기본 마커(marker)로 아라비아 숫자가 표시된다.

<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.
- decimal : 숫자 (기본설정)
- upper-alpha : 영문 대문자
- lower-alpha : 영문 소문자
- upper-roman : 로마 숫자 대문자
- lower-roman : 로마 숫자 소문자

<p>decimal : 숫자 (기본설정)</p>
<ol>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-alpha : 영문 대문자</p>
<ol style="list-style-type: upper-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-alpha : 영문 소문자</p>
<ol style="list-style-type: lower-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-roman : 로마 숫자 대문자</p>
<ol style="list-style-type: upper-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-roman : 로마 숫자 소문자</p>
<ol style="list-style-type: lower-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>

순서가 없는 목록(unordered list)

순서가 없는 목록은 <ul> 태그로 작성하고, 여기에 포함되는 각각의 목록 요소는 <li>태그로 작성한다. 각각의 목록 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 표시된다.

<ul>
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
</ul>

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.
- disc : 검정색 작은 원형 모양 (기본설정)
- circle : 흰색 작은 원형 모양
- square : 사각형 모양

<p>disc : 검정색 작은 원형 모양 (기본설정)</p>
<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>
  
<p>circle : 흰색 작은 원형 모양</p>
<ul style="list-style-type: circle">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

<p>square : 사각형 모양</p>
<ul style="list-style-type: square">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

정의 목록(definition list)

정의 목록은 용어와 그에 대한 정의를 모아놓은 목록으로 <dl>태그로 작성한다. <dt>태그에는 용어가 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어간다.

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>XML</dt>
  <dd>eXtensible Markup Language</dd>
</dl>

 

테이블 (Table)

테이블(table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미한다.
HTML에서는 <table> 태그를 사용하여 이러한 테이블을 작성할 수 있다.
<table> 태그는 다음과 같은 태그들로 구성된다.
   <tr> 태그는 테이블에서 열을 구분해 준다.
   <th> 태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.
   <td> 태그는 테이블의 열을 각각의 셀(cell)로 나누어 준다.

<table border="1">
  <thead>
    <tr>
      <td>이름</td><td>나이</td><td>직업</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>원빈</td><td>30</td><td rowspan="2">영화배우/연예인</td>
    </tr>
    <tr>
      <td>이나영</td><td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" align="center">마지막 말</td>
    </tr>
  </tfoot>
</table>

<thead>, <tbody>, <tfoot>는 필수사항은 아니지만 구분하기 편하게 하기 위함이다.
tfoot은 중간에 선언해도 마지막 끝인 맨 밑에 나오게 된다.

테이블의 열 합치기 (colspan)

colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있다.

<table>
  <tr>
    <th>분류</th>
    <th colspan="2">항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
    <td>배</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
    <td>감자</td>
  </tr>
</table>

테이블의 행 합치기 (rowspan)

rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있다.

<table>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td rowspan="2">과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>배</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>감자</td>
  </tr>
</table>

테이블의 열과 행 합치기

colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있다.

<table>
  <tr>
    <th>분류</th>
    <th colspan="2">항목</th>
  </tr>
  <tr>
    <td rowspan="2">과일</td>
    <td>사과</td>
    <td>배</td>
  </tr>
  <tr>
    <td>포도</td>
    <td rowspan="2">토마토 감자</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

테이블의 캡션(caption) 설정

<caption> 태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.

<table style="width:100%">
  <caption>장바구니</caption>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

테이블의 스타일 (style)

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있다. border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리가 표시된다.

<style>
    table, th, td { border: 1px solid black }
</style>

위의 예제를 실행 해보면 테이블의 테두리(border)가 두 줄씩 나타난다. 이유는 <table> 태그와 <th> 태그, <td> 태그가 모두 자신만의 테두리를 가지고 있기 때문이다.

위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용하면 된다. border-collapse 속성 값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있다.

<style>
    table, th, td { border: 1px solid black; border-collapse: collapse }
</style>

 

[코딩공부] - CSS overlay with slide out box 예제 다운로드

CSS overlay with slide out box 예제 다운로드

[세상살이] - 성공과 실패는 습관이 좌우한다

성공과 실패는 습관이 좌우한다

[세상살이] - 플랩풋볼, 소셜 축구 풋살 용병 모임

플랩풋볼, 소셜 축구 풋살 용병 모임

[디자인공부] - 포토샵으로 청바지 천 효과 문자 만들기

포토샵으로 청바지 천 효과 문자 만들기

[디자인공부] - WebP 웹을 위한 새로운 이미지 포맷

WebP 웹을 위한 새로운 이미지 포맷