공부/front-end
HTML-2일차
삶은고구마
2023. 11. 14. 17:38
오전:어제 강의 복습
-file - save workspace as - 내가 사용할 프로젝트 폴더 경로에 파일 저장.
해당 파일 실행하면 그 경로에 있는 (생성/실행했던) 프로젝트들이 editor list에 나옴.
=>매번 vsc 실행 하지 않고 파일만 실행하면 됨.
-gitignore:설정하지 "않을" 파일들 작성(무시할 파일만)
-branch 생성 시 보통 목적/이름 이런식으로 네이밍하는게 보기 편함. ex) bugfix/texttest
-3-way merge : base / commit1 / commit2
- true merge 이 개념이 좀 헷갈리는데..
기존의 master에서 작업이 2가지로 분리 됨 master-master / master - feature/animal
이런 경우엔 빨리감기 병합이 불가능(1번째방법)하므로 새로 병합해야한다.(맨 오른쪽)
(컨플릭트 발생 가능)
확장기능 : Auto Rename Tag 추천
태그 시작과 끝 중 하나 수정시 나머지도 동일하게 수정됨
태그 사이에 자식태그도 포함 시킬 수 있다.
태그에 타이틀 작성 시 마우스 호버 시 내가 적은 내용이 보인다.
index.html
더보기
<!DOCTYPE html>
<html>
<head>
<!-- 페이지에 노출되지 않는 설정 정보-->
<meta charset="utf-8">
<title>🎅HTML🤶</title>
</head>
<body>
<h1>HTML</h1>
<!--
index.html은 랜딩페이지로써,
특정 폴더 하위에 파일이름이 지정되지 않은 경우 응답하는 파일.
http://192.168.20.37:5500/01_html/ 로 접속해도 index.html을 찾음(소문자 index)
-->
<!--
hyper text 다른 페이지를 향한 링크가 걸린 텍스트
-상대경로 : 현재 페이지 기준으로 경로 탐색
- ./ 현재 폴더(생략가능)
- ../ 부모 폴더
-절대경로 : /로 시작 , http://로 시작하는 url
상대,절대경로 모두 사용할 수 있음
-->
<!-- 인라인-->
<a href="./foo.html">foo</a> <!--현재 폴더-->
<a href="../02_css/bar.html">Bar</a> <!--부모 폴더로-->
<a href="/02_css/bar.html">Bar2</a> <!--절대 경로-->
<a href="http://192.168.20.37:5500/02_css/bar.html">Bar3</a> <!--절대 경로-->
</body>
</html>
<!--1114-->
<!--ul>li>a-->
<ul>
<!--블락-->
<li><a target="_top" href="01_text.html">텍스트 관련 태그</a></li>
<li><a target="_top" href="02_list.html">목록 관련 태그</a></li>
<li><a target="_top" href="03_global_attributes.html">공통 속성</a></li>
<li><a target="_top" href="04_table.html">테이블 속성</a></li>
<li><a target="_top" href="05_display.html">요소구분 inline|block</a></li>
<li><a target="_top" href="06_image.html">이미지 관련</a></li>
<li><a target="_top" href="07_link.html">링크 관련</a></li>
<li><a target="_top" href="08_iframe.html">iframe</a></li>
<li><a target="_top" href="09_media.html">미디어 관련</a></li>
<li><a target="_top" href="10_form.html">폼 관련</a></li>
</ul>
01_text.html
더보기
<!-- !+탭 html 문서 자동완성 -->
<!-- emmet html태그 자동완성 기능 -->
<!-- http://kor.pe.kr/util/4/charmap2.htm 특수문자 -->
<!-- https://www.w3schools.com/html/default.asp -->
<!-- https://developer.mozilla.org/ko/docs/Web/HTML/Element/abbr -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Text</h1>
<!--h${안녕}*6 -->
<!-- 아래로 갈 수록 제목 폰트 사이즈 작아짐-->
<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>
<!-- 문단 태그 -->
<!--
개행문자,탭문자,공백문자는 모두 그룹지어 공백1개로 처리된다. 엔터를 수십번 사용해도 공백 1개로 처리된다는 것.
공백을 더 주고싶다면 를 사용하자.
-->
<p>
춥다!!!! 반갑습니다. </br>
너무추워~~~~~~~</br>
</p>
<!--
1114 pre 태그 : pre-formatted 개행/탭/공백을 모두 그대로 출력
이클립스 doc (상단에 작성)에서 사용한 그 pre 태그
-->
<pre style="font-family: 'Courier New',Courier, monospace;">
pre 태그 테스트 ,,,
내가 아무렇게나 써도
작성한
그
대
로
출력해줌.
</pre>
<!-- pre>code-->
<pre>
<code>
function foo()
{
console.log('foo');
}
</code>
</pre>
<!-- 특수문자 표현&문자-->
<p>
<p></p>를 "표현"하기
</p>
<!-- 수평선 태그 <hr> -->
<hr>
<hr>
<h2>Pharse Tags</h2>
<!--
특수한 기능을 가진 시멘틱 태그(의미 태그) 중 text 관련된 태그
태그의 목적과 내용을 일치 시켜서 사용하는 태그.
-스크린 리더(검색봇,시각장애인)에 의해 해석이 가능하다.
-웹 접근성 향상
-->
<em>기울여서 강조 처리</em></br>
<strong>볼드체로 강조 처리</strong></br>
<mark>하이라이팅 처리</mark></br>
<ins>밑줄로 강조 처리</ins><br>
<del>취소선 처리</del>
<p>
<!-- abbreviation 줄임말 태그-->
<abbr title="Artificial Intelligence">AI</abbr>란 인공지능을 가리킨다.
</p>
<p>
자바에서 출력문은 <code>System.out.println();</code>메소드를 사용한다.
</p>
<p>
<!-- 두개의 태그 속성을 섞어서 사용할 수 있음. 기울임+볼드 -->
<strong><em>웹접근성</em></strong>은 정말 중요합니다.
</p>
</body>
</html>
02_list.html
목록태그
-순서가 있는 목록(넘버링):영문표기, 숫자표기,로마자 표기 등등 다양하다.
-순서가 없는 목록(넘버링x):동그라미,네모 등 앞에 다양한 모양을 붙일 수 있음.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | 목록</title>
</head>
<body>
<!-- 목록 태그는 두개가 있다. 순서가있는/없는 목록-->
<h1>목록</h1>
<!-- 순서가 있는 목록 ORDERD LIST -->
<ol style="list-style:lower-alpha;">
<li>HTML5</li>
<li>CSS3</li>
<li>JAVA SCRIPT2015</li>
</ol>
<!-- 순서가 없는 목록 UNORDERD LIST : 앞에 동그라미(bullet) -->
<ul style=list-style:square;">
<li>HTML5</li>
<li>CSS3</li>
<li>
JAVA SCRIPT2015
<ul>
<li>React.js</li>
<li>Vue.js</li>
<li>Svelte.js</li>
</ul>
</li>
</ul>
<!-- 설명 목록 태그 Description List dt-dd세트 -->
<dl>
<!-- title 속성은 tooltip 형태로 마우스 호버시 제공.-->
<dt title="웹">Web</dt>
<dd><strong>1990년 팀 버너스리가 만들고 오픈소스화 하였다.</strong></dd>
<!-- dt+dd하면 동시에 생성가능-->
<dt>HTML</dt>
<dd>Hyper Text Markup Language의 약자이다..</dd>
<dd>페이지의 정보를 계층구조로 표현할 수 있다.</dd>
<dd>링크를 통해 다른 페이지로 연결 할 수 있다.</dd>
</dl>
</body>
</html>
03_global_attributes.html
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | Global Attributes</title>
</head>
<body>
<h1>Global Attributes</h1>
<a href="https://www.w3schools.com/tags/ref_standardattributes.asp">
html global attribute
</a>
<br>
<!-- id : 페이지 내 태그의 식별자. 태그별로 유일한 값을 작성 -->
<em id = "hello">안녕</em>
<!-- em#bye{잘가} -->
<em id="bye">잘가</em>
<!-- class : 태그 그룹핑. 그룹별로 css/js 적용할 때 사용-->
<!-- p>lorem :아무말이나 채워주는 태그-->
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus possimus odit nesciunt architecto tenetur, magni nam doloribus recusandae in officia atque obcaecati veritatis maxime et, molestias amet voluptas. Quisquam, cum!</p>
<!-- p.para>lorem-->
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum similique distinctio harum at nulla molestias consectetur facere vero fuga repellat itaque, libero voluptates? Eius aliquid magni quasi fugit cum culpa.</p>
</body>
</html>
04_table.html
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | Table</title>
<style>
table{
border:1px solid black;
border-collapse: collapse;
}
th, td{
border:1px solid pink;
padding: 10px;
}
#resume{
width:500px
}
</style>
</head>
<body>
<!-- 표를 만들 수 있다. 기본:경계선없음/경계선 만들수는있음! -->
<title>HTML | Table</title>
<h1>Table</h1>
<!--
<table> 테이블 관련 최상위 태그.
<thead> 헤더 행을 감싸는 태그
<tbody> 내용 행을 감싸는 태그
<tfoot> 푸터 행을 감싸는 태그
<tr> 행 태그
<th> 제목 셀 태그
<td> 내용 셀 태그
-->
<!-- table>thead>tr>th*3-->
<table>
<!-- 캡션같은거는 적을 수 있는데 테이블 태그 안에 p태그나 다른 태그는 사용x-->
<caption>웹 브라우져 표</caption>
<thead>
<tr>
<th>브라우져명</th>
<th>제조사</th>
<th>홈페이지</th>
</tr>
</thead>
<!--tbody>(tr>td)*3
이렇게 괄호로 묶어서 내가 원하는대로 태그를 만들수 있다.-->
<!--tbody>tr>td*3-->
<!-- tbody>(tr>td*3)*3 -->
<tbody>
<tr>
<td>Edge</td>
<td>ms</td>
<td><a href="https://microsoft.com">https://microsoft.com</a></td>
</tr>
<tr>
<td>Chrome</td>
<td>google</td>
<td><a href="https://google.com">https://google.com</a></td>
</tr>
<tr>
<td>safari</td>
<td>apple</td>
<td><a href="https://apple.com">https://apple.com</a></td>
</tr>
</tbody>
<!--tfoot 추가-->
<!--tfoot>tr>th*2 -->
<tfoot>
<tr>
<th>총 갯수</th>
<!-- colspan 2개로 확장 col:가로 /row:세로 -->
<th colspan="2">3</th>
</tr>
</tfoot>
</table>
<hr>
<h2>행 | 열 확장</h2>
<!-- 행 확장(세로) rowspan-->
<!-- 열 확장(가로) colspan-->
<!-- 예제 : 간단한 자기 소개표 만들어보기 -->
<table id = "resume">
<thead>
<tr>
<th colspan="4">자기소개 테이블</th>
</tr>
</thead>
<tbody>
<tr>
<td
img src="./gom.jpg"
colspan="2"
rowspan="2"
style="width:130px; height:150px">사진</td>
<th style="width:80px;">이름</th>
<td>농담곰</td>
</tr>
<tr>
<th>연락처</th>
<td>010-7777-7777</td>
</tr>
<tr>
<th style="width:70px;">주소</th>
<td colspan="3">농담시 농담구 농담동 11번지</td>
</tr>
<tr>
<th style="height:100px;">자기소개</th>
<td colspan="3">잘 부탁 드립니다.</td>
</tr>
</tbody>
</table>
<hr>
<!-- 환율고시표 이미지 대로 테이블 만들어보기.. -->
<table>
<thead style="background-color: khaki;">
<tr>
<th rowspan="2">통화</th>
<th rowspan="2">매매<br>기준율</th>
<th colspan="2">현찰 매매율</th>
<th colspan="2">전신환 매매율</th>
<th rowspan="2">T/C<br>매도율</th>
</tr>
<tr>
<th>매도율</th>
<th>매입율</th>
<th>매도율</th>
<th>매입율</th>
</tr>
</thead>
<tr>
<td style="height:100px">미국(USD)</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
05_display.html
block:전체 페이지 길이만큼 영역 확보 (h1~h6,div,p...)
inline:콘텐츠 길이만큼 영역 확보 (strong,em..)
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | Display</title>
</head>
<body>
<h1>Display</h1>
<h2>요소구분 inline | block</h2>
<!--
block 요소: 좌우를 채워서 영역을 차지하는 요소 h1~h6,p,div
inline요소: "내용만큼만" 영역을 차지하는 요소 span,em,strong 등..
-->
<!--div(division) 영역을 의미하는 태그-->
<h3>blck 요소</h3>
<div style="background-color: hotpink;">하나</div>
<div style="background-color: aqua;">둘</div>
<div style="background-color: tan;">셋</div>
<h3>inline 요소</h3>
<span style="background-color: hotpink;">하나</span>
<span style="background-color: aqua;">둘</span>
<span style="background-color: tan;">셋</span>
</body>
</html>
06_image.html
이미지 높이 너비 등 결정시
절대단위:200px 같이 픽셀 단위로 결정. =>창 크기 변해도 고정
상대단위:부모크기에 맞춰 %(비율)로 결정. =>창 크기에 따라 사이즈 변경
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | Image</title>
</head>
<body>
<!--인라인-->
<h1>image</h1>
<!--
src 이미지 경로
alt 대체 텍스트. 이미지 로드 실패시 화면에 노출될 텍스트.
스크린 리더에 의해 해석,전달된다.
-->
<!-- ../ <-부모 경로 -->
<!-- 높이,너비 수정시 하나만 수정. 둘다 수정하면 비율 이상해짐.-->
<img src="../sample/image/flower1.PNG" alt="분홍벚꽃" style="width:200px">
<!-- 절대경로-->
<img src="/sample/image/flower1.PNG" alt="분홍벚꽃" style="width:200px">
<img src = "https://ichef.bbci.co.uk/news/640/cpsprodpb/E172/production/_126241775_getty_cats.png"
alt="고양이">
<h2>절대 | 상대 단위</h2>
<h3>px : 절대단위</h3>
<div>
<img src="/sample/image/flower1.PNG" width="100px" alt="">
<img src="/sample/image/flower2.PNG" width="100px" alt="">
<img src="/sample/image/flower3.PNG" width="100px" alt="">
<img src="/sample/image/flower4.PNG" width="100px" alt="">
<img src="/sample/image/flower5.PNG" width="100px" alt="">
</div>
<h3>% : 상대(가변)단위</h3>
<!--
부모 태그 기준으로 상대 크기를 결정한다.
부모 기준으로 퍼센테이지 크기이기 때문에 부모가 1000px인경우와 200px인 경우 같은 15%여도 다름
-->
<div>
<img src="/sample/image/flower1.PNG" width="15%" alt="">
<img src="/sample/image/flower2.PNG" width="15%" alt="">
<img src="/sample/image/flower3.PNG" width="15%" alt="">
<img src="/sample/image/flower4.PNG" width="15%" alt="">
<img src="/sample/image/flower5.PNG" width="15%" alt="">
</div>
<h2>정렬</h2>
<!-- div>img+p>lorem-->
<div>
<!--인라인과 블락 요소를 섞으면 인라인 옆에 블락이 붙지 않고 개행되어 아래에 출력됨-->
<img
src="../sample/image/river1.PNG"
width="200px"
style="float:left; margin:10px;"
alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure exercitationem odit mollitia, nihil voluptatem quibusdam consequuntur ratione itaque impedit soluta veniam magnam aut similique ullam. Accusantium necessitatibus eius qui cupiditate!</p>
</div>
<div>
<img
src="../sample/image/river1.PNG"
width="200px"
style="float:right; margin:10px;"
alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure exercitationem odit mollitia, nihil voluptatem quibusdam consequuntur ratione itaque impedit soluta veniam magnam aut similique ullam. Accusantium necessitatibus eius qui cupiditate!</p>
</div>
</body>
</html>
07_link.html
텍스트 말고 이미지에도 특정 사이트 등의 링크를 걸 수 있다.
혹은 이미지의 특정 영역만 선택하여 링크를 걸 수 있다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | Link</title>
</head>
<body>
<h1>Link</h1>
<h2>target</h2>
<!-- 기본 값 (생략 가능) _self -->
<a href="./" target="_self">인덱스 현재 탭에서 열기..</a>
<!-- 새 탭에서 열기 _blank -->
<a href="./" target="_blank">인덱스 새 탭에서 열기..</a>
<h2>Image Link</h2>
<a href="./">
<img src="../sample/image/flying_pig.jpg" width="100px" alt="">
</a>
<!-- 하나의 이미지 링크에 영역을 나눠서 다른 링크들을 걸 수있음 -->
<!-- 직사각형 영역 left top ~ right bottom -->
<!-- 이미지 영역쉽게 설정하는 사이트 https://www.image-map.net/-->
<img src="../sample/image/forest1.PNG" width="200px" alt="" usemap="#imgmap">
<map name="imgmap">
<!--
shape 영역모양 rect | circle | poly
coords 좌표 x1,y1,x2,y2
href 링크
alt
target
-->
<area shape="rect" coords="0,0, 100,200" href="https://naver.com" alt="네이버">
<area shape="rect" coords="100,0 ,200,200" href="https://daum.net" alt="다음">
</map>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/E172/production/_126241775_getty_cats.png" usemap="#image-map">
<map name="image-map">
<area target="_self" alt="cat_nose" title="cat_nose" href="https://cdn.imweb.me/upload/S2020073042b4f52becd2f/4c45cdad2f928.jpg"
coords="334,241,31" shape="circle">
</map>
<!--북마크-->
<h2>Bookmark(anchor)</h2>
<!--div>ul>li>a-->
<div>
<ul>
<!-- #:현재페이지-->
<li><a href="#content1">내용1</a></li>
<li><a href="#content2">내용2</a></li>
<li><a href="#content3">내용3</a></li>
<li><a href="#:~:text=exercitationem voluptates numquam debitis">하이라이팅 북마크</a></li>
</ul>
</div>
<!-- div : 태그들을 묶는 용도-->
<!--div>h3+(p>lorem)*2-->
<div>
<h3 id="content1">내용1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
<p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
<p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
</div>
<div>
<h3 id="content2">내용2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
<p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
<p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
</div>
<div>
<h3 id="content3">내용3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
<p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
<p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>
<ul>
<li><a href="#content1">내용1</a></li>
<li><a href="#content2">내용2</a></li>
<li><a href="#content3">내용3</a></li>
<li><a href="#top">맨위로</a></li>
</ul>
</div>
</body>
</html>
08_iframe.html
페이지 내의 프레임을 나눠서 각기 다른 컨텐츠를 보여줄 수 있음.
youtube 영상 embed - 링크 복사 하면 iframe으로 되어있음. 그대로 코드에 적용하면 된다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | Iframe</title>
</head>
<body>
<h1>iframe</h1>
<!--
페이지 내에 다른 페이지를 포함해서 출력
-->
<iframe src="./" frameborder="0" width="100%"></iframe>
<iframe src="04_table.html" frameborder="1" width="100%" height="100%"></iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/cp4aUznNvJ0?si=VlxRjiHuKSceB2-p"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</body>
</html>
09_media.html
이미지 외에 영상,오디오등도 페이지에 삽입가능하다.
브라우저마다 최적화된 자원을 선택하여 재생 - 용량이 큰 미디어는 사용 지양 할 것.
(속성명=속성값이 일치하는 경우 속성명만 사용해줘도 된다.)
mute:음소거
autoplay:자동재생(브라우저마다 작동 상이함)
loop:재생종료후 반복
controls:시작,일시정지등 조작할 수 있는 ui가 나옴.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | Media</title>
</head>
<body>
<h1>Media</h1>
<!--
html5에서는 미디어 관련해서 별도의 플러그인 없이 재생이 가능하다.
-->
<h2>audio</h2>
<!-- controls 라는 속성을 추가해야 누를 수 있는 것이 생김 -->
<!-- 속성명=속성값 2개가 동일한 경우, 속성값을 생략 가능. -->
<!-- 자동재생:autoplay 브라우저마다 실행되는 경우,안되는 경우 있음.-->
<!-- 음소거:mute , 반복재생:loop -->
<audio src="../sample/audio/major.mp3"
autoplay
muted
loop
controls="controls"></audio>
<!--오디오/속성 따로지정-->
<!--같은 컨텐츠를 여러 확장자로 준비한 경우..디바이스 별로 최적화된 자원을 재생한다-->
<audio controls>
<source src="../sample/audio/major.mp3">
</audio>
<!--비디오 역시 controls 속성을 부여해야 재생 버튼이 보임-->
<h2>video</h2>
<video
src="../sample/video/small.mp4"
muted
loop
poster = "../sample/image/flower5.PNG"
controls>
</video>
<!--
디바이스 별로 최적화된 자원을 선택 재생.
-pc browser : mp4/webm/ogg 순으로 선호
-mobile browser : mp4/3gop 순으로 선호
서버 부하를 줄이기 위해 용량이 큰 동영상 파일은 별도의 미디어 서버나
유튜브, vimeo 등을 통해 제공하는 것이 좋다. (위의 링크같이 사용하지 않고..)
-->
<video>
<source src="../sample/video/small.webm" type="video/webm" controls>
<source src="../sample/video/small.ogv" type="video/ogg" controls>
<source src="../sample/video/small.mp4" type="video/mp4" controls>
</video>
</body>
</html>
10_form.html << 중요하다.
label for = input id
이거 하나라도 확실히 외우자.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML | form</title>
</head>
<>
<h1>Form</h1>
<!--
사용자 입력값을 서버로 전송하기 위한 form과 input 태그 등을 제공..
name:폼의 이름 (서버로 전송되지 않음. 페이지내에서 구분을 위한 용도)
action:제출할 서버 주소 (url)
method:http 메시지를 작성하는 방법
-get:기본값, 사용자 입력값을 url에 query-string 형식으로 전달
-post:사용자 입력값을 http 메시지 바디에 작성 (url에서 확인불가)
query-string 작성 시, key=value형식에 사용되는 key값:name속성값
form 하위 input태그는 name속성을 반드시 가지고 있어야 한다....
-->
<form name="loginFrm" action="10_form.html" method="get">
<label for="username">아이디</label>
<input type="text" id="username" name="_username">
<br>
<label for="password">비밀번호</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="로그인">
</form>
<h2>text</h2>
<form action="" method="get">
<!-- 입력값들을 시각적으로 그룹핑 -->
<fieldset>
<legend>text관련 input 태그</legend>
<label for="memberName">회원명</label>
<input
type="text"
id="memberName"
name = "memberName"
value="신사임당"
placeholder="이름을 입력하십시오.."
required
>
<br>
<label for="memberPw">비밀번호</label>
<input
type="password"
name="memberPw"
id="memberPw"
placeholder="비밀번호를입력하시오"
value="1234"
maxlength="8"
required
>
<br>
<label for="searchKw">검색</label>
<input type="search" name="searchKw" id="searchKw" placeholder="검색어입력!">
<label for="memberEmail">이메일</label>
<!-- email 유효성검사 -->
<input type="email" name="memberEmail" id="memberEmail">
<br>
<label for="homepage">홈페이지</label>
<!-- url 유효성검사 -->
<input type="url" name="homepage" id="homepage">
<br>
<label for="memberTel">전화번호</label>
<!--숫자 키 패드 제공-->
<input type="tel" name="memberTel" id="memberTel">
<br>
</fieldset>
<input type ="submit" value="제출">
</form>
<form action="">
<fieldset>
<legend>number 관련 input</legend>
<label for="cnt">개수</label>
<input
type="number" name="cnt" id="cnt"
min="1"max="10" value="1" step="2">
<br>
<label for="score">점수</label>
<input type="range" name="socre" id="score" min="0" max="100">
<br>
</fieldset>
<input type="submit" value="제출">
</form>
<!-- 날짜 포맷 : yyyy-mm-dd 이 형식 하나뿐임.-->
<!-- 시간 : 18%3A15 18:15에서 :가 %3A가 됨 시간도 24:00 이 형식 하나뿐임 -->
<form action="">
<fieldset>
<legend>날짜/시간관련 input</legend>
<label for="someday">날짜</label>
<input type="date" name="someday" id="somday" value="2002-01-01">
<br>
<label for="sometime">시각</label>
<input type="time" name="sometime" id="sometime" value="21:30">
<br>
<!--
2023-11-14T16%3A18 에서 T는 날짜/시간 구분자임
-->
<label for="when">날짜/시각</label>
<input type="datetime-local" name="when" id="when"
value="2002-08-08T16:20">
</fieldset>
<input type="submit" value="제출">
</form>
<form action="">
<fieldset>
<legend>선택관련 input</legend>
<!-- 단일선택 input:radio 체크하면 name의 value값이 날라감 gender=M -->
<!-- 선택없이 제출하면 아무것도 안날아감-->
<div>
성별:
<label for="gender-male">남</label>
<input type="radio" name="gender" id="gender-male" value="M" checked>
<label for="gender-female">여</label>
<input type="radio" name="gender" id="gender-female" value="F">
</div>
<!-- radio, checkbox의 default value는 on -->
<div>
<label for="sms">sms수신</label>
<input type="checkbox" name="sms" id="sms">
</div>
<!-- 복수선택 input:checkbox -->
<!-- INPUT의 NAME값이 같아야 그룹핑 됨. -->
<div>
취미:
<input type="checkbox" name="hobby" id="hobby-game" value="GAME" checked>
<label for="hobby-game">게임</label>
<input type="checkbox" name="hobby" id="hobby-movie" value="MOVIE">
<label for="hobby-movie">영화</label>
<input type="checkbox" name="hobby" id="hobby-music" value="MUSIC">
<label for="hobby-music">음악</label>
</div>
<!-- 단일/복수 선택 select -->
<select name="menu" id="menu" multiple>
<option value="">==메뉴==</option>
<option value="된">된장찌개</option>
<option value="김" selected>김치찌개</option>
<option value="순">순두부찌개</option>
</select>
<!-- 선택 & 선택지 없으면 작성 datalist-->
<label for="userBrowser">브라우져 선택</label>
<input type="text" name="userBrowser" id="userBrowser" list="browsers">
<datalist id="browsers">
<!-- <option value="Edge">엣지</option>
<option value="Chrome">크롬</option>
<option value="Firefox">파이어폭스</option> -->
<option value="Edge"/>
<option value="Chrome"/>
<option value="Firefox"/>
</datalist>
</fieldset>
<input type="submit" value="제출">
</form>
<!-- favoriteColor=%238a2828 : %23 = # 뒤에는 해당컬러 hex값-->
<form action="">
<fieldset>
<legend>기타 input</legend>
<div>
<label for="favoriteColor">선호색상</label>
<input type="color" name = "favoriteColor" id="favoriteColor"
value="#8a2828">
</div>
<div>
<label for="upFile">파일선택</label>
<input type="file" name="upFile" id="upFile">
</div>
<!-- 사용자에게 노출 없이 서버로 전송 :눈에는 안보이는데 제출버튼누르면 val=123이 날아감-->
<div>
<input type="hidden" name="val" value="123">
</div>
<!-- 노출은 되지만 서버로 전송되지 않는다. disabled -->
<div>
<input type="text" name="name" value="홍길동" disabled>
</div>
</fieldset>
<!-- 버튼 태그를 만드는 2가지 방법-->
<!-- 1.ipnut-->
<div>
<input type="button" value="버튼">
<input type="reset" value="초기화">
<input type="submit" value="제출">
</div>
<!-- 2.button-->
<!-- div>button[type]*3-->
<!-- 버튼으로 생성할 때 기본은 제출이라 다른 버튼만들거면 타입 명시해야함!-->
<div>
<button type="button">버튼</button>
<button type="reset">초기화</button>
<button type="submit">제출</button> <!-- type:submit 기본값 -->
<button>제출~</button>
</div>
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
1.오늘까지 한 html 예제들 git 업로드 완료
2.실습과제 3종 완료
3.테이블 그리기 연습하기
->colspan / rowspan 전 총 행,열이 몇인지부터 파악.