히바리 쿄야 와 함께 하는 Developer Cafe
[1일차] DO IT HTML+CSS+JAVASCRIPT 웹 표준의 정석/p15~p120/시맨틱 태그 , ul,li,ol,li , table,dl,dt,dd 태그 속성 본문
HTML5
[1일차] DO IT HTML+CSS+JAVASCRIPT 웹 표준의 정석/p15~p120/시맨틱 태그 , ul,li,ol,li , table,dl,dt,dd 태그 속성
TWICE&GFRIEND 2021. 2. 23. 22:43discription.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>설명 목록 리스트 discription list</title>
</head>
<body>
<h2>상품 구성</h2>
<dl>
<dt>선물용 3KG</dt>
<dd>소과 13~16과</dd>
<dd>중과 10~12과</dd>
</dl>
<dl>
<dt>선물용 5KG</dt>
<dd>중과 15~19과</dd>
</dl>
</body>
</html>
embed video audio 속성 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>embed 태그</title>
</head>
<body>
<embed src="medias/spring.mp3" type="">
<hr>
<audio src="medias/spring.mp3" controls=""></audio>
<hr>
<video src="medias/salad.mp4" controls="" width="700" autoplay="" loop=""></video>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목을 나타내는 heading 태그</title>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br> 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<blockquote>
<i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br>
<strong>혈액순환<sup>1</sup>, 감기예방<sub>2</sub></strong> 등에 좋<del>은 것으로 알려져 있</del>다.
</blockquote>
<h2>레드향 샐러드 레시피</h2>
<h2>상품구성</h2>
<!-- 텍스트 단락 p 태그 줄 바꾸는 br 태그 -->
<!-- blockquote 인용구 사용할때 태그 -->
<!-- strong 태그 굵게 강조할때 -->
<!-- b 태그도 스트롱 태그와 동일 -->
<!-- em, i 태그 텍스트 기울여 표시할때 -->
<!--
abbr 줄임말을 표시 타이틀 속성과 함께 사용
cite 웹 문서나 포스트에서 참고 내용을 표시
code 컴퓨터 인식을 위한 소스코드
small 부가 정보처럼 작게 표시해도 되는 텍스트
sub 아래 첨자를 표시
sup 위 첨자를 표시
s 취소선을 표시
u 밑줄을 표시
ins 새로운 내용 삽입
del 기존 내용을 삭제
-->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 태그</title>
</head>
<body>
<h1>레드향</h1>
<img src="images/tangerines.jpg" alt="레드향">
<hr>
<p>원래 크기의 이미지</p>
<img src="images/salad.jpg" alt="레드향">
<p>width="50%", height="50%" 로 지정한 이미지</p>
<img src="images/salad.jpg" alt="레드향" width="50%">
<p>width="150"으로 지정한 이미지</p>
<img src="images/salad.jpg" alt="레드향" width="150">
<!--
% 이미지 크기의 값을 퍼센트(%)로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로
이미지 크기를 결정
px 이미지 크기의 값을 픽셀(px)로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만 큼
표시된다.
-->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>
<a href="./test/order.html" target="_blank">
<img src="images/tangerines.jpg" alt="" >
</a>
</p>
</div>
</body>
</html>
order.html -> 아직 form 파트 학습 안해서 소스 붙여 넣었음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
<link rel="stylesheet" href="css/order.css">
</head>
<body>
<h1>레드향 주문하기</h1>
<div id="container">
<form>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<ul id="product">
<li>
<label><input type="checkbox" value="s_3">선물용 3kg</label>
<input type="number" min="0" max="5">개 <small>(최대 5개)</small>
</li>
<li>
<label><input type="checkbox" value="s_5">선물용 5kg</label>
<input type="number" min="0" max="3" value="1">개 <small>(최대 3개)</small>
</li>
<li>
<label><input type="checkbox" value="f_3">가정용 3kg</label>
<input type="number" min="0" max="5">개 <small>(최대 5개)</small>
</li>
<li>
<label><input type="checkbox" value="f_3">가정용 5kg</label>
<input type="number" min="0" max="3">개 <small>(최대 3개)</small>
</li>
</ul>
<p><b>포장 선택</b></p>
<ul>
<li><label><input type="radio" value="yes">선물 포장</label></li>
<li><label><input type="radio" value="no">선물 포장 안 함</label></li>
</ul>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
<li>
<label for="d-day">배송 지정</label>
<input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
</li>
<li>
<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div id="logo">
<a href="#"><h1>Dream Jeju</h1></a>
</div>
<nav>
<ul id="topmenu">
<li><a href="#">단체여행</a></li>
<li><a href="#">맞춤여행</a></li>
<li><a href="#">갤러리</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</nav>
</header>
<main class="contents">
<section id="headling">
<h2>몸과 마음이 치유되는 섬</h2>
</section>
<section id="activity">
<h2>다양한 액티비티가 기다리는 섬</h2>
</section>
</main>
<footer>
<div id="bottomMenu">
<ul>
<li><a href="#">회사 소개</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">여행약관</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table 태그</title>
</head>
<body>
<h2>상품 구성</h2>
<table border="1">
<caption>선물용과 가정용 상품 구성</caption>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
<tr>
<td>선물용</td>
<td>3KG</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5KG</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3KG</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5KG</td>
<td>18~16과</td>
<td>47,000원</td>
</tr>
</table>
<hr>
<h2>상품 구성</h2>
<table border="1">
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>선물용</td>
<td>3KG</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
</tbody>
</table>
<hr>
<h2>상품 구성</h2>
<table border="1">
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px;">
</colgroup>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
<tr>
<td rowspan="2">선물용</td>
<td>3KG</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<!-- <td>선물용</td> -->
<td>5KG</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3KG</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<!-- <td>가정용</td> -->
<td>5KG</td>
<td>18~16과</td>
<td>47,000원</td>
</tr>
</table>
<hr>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/poster.css">
<title>탐라국 입춘굿</title>
</head>
<body>
<img src="images/top.jpg" alt="" width="100%">
<div id="container">
<h1>탐라국 입춘굿</h1>
<p>탐라국 입춘굿은 입춘을 맞아 풍년을 기원하는 행사로, 제주도의 문화 축제 중에서 유일하게 탐라 시대부터 이어져 왔다.</p>
<p>제주에서는 입춘을 새철이라 한다. <br>신구간이 끝나 하늘의 1만 8,000 신이 지상으로 내려와 새해 일을 시작하는 때다.</p>
<p><a href="http://blog.daum.net/jepaf/2" target="_blank">자세한 정보 보기</a></p>
<video src="medias/flower.mp4" width="640" controls="" muted="" autoplay="" loop="">
</video>
<h2>일정</h2>
<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>
<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>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트 태그</title>
</head>
<body>
<h2>레드향 샐러드 레시피 ol 순서 있는 태그</h2>
<p><b>재료:</b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱:</b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol type="a">
<li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
<li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
<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>
<hr>
<h2>레드향 샐러드 레시피 ul 순서 없는 태그</h2>
<p><b>재료:</b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱:</b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ul>
<li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
<li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
<li>드레싱 재료를 믹서에 한꺼번에 넣고 갈아 줍니다.</li>
<li>불에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ul>
<!--
ol 순서 있는 태그
type = "1" 숫자(기본값)
type = "a" 영문 소문자
type = "A" 영문 대문자
type = "i" 로마 숫자 소문자
type = "I" 로마 숫자 대문자
ul 순서 없는 태그
-->
</body>
</html>
'HTML5' 카테고리의 다른 글
'HTML5' Related Articles
more
Comments