[HTML] 초보도 따라하는 HTML - 6 (<ol> & <ul> / <table>)

목록과 표

 

우리가 일반적으로 문서를 작성하다 보면, 어떤 주제에 대한 세부 내용들을 표시하기 위해 목록을 사용하거나, 특정 데이터들을 가독성 있게 분류하기 위해 표(table)를 사용합니다.

 

HTML 문서 역시 특정한 조건을 가진 항목들을 분류하기 위해 사용되는 목록을 나타낼 수 있는 <ol>과 <ul> 태그, 표를 나타낼 수 있는 <table> 태그를 제공합니다.

---

<ol> & <ul>

 

<ol>과 <ul> 태그는 각각 순서가 있는 목록과 순서가 없는 목록을 나타내는 데에 사용됩니다. 두 태그 모두 열고 닫는 태그가 있으며, 각 세부 목록들을 적기 위해 <ol>, <ul> 태그 안에 <li> 태그를 사용합니다.

 

아래에서 각 태그에 대해 좀 더 자세히 알아보겠습니다.

 

<ol>

 

 

<ol> 태그를 사용하면 순서가 있는 목록을 만들 수 있습니다. "type" 속성을 사용해 목록의 순서를 표현하는 방식을 변경할 수 있습니다. 만약 type 속성을 설정하지 않았다면 기본값인 "1"(숫자)로 설정됩니다.

 

• type="1": 숫자(기본값)
• type="a": 영문 소문자 
• type="A": 영문 대문자
• type="i": 로마 숫자 소문자
• type="I": 로마 숫자 대문자

 

<ul>

 

 

<ul> 태그를 사용하면 순서가 없는 리스트를 만들 수 있습니다. <ol> 태그에서 사용하던 type 속성은 적용되지 않는 것을 확인할 수 있습니다.   

 

 

목록 표시 기호를 바꿔주는 list-style

 

 

만약 <ol>과 <ul> 태그의 목록 표시 기호를 없애거나 변경하고 싶다면 list-style을 사용할 수 있습니다. <ol> 태그의 경우 type 이라는 태그의 속성값을 통해 변경할 수 있지만, list-style을 사용해 보다 다양한 옵션을 선택할 수 있습니다.

 

그 밖에 목록 표시 기호와 관련된 css들은 추후 자세히 다뤄보도록 하겠습니다. 

---

<table>

 

 

표의 행과 열

 

<table> 태그는 표를 만들기 위해 사용되며, 행(row)과 열(column)로 이루어져 있습니다. 행을 만들기 위해 <tr> 태그를 사용하며, 셀을 만들기 위해 <tr> 태그 안에 <th>(표의 제목), <td> 태그를 사용합니다. 

 

<table> 태그를 실제 표와 같이 나타내기 위해서는 간단한 스타일을 적용해야 합니다. 위의 예제에는 총 5개의 표가 있는데, 아무 스타일도 적용하지 않은 첫 번째 <table>은 어떠한 구분선도 나타나지 않는 것을 알 수 있습니다.

 

아래는 표를 꾸미기 위해 사용된 스타일 속성에 대한 설명입니다.

 

• border: 선과 관련된 css 속성자로, "border: 선의 굵기 선의모양(직선, 실선, 점선...) 선의색깔" 형식으로 표현한다.
• border-collapse: 테이블 테두리가 합쳐지는 방식을 지정하는 css 속성자이다.
  • border-collapse: collapse: 테이블 요소들의 테두리가 합쳐진다.
  • border-collapse: seperate: 테이블 요소들의 테두리가 개별적으로 표시된다.(기본값)