728x90
2021년 01월 11일 9시 ~ 15시 30분 zoom으로 수업 진행
| 태그 | 기능 |
| em | 강조된 텍스트 효과 , 글자를 기울이는 태그(이탤릭) |
| i | 글자를 기울인다(이탤릭). |
| mark | 텍스트에 형광펜으로 칠한 것 같은 효과를 준다. |
| u | 글자에 밑줄을 그어준다. |
| small | 글자 크기가 작은 텍스트를 정의 |
| s | 텍스트 한가운데에 선을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현 |
<!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>
<!-- 단락 -->
<h3>단락을 구분하는 태그</h3>
<hr>
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
<br>
<h3>문단을 나누는 태그</h3>
<pre>문단영역을 나누는 태그로는 pre 태그와 p 태그가 있다.
p태그는 문단 영역을 나누기는 하지만, 한 개의 공백만 표시하며 줄 바꿈 입력을 별도의 태그로 지정해주어야 한다.
pre 태그는 여러 칸 띄우기 혹은 줄 바꿈 등을 포함하여 입력한 내용 그대로 표현하는 태그이다.
</pre>
<p>문단영역을 나누는 태그로는 pre 태그와 p 태그가 있다.
p태그는 문단 영역을 나누기는 하지만, 한 개의 공백만 표시하며 줄 바꿈 입력을 별도의 태그로 지정해주어야 한다.
pre 태그는 여러 칸 띄우기 혹은 줄 바꿈 등을 포함하여 입력한 내용 그대로 표현하는 태그이다.
</p>
<hr>
<h3>그 밖의 텍스트를 다루는 태그들</h3>
<strong>글자를 굵게 표시하는 태그</strong>
<br>
<b>글자를 굵게 표시하는 태그</b>
<br><br>
<em>글자를 기울이는 태그</em>
<br>
<i>글자를 기울이는 태그</i>
<br><br>
<blockquote>인용 문구를 나타내는 태그</blockquote>
<blockquote cite="http://www.naver.com">링크를 추가한 인용 문구를 나타내는 태그</blockquote>
<!-- 들여쓰기를 이용해 인용문임을 나타내고, 긴 인용문에 사용, 블럭 -->
<q>인용문구를 나타내는 태그</q>
<!-- "" 를 붙여 출력하고, 짦은 인용문에 사용, 인라인 -->
<br>
<br>
<mark>형관펜 효과를 나타내는 태그</mark><!-- 인라인 -->
<br>
<u>글자에 밑줄을 긋는 태그</u><!-- 인라인 -->
<br>
<small>글자를 작게 표시하는 태그</small><!-- 인라인 -->
<br>
기본 글자에 <sub>아래첨자</sub>를 나타내는 태그와 <sup>윗첨자</sup>를 나타내는 태그이다.
<br>
<s>글자에 취소선을 넣는 태그이다</s><!-- 인라인 -->
<br>
<hr>
<h3>글자 관련 태그 응용</h3>
<p>태그들은 해당 태그에서 중첩으로 사용 가능하다.<br>
<b>굵은</b> 글자를 사용할 수도 있고, <i>기울이거나</i> , <s>취소선</s>을 넣는 등 다양하게
사용할 수 있다.
</p>
</body>
</html>
| 태그 | 기능 |
| a | 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크를 정의 href 속성을 이용해 링크의 목적지를 가리킨다. |
<!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>
<h3>a 태그를 이용한 하이퍼링크 테스트</h3>
<!-- 리스트 . 목록관련 태그 -->
<!-- -->
<ul>
<li><a href="html01_block_inline.html">블록요소 & 인라인요소</a></li>
<li><a href="html02_title.html">제목.html</a></li>
<li><a href="html03_hr_quotation.html">hr_qu.html</a></li>
<li><a>text.html</a></li>
</ul>
<!--
a태그에 href 속성을 이용해 이동하고 싶은 파일의 경로와 파일명을 적으면 텍스트에 밑줄이 생기고, 누르면 해당 페이지로 이동한다.
링크를 잘못 입력했을 경우 파일을 찾을 수 없어서 원하는 페이지가 뜨지 않는다.
-->
<br>
<h3>네트워크가 연결된 상황이라면 현재 서비스 되는 웹 페이지도 링크 가능</h3>
<ul>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.google.com">구글</a></li>
</ul>
<br>
<h3>이미지에 링크 기능</h3>
<a href="http://www.naver.com" target="_blank"><img src="image/jjin.jpg" width="250px" height="300px"></a>
<!-- target="_blank" 는 a 태그에 지정된 링크로 이동 할 때 새 창을 띄워 해당 링크로 이동하는 속성 -->
<a href="http://www.naver.com" target="_self"><img src="image/jjin.jpg" width="250px" height="300px"></a>
<!-- target="_self" 는 a 태그에 지정된 링크로 이동 할 때 현재 창에서 해당 링크로 이동하는 속성 -->
<br>
<hr>
<h3>한 페이지 내에서 점프하기</h3>
<a href="#a">1번으로</a>
<a href="#b">2번으로</a>
<a href="#c">3번으로</a>
<!-- 태그에 지정한 아이디를 a태그의 속성값으로 주면 해당 태그의 위치로 이동할 수 있다. -->
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<p id="a">1번</p>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<p id="b">2번</p>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<p id="c">3번</p>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
</body>
</html>
| 태그 | 기능 |
| ul | 순서가 없는 html 리스트를 정의 |
| li | html 리스트에 포함되는 아이템을 정의 |
| ol | 순서가 있는 html 리스트를 정의 |
| 태그 | 기능 |
| dl | 용어와 그에 대한 설명을 리스트 형식으로 정의 용어나 이름을 나타내는 dt 태그와 해당 용어에 대한 설명을 나타내는 dd 태그로 구성된다. |
| dt | dl 요소에서 용어 부분을 정의 |
| dd | dl 요소에서 설명 부분을 정의 |
<!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>
<!-- 순서 없는 목록 -->
<h3>순서 없는 목록 태그</h3>
<ul>
<li>HTML5</li>
<li>CSS</li>
JS<!-- 얘는 목록이라기보다는 그냥 정렬되서 출력된 텍스트일 뿐임 li 태그가 안 붙어있어서!-->
<li>JQuery</li>
</ul>
<!-- 순서 있는 목록 -->
<h3>순서 있는 목록 태그</h3>
<ol>
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>JQuery</li>
</ol>
<!-- 순서가 있는 목록의 기본값은 숫자다 -->
<h3>영문 소문자로 표기</h3>
<ol type="a">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>JQuery</li>
</ol>
<h3>영문 대문자로 표기</h3>
<ol type="A">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>JQuery</li>
</ol>
<h3>로마 숫자 소문자 표기</h3>
<ol type="i">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>JQuery</li>
</ol>
<h3>로마 숫자 대문자 표기</h3>
<ol type="I">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>JQuery</li>
</ol>
<h3>역순으로 표기</h3>
<ol reversed="reversed">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>JQuery</li>
</ol>
<!-- 설명 목록 태그<d1> -->
<h3>설명 목록 태그</h3>
<dl>
<dt>이곳은 목록의 제목을 적는 곳</dt>
<dd>이곳은 목옥에 대한 설명을 적는 곳</dd>
<dd>여러 줄을 작성할 수도 있습니다.</dd>
<dt>또 다른 목록의 제목을 적어 새로운 목록 만들기</dt>
<dd>새로운 목록도 설명 작성</dd>
<dd>여러 줄 작성 가능가능</dd>
<dd>목록 별로 행을 다르게 할 수도 있다.</dd>
</dl>
</body>
</html>
| 태그 | 기능 |
| table | 데이터를 포함하는 셀들의 행과 열로 구성된 2차원 테이블을 정의 |
| caption | 테이블의 설명을 정의 table 요소는 caption 요소를 하나만 명시할 수 있고 caption은 table 요소의 바로 다음에 위치해야 한다. |
| thead | html 테이블에서 헤더 콘텐츠들을 하나의 그룹으로 묶는다 table 요소의 자식 요소로 반드시 caption, colgroup 요소 다음에 위치해야하며 반드시 tr 요소를 포함하고 있어야 한다. |
| tbody | html 테이블에서 내용 콘텐츠들을 하나의 그룹으로 묶는다 table 요소의 자식 요소로 반드시 caption, colgroup, thead 요소 다음에 위치해야하며 반드시 하나 이상의 tr 요소를 포함해야한다. |
| tfoot | html 테이블에서 푸터 콘텐츠들을 하나의 그룹으로 묶는다 table 요소의 자식 요소로 반드시 caption, colgroup, thead, tbody 요소 다음에 위치해야하며 반드시 하나 이상의 tr 요소를 포함해야한다. |
| th | 각 열의 제목을 정의 |
| tr | 테이블의 각 행(row)을 정의 |
| td | 하나의 테이블 셀을 정의 |
<!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>
<!-- 표를 만드는 태그에는 <table><tr><th><td>
<table> : 기본적인 표를 생성해주는 태그
<tr> : 표의 행을 나타내는 태그
<th> : 표의 제목 셀을 나타내는 태그
<td> : 표의 일반 셀을 나타내는 태그
-->
<h2>기본 테이블 만들기</h2>
<table border="1" style="width:300px;">
<tr>
<th>컬럼01</th>
<th>컬럼02</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
<h2>주요 태그 사용해서 만들기</h2>
<table border ="1">
<caption>테이블 제목</caption><!-- 테이블의 가로 길이에 맞춰 출력 + 중앙정렬 인듯 -->
<colgroup>
<col width="100px"><!-- 첫 번째 행(컬럼)의 가로 길이를 지정 -->
<col width="200px"><!-- 두 번째 행(컬럼)의 가로 길이를 지정 -->
<col width="300px"><!-- 세 번째 행(컬럼)의 가로 길이를 지정 -->
</colgroup>
<tfoot>
<!--
colgroup 아래에 tfoot 을 기입해도 테이블의 맨 밑에 온다.
thead, tbody, tfoot 자체가 테이블의 위치 순서에 대한 의미를 담고 있는 태그이기 때문에
작성 순서에 관계 없이 tfoot은 테이블의 맨 하단에 위치한다.
-->
<tr>
<td>foot1</td>
<td>foot2</td>
<td>foot3</td>
</tr>
</tfoot>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<!-- <td>4</td> 하면 옆에 하나 더 붙는 것임~! -->
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
<!-- tfoot 위치 -->
</table>
<hr>
<h2>테이블 셀 병합하기</h2>
<!--
<td> 태그의 속성을 이용하여 행, 열 합치기 가능
colspan : 열을 합친다.
rowspan : 행을 합친다.
-->
<table border="1">
<caption>rowspan 병합 테이블</caption>
<thead style="background-color: cadetblue;">
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
</thead>
<tbody>
<tr>
<td rowspan="2">1(세로) 합치기</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<!-- rowspan="2"를 지정했기 때문에 2개의 공간을 본인 영역으로 갖게 된다. 사용중인 공간을 침범할 수 없기 때문에 다음으로 오는 td가 옆으로 밀려서 출력된다.-->
</tbody>
</table>
<br>
<table border="1">
<caption>colspan 병합 테이블</caption>
<thead style="background-color: cadetblue;">
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td colspan="2">7</td>
</tr>
<!-- colspan="2"를 지정했기 때문에 2개의 공간을 본인 영역으로 갖게 된다. -->
</tbody>
<tfoot>
<tr>
<td colspan="4">가로합치기</td>
</tr>
</tfoot>
</table>
<hr>
<table border="1">
<tr>
<th>ID</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>PW</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="로그인">
<input type="button" value="취소">
</td>
</tr>
</table>
</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="sample/image/river1.PNG">
<h3>alt 속성</h3>
<img src="sample/image/river.PNG" alt="두물머리">
<!--
alt 속성은 이미지를 불러오지 못 했을 때 , 이미지를 대신하는 (이미지를 설명하는)텍스트를 출력시켜준다.
-->
<hr>
<h3>width와 height</h3>
<h4>고정 크기 단위 : 화면 사이즈가 바뀌더라도 크기가 변하지 않는다.</h4>
<img src="sample/image/flower1.PNG" width="200px" height="150px">
<img src="sample/image/flower2.PNG" width="200px" height="150px">
<img src="sample/image/flower3.PNG" width="200px" height="150px">
<img src="sample/image/flower4.PNG" width="200px" height="150px">
<img src="sample/image/flower5.PNG" width="200px" height="150px">
<h4>가변 크기 단위 : 화면 사이즈 혹은 기준이 되는 사이즈에 따라 크기가 변경된다.</h4>
<img src="sample/image/flower1.PNG" width="15%" height="150px">
<img src="sample/image/flower2.PNG" width="15%" height="150px">
<img src="sample/image/flower3.PNG" width="15%" height="150px">
<img src="sample/image/flower4.PNG" width="15%" height="150px">
<img src="sample/image/flower5.PNG" width="15%" height="150px">
</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>
<h3>오디오</h3>
<audio src="sample/audio/major.mp3" controls="controls" loop></audio>
<h3>비디오</h3>
<video src="sample/video/video1.mp4" controls="controls"></video>
</body>
</html>
| 태그 | 기능 |
| form | 사용자로부터 입력 받을 수 있는 html 입력 폼을 정의 |
| fieldset | form 요소에서 연관된 요소들을 하나의 그룹으로 묶어준다 |
| legend | fieldset 요소의 설명을 정의 |
| label | 사용자 인터페이스 요소의 라벨을 정의 label의 fot 속성을 사용하여 다른 요소와 결합할 수 있다 이때 label 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다. |
| input | 사용자로부터 입력을 받을 수 있는 입력 필드를 정의 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<h1>폼 관련 태그</h1>
<p>
form 태그는 html 에서 사용자가 입력할 수 있는 양식을 제공하는 태그이다.
<br>
form 태그 내의 input 태그들을 통해 사용자가 입력한 정보를 서버로 넘기는 역할을 한다.
</p>
<form>
<label>검색할 내용 </label>
<input type="text" size="20">
<input type="submit" value="검색">
</form>
<hr>
<form>
<fieldset>
<legend>필드셋의 제목을 작성</legend>
<label>입력 1 : </label> <input type="text"> <br>
<label>입력 2 : </label> <input type="text"> <br>
<label>입력 3 : </label> <input type="text"> <br>
</fieldset>
<fieldset>
<legend>필드셋으로 묶은 영열별로 구분</legend>
<label>입력 1 : </label> <input type="text"> <br>
<label>입력 2 : </label> <input type="text"> <br>
<label>입력 3 : </label> <input type="text"> <br>
</fieldset>
<fieldset>
<legend>필드셋의 제목을 작성2</legend>
<label>입력 1 : </label> <input type="text"> <br>
<label>입력 2 : </label> <input type="text"> <br>
<label>입력 3 : </label> <input type="text"> <br>
</fieldset>
</form>
<hr>
<form>
<h2>텍스트와 관련된 input 태그</h2>
<p>한 줄까지 텍스트를 입력할 수 있는 텍스트 상자</p>
<label>아이디 : </label> <input type="text" name="userid" placeholder="아이디를 입력하세요" maxlength="15" value="khacademy"> <br>
<!--
name : 입력 받은 값의 name안에 입력한게 대충 변수 선언한거라고 생각
placeholder : 텍스트를 입력하는 곳에 아이디를 입력하세요라고 떠있는다 , hint 느낌
maxlength : 입력할 수 있는 글자의 최대 길이
value : 텍스트 필드안에 입력되는 값!
-->
<p>비밀번호를 입력할 수 있는 텍스트 상자</p>
<label>비밀번호 : </label> <input type="password" size="20" maxlength="15" placeholder="비밀번호를 입력하세요"> <br>
<p>텍스트 필드와 비슷하지만 각각의 정보에 맞게 분화된 기능을 제공하는 텍스트 상자들</p>
홈페이지 : <input type="url" name="homepage" value="https://"><br>
이메일 : <input type="email" name="email" placeholder="이메일을 입력하세요."><br>
search : <input type="search"><br>
tel : <input type="tel"><br>
<br><br>
<input type="submit" value="전송"> <input type="reset" value="취소">
</form>
<input type="text">
</body>
</html>'기록 > 자바_국비' 카테고리의 다른 글
| [배운내용정리] 0113 자바 국비교육 _ HTML_CSS (0) | 2021.01.13 |
|---|---|
| [배운내용정리] 0112 자바 국비교육 _ HTML (0) | 2021.01.13 |
| [배운내용정리] 0108 자바 국비교육 _ HTML (0) | 2021.01.10 |
| [배운내용정리] 0107 자바 국비교육 _ Oracle + JDBC (0) | 2021.01.10 |
| [배운내용정리] 0106 자바 국비교육 _ Oracle + JDBC (0) | 2021.01.10 |
