이 글은 작성자의 개인 공부를 위해 작성한 글입니다.
| TAG | 용도 |
| <strog> | 글씨체 진하게 |
| <u> | 밑줄 |
| <h1> ~ <h6> | 제목 표시, 숫자가 커질 수록 제목의 크기가 작아진다. |
| <br> | 줄바꿈의 용도, 그 용도만을 가지고 있어 닫지</> 않는다. |
| <p> | 단락을 나타냄 |
| <img> | 이미지 넣기, src="이미지이름" 사이즈 조절시 width="변경할 사이즈" 둘의 순서는 상관 없다. |
| <li> | 목차 |
| <ul> | 목차 구분을 위한 <li>의 부모 태그 |
| <ol> | 목차에 숫자를 자동적으로 지정 |
| <title> | 본문(웹페이지)의 제목을 명시, 검색엔진에 사용 |
| <meta> | 문서 자체에 대한 정보 제공 |
| <body> | 웹 페이지의 본문을 정의, 본문은 <body>로 묶어야 한다 |
| <head> | 문서의 메타데이터를 정의, <body>위에 사용 |
| <html> | HTML 문서의 시작과 끝을 정의 |
| <a> | 링크 걸기, <a href="링크"> 새탭으로 열기 - target="_blank" 사용 툴팁이 뜨게 하기 - title="html5 speicification" 사용 |
기본적인 웹사이트 뼈대
<html>
<head>
</head>
<body>
</body>
</html>
기본 태그를 이용한 간단한 예제
<!DOCTYPE html>
<html>
<head>
<title>WEB-welshcoding</title>
<meta charset="utf-8">
</head>
<body>
<h1><a herf="index.html">웰시코딩</a></h1>
<ul>
<li><a href="1.html">웰시코딩목차</a></li>
<li><a href="2.html">웰시코딩목차2</a></li>
<li><a href="3.html">웰시코딩목차3</a></li>
</ul>
<h2>웰시코딩목차</h2>
<img src="coding.jpg" width="20%">
<p></p>안녕하세요 웰시코딩입니다
<p></p>웰시코딩의 <a href="https://welshcoding.tistory.com/"
target="_blank" title="html5 speicification">
티스토리 링크</a>입니다
<p></p>기초 TAG 종류를 공부해 봅시다
<p></p><strong>글씨를 진하게 만들어볼게요</strong>
<p></p>중요한 곳에는 <u>밑줄</u>을 쳐줍시다
</body>
</html>
완성본