head 태그
<!-- head 태그 -->
<head>
<!-- 주석 단축키 ctrl + / -->
<title>문서 제목</title> <!-- 문서의 제목을 정함. 탭에 '문서 제목'글자 나옴 -->
<meta name="keywrods" content="html example"> <!-- name에 keywords:주제 를 정할 수 있음-->
<meta http-equiv="refresh" content="3;http://www.google.com" > <!-- http-equiv="refresh"를 이용하면 홈페에지의 갱신주기를 설정 할 수 있음. content="초;이동할 홈페이지" 3초후에 자동으로 구글 페이지 열림-->
<meta charset="utf-8"> <!-- 문서의 문자셋을 지정함. 최근 utf-8이 가장 많이 쓰이지만euc-kr도 쓸 수 있음. 현재 쓰고 있는 컴파일러(visual studio code)가 euc-kr인데 홈페이지 메타를 utf-8로 지정하면 글자가 깨져서 출력됨-->
</head>body 태그
<!-- body 태그 -->
<body
bgcolor=pink <!-- 웹페이지 전체 백그라운드 색상지정 -->
link = rgb{1,1,1}; <!-- 링크를 누르기 전 색상 지정 -->
alink = red <!-- 링크 방문 후 색상 지정 -->
vlink = blue <!-- 링크 한번 방문 후 색상 지정 -->
leftmargin = 0 <!-- 왼쪽 여백. 픽셀 단위임. -->
topmargin = 0 <!-- 위쪽 여백 -->
marginwidth=50 <!-- 좌우 영역. 내용의 넓이 -->
marginheight=50 <!-- 위아래 영역. 내용의 높이 -->
background="../note/HYU_logo.png" <!-- 배경 이미지 지정, ../ -> 상위 폴더, ./ -> 현재 폴더에 있는 이미지 -->문단 관련 태그
<!-- 문단 관련 태그-->
<br> <!-- 줄바꿈 -->
<p>aa bb </p> <!-- 문단 만든 후 줄바꿈 -->
<p align=left>abc </p> <!-- 왼쪽 정렬 -->
<p align=right>abc </p> <!-- 오른쪽 정렬 -->
<p align=center>abc </p> <!-- 가운데 정렬 -->
<h1>h1 </h1> <!-- 글자 크기 지정. 가장 큰 h1 부터 가장 작은 h6까지. -->
<pre>
ewrwrelknlkn
lwlefnlwenkrl
erlkenrlwn l
</pre> <!-- 입력된 모습 그대로 출력 -->글자 관련
<!--글자 관련 태그-->
<font color=#790604 size=30> <!-- 글자색상 및 크기 적용. 기준이 됨 -->
test1
<big>기준보다 2 커짐 </big>
<small>기준보다 2 작아짐 </small>
<em>이텔릭체, 기울임 </em>
<strong>굵게 </strong>
<center>가운데정렬 </center>
<u>밑줄</u>이미지 삽입, 하이퍼링크, 수평선
<!--수평선-->
<hr width=500 size=5 align=center color=red noshade> <!-- 폭, 두께, 정렬(left, right, center), 색상, 입체감 제거 -->
<!-- 이미지 삽입 -->
<img src="../note/HYU_logo.png" align=top width=100 height=100 border=2 hspace=10 vspace=10/> <!-- src에 링크되어 있는 그림을 가져오고, align에서 top,middle,bottom일 경우 문자열이 각각 위,중앙,아래 기준으로 정렬, left, right일 경우 왼쪽,오른쪽으로 정렬, 폭 100 높이 200에 왼쪽으로부터 10픽셀, 위로부터 10픽셀 떨어진 곳에서 시작-->
<!-- 하이퍼링크 삽입 -->
<a href=”http://www.daum.net” target=”_blank” title=”한양대학교”>hanyang </a> <!-- _blank: 새창을 띄움, _self: 현재창에 나타남, _top: 최상위 페이지에서 열림, _parent: 바로 이전 페이지에서 열림 -->table 태그
<!-- 테이블 속성 -->
<table width=100 height=100 bordercoloer=red border=1 bgcolor=red background="../note/HYU_logo.png" cellpadding=3 cellspacing=5>
<!-- 행 tr -->
<tr height=100 align="center" bgcolor=green background="../note/HYU_logo.png" align=center valign=middle>
<!-- 열 td, 행 속성이랑 똑같음 -->
<td width=100 bgcolor=yellow>내용 </td>
<td width=80>내용 </td>
</tr>
<tr>
<td>wer</td>
<td>tyu</td>
</tr>
</table>
<!-- 테이블 셀 병합 태그, tr에서 안되고 td에서만 됨-->
<table border=1>
<tr bgcolor=red>
<td>ghi1</td><td>mnp1</td><td>def1</td>
</tr>
<tr bgcolor=yellow>
<!-- 행 2개 병합 -->
<td rowspan=2>ghi2</td><td>mnp2</td><td>def2</td>
</tr>
<tr bgcolor=blue>
<!-- 열 2개 병합 -->
<td colspan=2>ghi3</td><td>mnp3</td><td>def3</td>
</tr>
</table>div, span 등
<!-- 문단 단위화 div 태그, 문장 단위화 sapn 태그-->
<head>
<title>example</title>
<style>
.sample{font-size: 20; color: aqua;}
.research{font-size: 30; font-weight: bold; color:black}
</style>
</head>
<body>
<div class= "sample">
<p>2021년 생명공학백서입니다. </p>
<p>정부의 생명공학 분야의 주요 정책 및 연구개발 현황, </p>
<p>국내외 <span class="research">연구동향과 전망 등 우리나라 생명공학</span>전반의 정보를체계적으로 종합 수록하였으니, </p>
<p>많이 활용하여 주시기 바랍니다.</p>
</div>
</body>
나는 여니