IT/따로 공부
[HTML] 기본정리(2)
ziasu
2021. 8. 18. 15:07
반응형
DOCTYPE이란...?
- HTML에는 여러 종류가 존재하기 때문에 DOCTYPE을 선언하여 올바른 출력을 도와줌
- HTML5가 나온 현시점에서는 아래에 보이는 DOCTYPE으로 단일화되었음
<!DOCTYPE html>상대 경로 <a> 태그 활용으로 간단한 웹페이지 만들기
[index.html(main)]
- '몸풀기' 텍스트를 클릭하면 1.html로 이동
<html>
<head>
<title>운동하자</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">운동순서</a></h1>
<ol>
<li><a href="1.html">몸풀기</a></li>
<li><a href="2.html">조깅하기</a></li>
<li><a href="3.html">근력운동하기</a></li>
</ol>
<h2>몸풀기</h2>
몸을 잘 풀어야 부상을 예방할 수 있다
</body>
</html>
[1.html]
- '운동순서' 텍스트를 클릭하면 index.html로 이동
<html>
<head>
<title>운동하자</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">운동순서</a></h1>
<ol>
<li><a href="1.html">몸풀기</a></li>
<li><a href="2.html">조깅하기</a></li>
<li><a href="3.html">근력운동하기</a></li>
</ol>
<h2>몸풀기</h2>
몸을 잘 풀어야 부상을 예방할 수 있다
</body>
</html>주요 태그
[<pr> 태그]
- paragraph의 줄임말로 단락을 표현
[<br> 태그]
- a forced line break의 줄임말로 줄 바꿈 기능(직접 줄 바꿈)
[<img> 태그]
- 문서에 이미지를 포함
- <img src="①" height="②" width="③" alt="④" title="⑤">
①: 같은 디렉터리의 이미지 파일 이름
②: 이미지 높이
③: 이미지 너비
④: 이미지가 깨졌을 때 보이는 정보
⑤: 이미지 위에 커서를 올려놨을 때 보여지는 정보
[<table> 태그]
- 표를 만드는 태그로 여러 다른 태그들과 함께 사용됨
<html>
<body>
<table border='2'>
<trhead>
<tr>
<th>이름</th> <th>가격</th>
</tr>
</trhead>
<trbody>
<tr>
<td>수박</td> <td>5000</td>
</tr>
</trbody>
</table>
</body>
</html>
반응형