💻웹 문서에 목록/표 만들기(22.10.25 웹수업)

리안🤍·2022년 12월 8일

웹공부기록

목록 보기

2/4

📌 목록 만들기

명령어

- <ol></ol> : 순서 있는 목록(order list)
- <li></li> : 항목
- <ol type="a"> : 항목앞에 붙은 타입을 지정
ex) type = "1"일 때 -> 1. 항목
    type="a" 일 떼 -> a. 항목
- <ul></ul> : 순서 없는 목록
    -> 항목 앞에 문양으로 표시 됨
- <ul type="disc">
ex) disc-까만점 circle-하얀점 square-까만네모
- <dl></dl> : 설명 목록 
- <ol type="A"  start="3">
   -> 목록 타입 시작점 ex) C부터 시작
* ctrl+shift+c=>주석

[test3]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>html1/test3.html</title>
	</head>
	<body>
	<h1>순서 있는 목록</h1>
	<ol type="1"  start="3">
       <li>항목1</li>
       <li>항목2</li>
       <li>항목3</li>
	</ol>
	<h1>순서 없는 목록</h1>
	<ul type="square">
       <li>항목1</li>
       <li>항목2</li>
       <li>항목3</li>
	</ul>
	<h1>설명 목록</h1>
	<dl>
       <dt>이름</dt>
       <dd>값1</dd>
       <dd>값2</dd>
	</dl>
	</body>
	</html>

🖥️ 결과물

⚡ 연습하기 - [ex2]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	</head>
	<body>
	<h2>레드향 샐러드 레시피</h2>
	<p><b>재료 :</b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
	<p><b>드레싱 :</b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
	<h4>재료 준비</h4>
	<ol type="a">
 	  <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
 	  <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
	</ol>
	<h4>드레싱 준비</h4>
	<ol type="a" start="3">
	   <li>드레싱 재료를 믹서에 갈아줍니다.</li>
	 </ol>
	 <h4>샐러드 완성</h4>
	<ol type="a" start="4">
  		<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
 	</ol>
	</body>
	</html>

🖥️ 결과물

⚡ 연습하기 - [ex3]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	</head>
	<body>
	<h1>탐라국 입춘굿</h1>
	<p>탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서<br> 
    유일하게 전통시대부터 존재했던 축제이다.</p>

	<p>제주에서 입춘은 새철 드는 날.<br>
	신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.</p>

	<h3>일정</h3>
	<ul type = "disc">
 	  <li>입춘맞이 : 1/27(월) ~ 1/31(금)</li>
 	  <li>낭쉐코사 : 2/1(토)</li>
 	  <li>거리굿 : 2/2(일)</li>
	   <li>열림굿 : 2/3(월)</li>
	   <li>입춘굿 : 2/4(화)</li>
	</ul>
	<h2>먹거리</h2>
	</body>
	</html>

🖥️ 결과물

📌 표 만들기

명령어

- <table></table> - 표만들기
- <tr></tr> = 행(table raw)
- <td></td> = 열(table data)
- <caption></caption> = 표 제목
- <th></th>= 셀 제목 ->굵게 가운데 정렬된다

[test4]

	
	<h1>표만들기(2행 2열)</h1>
	<table border="1">
	<caption>표 제목</caption>
	<tr><td>1행1열</td><td>1행2열</td></tr>
	<tr><td>2행1열</td><td>2행2열</td></tr>
	</table>
    

	<h1>표만들기(5행 4열)</h1>
	<table border="1">
	<caption>선물용과 가정용 상품 구성</caption>
	<tr><th>용도</th><td>중량</td><td>갯수</td><td>가격</td></tr>
	<tr><th>선물용</th><td>3kg</td><td>11~16과</td><td>35,000원</td></tr>
	<tr><th>선물용</th><td>5kg</td><td>18~26과</td><td>52,000원</td></tr>
	<tr><th>가정용</th><td>3kg</td><td>11~16과</td><td>30,000원</td></tr>
	<tr><th>가정용</th><td>5kg</td><td>18~26과</td><td>47,000원</td></tr>
	</table>


	<h1>표만들기(3행 3열)</h1>
	<table border="1">
	<caption>표 제목</caption>
	<tr><td>1행1열</td><td colspan="2">1행2열</td>                    </tr>
	<tr><td rowspan="2">2행1열</td><td>2행2열</td><td>2행3열</td></tr>
	<tr>                           <td>3행2열</td><td>3행3열</td></tr>
	</table>


	<h1>표만들기(5행 4열)</h1>
	<table border="1">
	<caption>선물용과 가정용 상품 구성</caption>
	<colgroup>
    	<col style="background-color: purple;">
    	<col>
    	<col style="background-color: pink;">
    <col>
	</colgroup>
	<tr><th>용도</th><td colspan="3">중량</td>                                 </tr>
	<tr><th rowspan="2">선물용</th><td>3kg</td><td>11~16과</td><td>35,000원</td></tr>
 	<tr>                          <td>5kg</td><td>18~26과</td><td>52,000원</td></tr>
	<tr><th rowspan="2">가정용</th><td>3kg</td><td>11~16과</td><td>30,000원</td></tr>
	<tr>                          <td>5kg</td><td>18~26과</td><td>47,000원</td></tr>
	</table>

