[HTML] 06. LIST & TABLE

Front-End/HTML

[HTML] 06. LIST & TABLE

Bigone17 2021. 11. 17. 14:42

🟡 1. List(목록)

🟡 1.1 ul (순서가 없는 목록 - Unordered List)

- ul 태그는 list 태그 중에서 순서가 없이 목록을 나타내고 싶을 때 사용하는 태그입니다.

<!DOCTYPE html>
<html>
  <body>
    <h1>내가 좋아하는 음식 목록</h1>
    <ul>
      <li>김치찌개</li>
      <li>삼겹살</li>
      <li>잡채</li>
      <li>국밥</li>
    </ul>
  </body>
</html>

🟡 1.2 ol (순서가 있는 목록 - Ordered List)

- ol 태그는 순서가 있는 목록을 나타내고자 할 때 사용하는 태그입니다.

<!DOCTYPE html>
<html>
  <body>
    <h1>내가 좋아하는 음식 순서</h1>
    <ol>
      <li>국밥</li>
      <li>잡채</li>
      <li>김치찌개</li>
      <li>삼겹살</li>
    </ol>
  </body>
</html>

- type 속성을 이용하여 순서를 나타내는 문자를 바꿀 수도 있습니다.

Value	설명	예시 코드	결과
1	숫자 (기본값)	<ol> <li>아메리카노</li> <li>페퍼민트</li> </ol>
A	대문자 알파벳	<ol type="A"> <li value="1">아메리카노</li> <li value="3">페퍼민트</li> </ol>
a	소문자 알파벳	<ol type="a"> <li value="2">아메리카노</li> <li value="4">페퍼민트</li> </ol>
I	대문자 로마숫자	<ol type="I"> <li>아메리카노</li> <li>페퍼민트</li> </ol>
i	소문자 로마숫자	<ol type="i"> <li value="2">아메리카노</li> <li value="3">페퍼민트</li> </ol>

- start 속성을 이용하면 목록의 시작 값을 변경할 수 있습니다.

<!DOCTYPE html>
<html>
	<body>
		<ol start="4">
			<li>국밥</li>
			<li>잡채</li>
			<li>김치찌개</li>
			<li>삼겹살</li>
		</ol>
	</body>
</html>

- reversed 속성을 이용하면 순서를 역으로 변경할 수 있습니다.

<!DOCTYPE html>
<html>
  <body>
    <ol reversed>
      <li>국밥</li>
      <li>잡채</li>
      <li>김치찌개</li>
      <li>삼겹살</li>
    </ol>
  </body>
</html>

🟡 1.3 중첩 목록

- 목록 안에 목록이 있는 경우에 아래와 같이 작성해주시며 됩니다.

<!DOCTYPE html>
<html>
  <body>
    <h3>오늘 할일</h3>
    <ul>
      <li>블로그 포스팅</li>
      <li>알고리즘 공부</li>
      <li>넷플릭스 보기</li>
      <li>운동하기</li>
      <ol>
        <li>벤치 프레스</li>
        <li>숄더 덤벨 프레스</li>
        <li>비하인드 넥 프레스</li>
      </ol>
    </ul>
  </body>
</html>

🟡 2. 테이블

- 표를 만들 때는 table 태그를 사용합니다. 예전에는 table 태그를 이용하여 표를 만들었지만 요즘에는 div로 공간을 분할하는 방식을 더욱 많이 사용되고 있습니다. 왜냐하면 table 태그는 유지보수가 어렵고, 동적 데이터 변경에 특성화돼 있지 않기 때문입니다. *공부용으로만 알면 될 거 같습니다 :)

태그	설명
table	표를 생성하는 태그입니다.
tr	행을 생성하는 태그입니다.
th	제목 셀을 생성하는 태그입니다.
td	일반 셀을 생성하는 태그입니다.

<!DOCTYPE html>
<html>
  <body>
    <table border="1">
      <tr>
        <th>운동 이름</th>
        <th>무게</th>
        <th>횟수</th>
      </tr>
      <tr>
        <td>덤벨 숄더 프레스</td>
        <td>10kg - 10kg - 10kg</td>
        <td>15 - 15 - 15</td>
      </tr>
      <tr>
        <td>원암로우</td>
        <td>10kg - 10kg - 10kg</td>
        <td>20 - 20 - 20</td>
      </tr>
      <tr>
        <td>인크라임 덤벨프레스</td>
        <td>20kg - 20kg - 20kg</td>
        <td>15 - 15 - 15</td>
      </tr>
    </table>
  </body>
</html>

- table 태그의 속성은 다음 표와 같습니다.

속성	설명
border	표 테두리의 두께를 설정합니다.
rowspan	해당 셀이 하단으로 몇칸을 차지할지 설정합니다.
colspan	해당 셀이 가로로 몇칸을 차지할지 설정합니다.

	예시 코드	결과
rowspan (아래로 공간 차지)	<table border="1"> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td>4</td> </tr> </table>
colspan (오른쪽으로 공간 차지)	<table border="1"> <tr> <td colspan="2">1</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시

'Front-End > HTML' 카테고리의 다른 글

[HTML] 08. form(폼) (0)	2021.12.06
[HTML] 07. 이미지 & 비디오 & 음악 (2)	2021.11.29
[HTML] 05. Hyperlink (0)	2021.11.15
[HTML] 04. 텍스트 관련 태그2 (0)	2021.11.12
[HTML] 03. 텍스트 관련 태그 (0)	2021.11.10

현재글[HTML] 06. LIST & TABLE

250x250

JavaScript, 프로그래머스, JS, Sentry, HTML FORM, HTML, programmers, jsonServer, Next.js, json-server, 코딩테스트, rn 세모 모드 고정, tag, html button, 자바스크립트, rn 화면 회전, rn 화면 회전 금지, 자바스크립트 객체, NextJS, 코테,

Today :
Yesterday :

운좋개