Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Archives
Today
Total
관리 메뉴

한바다

[HTML]목록과 표만들기 본문

카테고리 없음

[HTML]목록과 표만들기

한바다진화 2024. 5. 10. 21:33

순서 있는 목록을 만드는 <ol>,<li>태그

1.순서 있는 목록이란 말 그대로 각 항목을 순서대로 나열한 것이다. 순서목록은 어떤 과정을 순서대로 설명할때

<ol>과<li> 태그를 사용해 만든다. 여기서 ol은 orderde list의 줄임말이고, li는 list의 줄임말이다.

목록을 표시할 내용 앞뒤에 각각 <ol>과</ol>태그를 두고, 그 사이에 <li>와</li>태그를 삽입한다.

[기본형]

<ol>
  <li>항목</li>
  <li>항목2</li>
</ol>

<li>항목</li> 복사 단축키는  Alt+shift+↓이다. 자바에서는 ctrl+Alt+ ↓ 와 동일한 기능을 가진다.

2. <ol> 태그의 type, star속성

위처럼 순서 있는 목록은 기본적으로 숫자 1,2,3· · ·으로 번호를 붙인다. 이때 type속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다.

<ol>태그의 속성값

종료 설명
type = "1" 숫자(기본값)
type = "a" 영문소문자
type = "A" 영문대문자
type = "i" 로마숫자 소문자
type = "I" 로마숫자 대문자

 

또한 순서목록은 기본적으로 '1'부터 시작하지만 start속성을 사용해서 시작번호를 바꿀 수도 있으며

reversed를 사용하면 아래와 같이 역순으로 나타난다.

<ol type="1" start="3" reversed>
            <li>사과</li><!--숫자 3으로 시작하는 사과-->
            <li>포도</li><!--reversed를 사용했기 때문에 2-->
            <li>키위</li><!--1-->
            <li>망고</li><!--0-->
            <li>메론</li><!-- -1 -->

순서 없는 목록을 만드는 <ul>,<li>태그

1. 순서 없는 목록은 항목의 순서가 중요하지 않을 때 사용한다. unorderd list의 줄임말인 <ul>과</ul> 태그를 목록 앞뒤에

붙인 후 <li>와</li> 태그를 삽입한다.

[기본형]

<ul>
    <li>항목1</li>
    <li>항목2</li>
</ul>

표를 만드는 <table>,<caption>태그

표는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다.셀은 행과 열이 만나 이루어진 곳으로

표의 내용이 들어가는 한 칸을 의미한다.

표의 시작과 끝을 알려 주는 <table>과 </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다.

표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption>태그를 사용하며 <caption> 태그를 사용하면 제목은 

표의 위쪽 중앙에 표시된다.

[기본형]

<table>
    <capion>표 제목</capion>
</table>

행을 만드는 <tr> 태그와 셀을 만드는 <td>,<th> 태그

<table> 태그만 작성하면 표가 만들어지지 않는다.<table> 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지 

지정해야 한다. <tr> 태그는 행을 만들고 <td> 태그는 행 안에 있는 셀을 만들기 때문에 <table> 태그 안에

<tr>, <td> 태그가 모두 모여야 하나의 셀을 만들 수 있다

<table border="1" style="border-collapse: collapse">
      <tr>
        <th>이름</th>
        <th>나이</th>
      </tr>
      <tr>
      <td>홍길동</td>
      <td>30/<td>
    </tr>
    <tr>
      <td>김철수</td>
      <td>25</td>
    </tr>
    </table>
 <ul>
    <li>사과</li>
    <li>오렌지</li>
    <li>바나나</li>
</ul>