🖥️ 결과물

⚡ 연습하기 - [ex4]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>복습하기</title>
	</head>
	<body>
	<h1>탐라국 입춘굿</h1>
	<p>탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게<br> 
전통시대부터 존재했던 축제이다.</p>

	<p>제주에서 입춘은 새철 드는 날.<br>
신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.</p>

	<p>자세한 정보 보기</p>

	<h3>일정</h3>
	<ul>
		<li>입춘맞이 : 1/27(월) ~ 1/31(금)</li>	
		<li>낭쉐코사 : 2/1(토)</li>
		<li>거리굿 : 2/2(일)</li>
		<li>열림굿 : 2/3(월)</li>
		<li>입춘굿 : 2/4(화)</li>
	</ul>

	<h2>먹거리</h2>
	<table border="1">
		<tr><th>입춘 천냥 국수</th><td>11:00 ~ 16:00</td><td>목관아 주차장</td></tr>
		<tr><th>제주 향토 음식</th><td>10:30 ~ 17:00</td><td>관덕정 마당</td></tr>
		<tr><th>입춘 주전부리</th>	<td>10:30 ~ 17:00</td><td>관덕정 마당</td></tr>
		<tr><th>차 나눔</th><td>10:30 ~ 17:00</td><td>관덕정 마당</td></tr>
	</table>
	</body>
	</html>

🖥️ 결과물

📌 테이블 합치기

기준은 항상 왼쪽 위

행 합치기(rowspan)
td rowspan="2" = 2행을 합침
-열 합치기(colspan)
td colspan="2" = 2열을 합침

⚡ 연습하기 - [ex5]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>복습하기</title>
	</head>
	<body>
	<table border="1">
		<tr><th>방이름</th>	<th>대상</th>	<th>크기</th>	<th>가격</th></tr>
		<tr><td>유채방</td>	<td>여성도미토리</td>	<td rowspan="3">4인실</td>	<td rowspan="4">1인 20,000원</td></tr>
		<tr><td rowspan="2">동백방</td>	<td>동성도미토리</td></tr>
		<tr><td>가족1팀</td></tr>
		<tr><td>천혜향방</td>	<td>-</td>	<td>2인실</td></tr>
		<tr><td colspan="4">바깥채 전체를 렌트합니다</td></tr>
	</table>
	</body>
	</html>

🖥️ 결과물

📌 테이블 행/열 영역지정

테이블 행 영역지정

<thead></thead> = 테이블머리
<tbody></tbody> = 테이블 본문
<tfoot></tfoot> = 테이블 요약

<thead style="background-color: green;">
- 녹색으로 배경색 지정
<tbody style="background-color: yellow;">
<tfoot style="background-color: orange;">

테이블 열 영역지정

<colgroup>
    <col style="background-color: purple;">
    <col>
    <col style="background-color: pink;">
    <col>
</colgroup>

리안🤍

CRUSH ON

이전 포스트

💻설치 및 html 파일 만들어보기(22.10.24 웹수업)

다음 포스트

💻웹 문서에 목록/표 만들기(22.10.25 웹수업)

웹공부기록

📌 목록 만들기

[test3]

⚡ 연습하기 - [ex2]

⚡ 연습하기 - [ex3]

📌 표 만들기

[test4]

⚡ 연습하기 - [ex4]

📌 테이블 합치기

⚡ 연습하기 - [ex5]

📌 테이블 행/열 영역지정

💻설치 및 html 파일 만들어보기(22.10.24 웹수업)

💻웹 문서에 이미지/오디오/비디오, 하이퍼링크 넣기(22.11.01 웹수업)

0개의 댓글