안녕하세요.
이번에는 html 기본 구조에 대해서 간략하게 알아보겠습니다.
1. 기본 작성 방법
<html>
<head>
<title> Title </title>
</head>
<body>
</body>
</html>
기본적으로는 이렇게 작성을 합니다.
보통 head 태그에는 script, css 파일 등을 작성할 때 쓰이고
head 태그 안에서 title은 홈페이지 제목을 뜻합니다.
body 태그에는 홈페이지 내용들이 입력되는 칸이라고 보시면 됩니다.
그리고 꼭 <html> 로 시작을 하면 </html> 와 같이 닫아주는 작업이 필요합니다.
모든 태그가 그렇지는 않은데 대부분의 태그는 열어주면 닫아주는 작업까지 필요합니다.
2. HTML 기본 태그
일단 간단하게 정리하면 기본적으로 사용하는 태그는 다음과 같습니다.
<h1> </h1> => 문자(제목) 태그
<br> ⇒ Enter 기능
<img> ⇒ 이미지 태그
<a> </a> ⇒ 링크 태그
<div> </div> => 문단 태그
<p> </p> => 문자 태그
<span> </span> => 문자 태그
<ul> </ul> => 목록 태그
<ol> </ol> => 목록 태그
<li> </li> => 목록 태그
<hr> => 수평선 태그
여기에서 홈페이지 구성 및 사용 방식에 따라서 사용하는 태그가 달라집니다.
3. HTML 태그 요소
3-1. 빈 요소 ( Empty Element )
- 내용 없이 구조적인 기능만 하는 요소
- ex) <br>, <hr>
<html>
<head>
<title> Title </title>
</head>
<body>
<div>안녕하세요
하이1
</div>
<hr>
<div>안녕하세요<br>하이2</div>
</body>
</html>
3-2. 블록 요소 ( Block Element )
- 기본적으로 부모 요소의 전체 너비(100%)를 차지한다.
- 태그가 시작되면 무조건 개행(줄바꿈)이 일어난다.
- 모든 인라인 요소를 포함하거나 다른 블록 요소를 포함한다.
- ex) <h1></<h1>, <div></div>, <p></p>
<html>
<head>
<title> Title </title>
</head>
<body>
<div style="background-color: red;">div 태그</div>
<p style="background-color: yellow">p 태그</p>
</body>
</html>
3-3. 인라인 요소 ( Inline Element )
- 텍스트 혹은 이미지 크기에 맞는 필요한 공간만을 차지하는 요소이다.
- 너비와 높이를 지정할 수 없다.
- 블록 요소 안에 포함되어 있는 것으로, 인라인 요소만 가질 수 있다.
- ex) <a></a>, <span></span>, <strong></strong>
<html>
<head>
<title> Title </title>
</head>
<body>
<span style="background-color: red;">1번 span</span>
<span style="background-color: orange;">2번 span</span>
<strong style="background-color: yellow;">3번 strong</strong>
<a href="#" style="background-color: aqua;">a 링크</a>
</body>
</html>
4. HTML 태그 속성
- 태그를 보조하는 명령어로 태그 안쪽에서 작동
- ex) id, class, style, width, height 등등
- 태그마다 사용할 수 있는 속성이 정해진 경우도 있음
- ex) <a href=”#”> href 의 경우 a 태그만 사용이 가능하다.
5. HTML Class 사용
- Class는 여러 태그에 중복 사용 가능
- 사용 방법 :<div class=’클래스 이름’>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 선택자</title>
</head>
<body>
<h1 class="deco">h1</h1>
<h2 class="red deco">h2</h2>
<h3 class="red">h3</h3>
</body>
</html>
6. HTML ID 사용
- ID는 중복 사용 불가능
- 사용 방법 : <p id=’id 이름’>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 선택자</title>
</head>
<body>
<p id="hrid">p1</p>
<p>p2</p>
<div id="div2"></div>
</body>
</html>
7. 실습코드
7-1. 태그 사용해보기
<html>
<head>
<title> SeSAC </title>
</head>
<body>
<div style="background-color: red; color: white; width: 50%">
안녕
<span style="color: yellow;"> sesac </span>
</div>
<h1>
반가워
</h1>
<span> sesac </span>
<strong>용산</strong>
**SeSAC** <br>
1 <br>
2 <br>
<hr>
3 <br>
4 <br>
5 <br>
6 <br>
</body>
</html>
7-2. 태그 사용해보기 2
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문서 제목(이름)</title>
<meta charset="UTF-8">
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
<img src="../res/img01.png" width="100px" height="100px" title="img01">
<br>
<img src="C:\Users\SBAUser\Desktop\github\SeSAC_1YS_Web\res\img01.png" alt="img01_2">
<!-- 로컬 라이브 서버로 코드 실행시 절대 경로로 입력하면 이미지가 정상적으로 출력이 안됩니다. -->
<br>
<a href="https://www.naver.com" target="_blank">네이버</a>
<br>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol type="I" start="3" reversed>
<li>a</li>
<li>b</li>
</ol>
</body>
</html>
이상으로 HTML에 대하여 간단하게 알아보았습니다.
감사합니다.
'HTML5 & CSS3' 카테고리의 다른 글
| [CSS3] Position에 대해서 알아보기 (0) | 2022.12.03 |
|---|---|
| [CSS3] CSS 적용 우선 순위 (0) | 2022.12.02 |
| [CSS3] CSS 선택자에 대하여 알아보기 (0) | 2022.12.02 |
| [CSS3] CSS3 소개 및 상대경로, 절대경로에 대해 알아보기 (0) | 2022.12.01 |
| [HTML5] Table 태그 알아보기 (0) | 2022.11.30 |