<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5 문자관련 태그</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<h1>html5 문자관련 태그 </h1>
<h2>제목관련 태그 </h2>
<p>컨텐츠 내용에 따라 적절한 제목을 지정하도록 작성 </p>
<p>대제목, 중제목, 소제목 들으로 나타낼 수 있음 </p>
<p>h1 ~ h6 태그를 이용해서 제목을 표시함 </p>
<p>마크다운에서는 #의 개수로 제목을 나타냄 </p>
<p>검색엔진 최적화seo시 주로 사용하는 중요 요소 </p>
<hr>
<h1>대제목</h1>
<h2>대제목</h2>
<h3>중제목</h3>
<h4>중제목</h4>
<h5>소제목</h5>
<h6>줄바꿈</h6>
<h6>줄바꿈</h6>
<hstarlightal수평선과 같이 어렵다</h6>
<pre>사용시 고정폭 글꼴로 기존글꼴보다 약간 작게 표시됨
pre>public static woid main (string[], args) {System.out.println("hello, world")}</pre>
<h2>텍스트 꾸밈 태그</h2>
<p> </p>
<b>시간은 금이라고 친구!</b> <!-- bold태그 -->
<p><strong>시간은 금이라고 친구!</strong></p> <!-- 글자를 진하게 표시, 강조의 의미 검색에 사용-->
<p><i>시간은 금이라고 친구!</i></p> <!-- italic 기울임 글자 표시-->
<p><em>시간은 금이라고 친구!</em></p> <!-- emphasize 기울임 글자 표시, 강조의 의미-->
<p>a<sup>2</sup> +<sup>2</sup> = c<sup>2</sup></p> <!-- sup superscript 위첨자 표시-->
<p>산소 : 0<sub>2</sub>, 물:H<sub>2</sub>O</p>
<p><ins>a<sup>2</sup> +<sup>2</sup> = c<sup>2</sup></ins>는 산소를 의미하는 화학식이다.</p> <!-- ins : insert 밑줄 빈칸에 무언가를 채운듯한 효과 -->
<p>이 벽화가 그려진 시기는 <del>청동기</del> 신석기이다 </p> <!-- del 문서에 삭제된 요소임을 표시 -->
<p><mark>시간은 금이라고 친구!</mark></p> <!-- mark 형광색으로 텍스트를 빛나게 표시 -->
<p>윈도우를 종료하려면 <kbd>alt</kbd> + <kbd>f4</kbd> 를 누르면 됩니다 </p> <!-- keyboard 키보드 입력을 나타냄, css를 이용하면 색다르게 나타낼수 있음 -->
<h2>문단 태그</h2>
<p>문단을 정의하려면 p태그를 사용</p>
<p>브라우저는 자동으로 문단 위아래 약간의 여백 margin을 추가함</p>
<p> 아줄 시스템즈 코리아는 자바</p>
<p> 여백 줄바꿈이 포함된 텍스트broweser 를 사용하는 태그</p>
<h2>entity reference</h2>
<p>hrml에는 미리 예약된 문자가 몇개 있음 </p>
<p>이러한 문자를 html로 다르케 서식하면 이전것을 다르게 해석가능 </p>
<p>따라서 html 예약어를 기존에 사용하던 의미대로 사용하기 위해 별도로 만든 문자셋entity을 이용해야함 </p>
<p> 10 > ×, ÷9 </p>
<p>엔티티 참조는 & 과 ; 사이에 엔티티이름 또는 ♯ 엔티티 번호를 작성해서 사용</p>
<p>빈칸은 [ ] 으로 작성할 수 있음</p>
<p>copyright © 2022. apple<sup>®</sup></p>
<p>"hello, world!!"</p>
<p>"hello, world!!"</p>
<h2>pre 인용</h2>
<p>짧은 인용구는 q태그를 <q>사용하고</q> 길이가 긴 인용구는 <blockquote>blockquote태그를 사용</blockquote> </p>
<h2>축약형 abbreviation</h2>
<p>용어의 축약형을 표현하기 위해서는 addr 태그 사용</p>
<p><abbr>HTML</abbr>은 웹문서를 제작하는데 사용하는 마크업 언어</p>
<p><abbr title = hyper></abbr>> </p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>html5 링크관련 태그</title>
</head>
<body>
<a id="top"></a>
<h1> 링크 태그</h1>
<h2>개요</h2>
<p> 현재 페이지에서 다른 페이지나 다른 사이트로 연결되도록 만드는 요소를 의미</p>
<p> 이러한 요소를 하이퍼링크라 하며 간단히 링크라고도 함</p>
<p> html에서는 간단히 a 태그를 이용하여 표현하는데, href속성으로 연결할 페이지나 사이트 지정 </p>
<p> a 태그 사이에는 링크를 설명할 텍스트를 작성</p>
<p> <a href="http://naver.com">네이버로 이동</a> </p>
<p>target이라는 속성을 이용해서 연결할 페이지나 사이트 띄울 방법 지정 가능</p>
<p> <a href="http://naver.com" target="_blank">네이버로 이동</a> </p>
<p>name이라는 속성을 이용해 간단한 책갈피를 만들 수 있음</p>
<p>href 속성에 '♯책갈피'를 지정하면 문서내 지정한 책갈피 위치로 이동 가능 </p>
<p>w3c에서 정한 표준 색상명은 총 16개. 주요 브라우저는 140개 색상명 지원</p>
<div style="background: black"> </div>
<div style="background: white"> </div>
<div style="background: palegreen"> </div>
<div style="background: red"> </div>
<div style="background: gold"> </div>
<hr>
<p>16진수 색상값은 rgb 색상값을 각각 16진수로 변환한 것</p>
<p>각각의 기본색(r, g, b) 색상값은 00~ ff범위를 가짐</p>
<p>표기방법은 rgb()에 3개의 10진수값을 정의함</p>
<p>투명도 적용하려면 rgba()라고 하면 됌</p>
<p>표기방법은 ♯ 다음에 3개의 16진수 값을 정의함</p>
<div style="background: #ff0000"> </div>
<div style="background: #0000ff"> </div>
<div style="background: #008000"> </div>
<div style="background: red"> </div>
<div style="background: rgba(255, 0 , 0, 0.1)"> </div>
<hr>
<p> <a href="http://naver.com" target="_blank">네이버로 이동</a> </p>
<p> <a href="README.md" target="_blank">README.md</a> </p>
<p> <a href="#top">맨위로 이동</a></p>
<hr>
<hr>
<p> 색상을 지정할때 사용할 수 있는 속성은 color, background가 있음</p>
<p> 글자 색상은 color, 배경은 background로 사용</p>
<div style="background: red; color:white" >hello world!!</div>
<p>16진수 색상이나 rgb 색상코드는 대부분의 브라우저에서 지원</p>
<p>html5에서는 색상, 채도, 명도로 색상 나타내는 hsl, hsla, 색상 코드도 지원함</p>
<hr>
<p>16진수 색상 vs rgb 생상 vs hsl 색상</p>
<p>그외에도 hwb, cmyk 색상코드로도 색을 나타낼 수 있음 html은 미지원, css4</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>html에서는 목록을 표현하기 위해 순서없는 목록, 순서있는 목록, 정의 목록 등을 사용함</p>
<h2>순서없는 목록 unordered list</h2>
<p>명단의 요소를 기호로 나타내는 목록 형태</p>
<p>ul와 li 태그를 이용해서 목록을 표현</p>
<p>이러한 형태의 목록에 사용하는 기호는 검정 원, 검정 사각형등을 사용할 수 있음</p>
<p>내가 좋아하는 게임들 best5</p>
<ul style="list-style-type: circle">
<li>디아블로 </li>
<li>스타크래프트 </li>
<li>월드오브워크래프트 </li>
<li>오버워치 </li>
<li>콜오브 듀티 </li>
</ul>
<p>중첩을 사용한 순서없는 목록</p>
<ul>
<li>블리자드</li>
<ul>
<li>디아블로</li>
<li>스타크래프트</li>
<li>월오</li>
<ul>
<li>richking</li>
<li>burnning kingdom</li>
</ul>
</ul>
<li>마이크로소프트</li>
<li>너티독</li>
</ul>
<h2>순서있는 목록 ordered list</h2>
<p>명단의 요소를 순서가 있는 기호로 나타내는 목록 형태</p>
<p>ol와 li태그를 이용해서 목록을 표현</p>
<p>이러한 형태의 목록에 사용하는 기호는 숫자, 알파벳, 한글등을 사용할 수 있음</p>
<ol style="list-style-type: lower-alpha">
<li>블리자드</li>
<ol style="list-style-type: upper-alpha">
<li>디아블로</li>
<li>스타크래프트</li>
<li>월오</li>
<ol>
<li>richking</li>
<li>burnning kingdom</li>
</ol>
</ol>
<li>마이크로소프트</li>
<li>너티독</li>
</ol>
<h2>네비게이션 구조 작성시 목록 사용</h2>
<nav>
<ul>
<li>메일</li>
<li>카페</li>
<li>블로그</li>
<li>지식in</li>
<li>쇼핑</li>
<li>pay</li>
<li>tv</li>
</ul>
</nav>
<h2>정의 목록 definition list</h2>
<p>용어와 그 용어에 대한 해설(정의)를 모아놓은 목록</p>
<p>dl 태그로 목록 시작을, dt 태그로 용어의 이름을,
dd태그로 해당용어에 대한 해설을 작성함</p>
<p>웹 표준 관련용어</p>
<dl>
<dt>HTML</dt>
<dd>웹 사이트를 구성하는 웹문서작성에 사용하는 마크업 언어</dd>
<dt>CSS</dt>
<dd>html로 작성된 문서를 시각적으로 꾸밀때 사용하는 코드</dd>
<dt>Javascript</dt>
<dd>html에 사용가능한 객체 기반 스크립트 프로그래밍 언어</dd>
</dl>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>html5 테이블관련 태그</title>
<style>
table {border:1px solid black;
width : 650px; border-collapse:collapse}
table:nth-child(18) {width:300px}
th, td {border:1px solid black;padding:10px}
td {text-align: center}
tr {height :45px}
tr:nth-child(even) {background:aliceblue}
tr:nth-child(odd) {background:aquamarine}
tr:first-child {background:beige}
#kdigital {width:900px}
#kdigital th, #kdigital td {width:150px; height:45px}
#inner_table {width:900px; border:1px black}
#inner_table th, #inner_table td {width:14.28%; height:30px}
</style>
</head>
<body>
<h1>테이블관련 태그 </h1>
<h2>개요 </h2>
<p>여러종류의 데이터를 일목 요연하게 2차원 형태의 표로 나타내기 위해 사용 </p>
<p>table 태그로 테이블 시작을, tr 태그로 테이블의 행을,
th 태그는 테이블의 제목열을,
td 태그는 테이블의 본문열을 나타낼때 사용</p>
<p>html에서 테이블의 열을 cell이라고 부름</p>
<p>테이블의 디자인과 관련된 속성은 width, height, cell-padding, collapse 등이 있음</p>
<p>학생 테이블</p>
<table>
<tr>
<th>학번</th><th>이름</th><th>주소</th>
<th>생년월일</th><th>학과</th><th>교수</th>
</tr>
<tr><td>201350050</td><td>김태희</td><td>경기도 고양시</td>
<td>1985.3.22</td><td>컴퓨터</td><td>504</td></tr>
<tr><td>201350050</td><td>김태희</td><td>경기도 고양시</td>
<td>1985.3.22</td><td>컴퓨터</td><td>504</td></tr>
<tr><td>201350050</td><td>김태희</td><td>경기도 고양시</td>
<td>1985.3.22</td><td>컴퓨터</td><td>504</td></tr>
<tr><td>201350050</td><td>김태희</td><td>경기도 고양시</td>
<td>1985.3.22</td><td>컴퓨터</td><td>504</td></tr>
<tr><td>201350050</td><td>김태희</td><td>경기도 고양시</td>
<td>1985.3.22</td><td>컴퓨터</td><td>504</td></tr>
<tr><td>201350050</td><td>김태희</td><td>경기도 고양시</td>
<td>1985.3.22</td><td>컴퓨터</td><td>504</td></tr>
<tr><td>201350050</td><td>김태희</td><td>경기도 고양시</td>
<td>1985.3.22</td><td>컴퓨터</td><td>504</td></tr>
</table>
<h2> 복잡한 테이블의 행/열 합치기</h2>
<p>복잡한 형태의 테이블을 작성해야 하려면 colspan / rowspan 속성을 이용</p>
<p>colspan 속성을 여러 열을 합쳐 하나의 열로 만드는 것이고
rowspan 속성을 여러 행을 합쳐 하나의 행으로 만듬</p>
<p>테이블도 중첩시켜 표안에 표를 포함시켜 만들수있음</p>
<h2>테이블의 너비 지정</h2>
<p>너비를 픽셀 px로 지정시 테이블의 크기는 고정크기로 설정
-> 브라우저의 크기에 상관없이 언제나 테이블의 크기는 변화없음</p>
<p>너비를 비율 %로 지정시 테이블의 크기는 가변크기로 설정
-> 브라우저의 크기에 따라 테이블의 크기 변화 </p>
<p>k디지털 : ai 서비스를 위한 프로그래밍 기본</p>
<table id="kdigital">
<tr><td>훈련과정</td><td colspan="2">빅데이터분석&rpa</td>
<th>훈련기간</th><td colspan="2">2022</td></tr>
<tr><td>평가일시</td><td>2022</td>
<td>훈련생</td><td style="text-align:right">(인)</td>
<th>훈련교사</th><td>홍길동</td></tr>
<tr><td colspan="6" style="padding: 0">
<table id ="inner_table">
<tr><th colspan="2" style="width:28%">교과목명</th><th>평가방법</th>
<th>배점</th><th>점수</th><th>총점</th>
<th>성취수준</th></tr>
<tr><th colspan="2" rowspan="2">데이터베이스</th>
<td>서술형/선택형</td>
<td>30</td><td> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td></tr>
<tr><th>포트폴리오</th>
<td>70</td><td> </td></tr>
</table>
</td></tr>
<tr>
<th>성취수준 환산</th><th>매우우수</th><th>매우우수</th>
<th>매우우수</th><th>매우우수</th><th>매우우수</th>
</tr>
<tr>
<th>성취기준</th><th>성취기준</th><th>성취기준</th>
<th>성취기준</th><th>성취기준</th><th>성취기준</th>
</tr>
</table>
</body>
</html>
