1. HTML의 정의
- HTML(Hypertext Markup Language)란, 웹 페이지에 대하여 제목, 단락과 같은 구조적인 요소를 기술할 수 있는 마크업(Markup) 언어로써, 오늘날 웹 페이지를 구성을 이루는 중요한 언어 중 하나이다. 주요 문법으로 태그(Tag) 명령어를 이용하여 웹페이지의 전반적인 문서 구조를 기술할 수 있다.
- 메모장(Notepad), 한글, 워드 등 문서 작업이 가능한 환경에선 모두 해당 언어로 웹 페이지를 작성할 수 있다.
- 태그(Tag)를 이용하여 웹 페이지의 전반적인 구조를 기술하는 언어로써, 프로그래밍 언어는 아니다.
- 여기서 태그(Tag)란, 웹 페이지가 어떻게 구성되어 있는지에 대한 정보를 나타내는 요소이다.
2. 태그(Tag)의 기본 형식과 속성(Attribute) 태그의 요소(Element)
(1) 태그의 기본 형식
<태그 이름>문서의 내용</태그 이름>
여기서 <태그 이름>은 열린 태그이며 태그의 시작 지점이다.
</태그 이름>의 경우 닫힌 태그이며 태그가 종료되는 지점이다.
- 위와 같이 열린 태그, 닫힌 태그도 태그의 요소에 포함된다.
- 아래에서부터 태그의 다양한 요소를 소개한다.
(2) 빈 태그(Empty Tag)
- 빈 태그의 경우 닫는 태그 없이 단독으로 사용하는 태그이며 대표적으로는 img 태그가 있다.
<img src="img/img001.png">
(3) HTML의 값(Value)
- 값의 경우 태그의 명령을 직접적으로 받게 되는 데이터를 의미한다.
- 아래에서 보게 될 strong 태그의 직접적인 영향을 부분을 값(Value)이라고 한다. 아래 예시를 참고하자.
- 값은 대부분 열린 태그, 닫힌 태그 사이에 존재하며 빈 태그의 경우 값 없이 사용된다.
<strong>폰트에 굵기를 주는 strong 태그입니다.</strong> <!-- 값 : 폰트에 굵기를 주는 strong 태그입니다.-->
(4) HTML의 속성(Attribute)
- HTML에서의 속성이란 태그를 보조하는 명령어를 의미하며 태그 문법이 다루지 못하는 명령들에 대하여 추가적으로 보조하는 역할을 진행한다. 위에서 예시를 든 img 태그도 속성을 이용한 것이다.
- 속성의 경우 다시 속성명(Attribute name), 속성값(Attribute value)로 나뉜다.
- CSS(Cascading Style Sheets)에서 텍스트의 색상, 크기, 배경색 등의 효과를 줄 때도 속성을 이용한다.
(5) 열린 태그에 사용된 속성
<p style="color:red; font-size:20px;">텍스트1</p>- 속성명(Attribute name) : style
- 속성값(Attribute value) : "color:red;", "font-size:20px;"
- 속성을 여러 개 설정할 경우 ;(세미콜론)과 띄어쓰기로 각각의 속성을 구분한다.
(6) 빈 태그에 사용된 속성 - 대표적인 예) img 태그
<img src="img/img001.png">- 속성명(Attribute name) : src
- 속성값(Attribute value) : "img/img001.png"
3. 제목 글자 태그
- 제목 태그는 웹 페이지에서 가장 많은 비중을 차지하는 태그이다.
(1) h1 ~ h6 태그
- h1이 가장 큰 폰트 크기를 나타내며 h6으로 갈수록 폰트의 크기는 작아진다.
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
4. 본문 글자 태그
(1) p 태그 : 본문의 텍스트를 입력할 때 사용하는 태그
<p>
글씨를 쓸 때 사용하는 태그
</p>
(2) br 태그 : 텍스트를 기준으로 줄 바꿈을 할 때 사용하는 태그
- 닫힌 태그 </br> 없이 중복 사용하여 원하는 만큼 줄 바꿈을 사용할 수 있다.
<p>
글씨를 쓸 때 사용하는 태그<br>
br 태그를 이용하면 줄 바꿈이 진행됩니다.<br><br>
위와 같이 중복하여 사용할 수 있습니다.
</p>
(3) hr 태그 : 수평 줄을 생성할 수 있는 태그
<p>
첫 번째 줄의 내용이 작성되었습니다.
<hr>
두 번째 줄의 내용입니다.
</p>
5. 그 외 여러 가지 텍스트 태그
(1) b, strong 태그
<p>
<b>텍스트를 굵게 나타낼 수 있습니다.</b><br>
<strong>strong 태그도 마찬가지 효과입니다.</strong>
</p>
(2) ins 태그
<p>
<ins>해당 태그를 이용하면 텍스트에 밑줄이 그어집니다.</ins>
</p>
6. a 태그
- 해당 태그의 경우 현재 웹 페이지에서 서로 다른 웹 페이지 또는 현재 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그이다.
<a href="https://www.naver.com">naver 링크로 이동</a><br>
<a href="https://www.google.com">google 링크로 이동</a>속성명은 href, 속성값 "https://www.naver.com"와 같은 URL 주소가 삽입된다.
7. 목록을 생성하는 태그
- 목록 태그의 경우 목록을 생성할 때 사용되는 태그이다.
- 웹 페이지의 네비게이션 메뉴를 생성할 때 주로 사용된다.
(1) 순서가 존재하는 ol - li 태그
- ol(Ordered list), li(list)의 약자이다.
- ol 태그의 경우 순서가 존재하여 리스트에 대한 숫자를 매길 수 있다.
<ol>
<li>Facebook</li>
<li>Instagram</li>
<li>Linked in</li>
</ol>
(2) 순서가 존재하지 않는 ul - li 태그
- ul(Unordered list)의 약자이다.
- ul 태그의 경우 순서가 존재하지 않아 숫자가 표시되지 않는다.
<ul>
<li>Facebook</li>
<li>Tweeter</li>
<li>Linked in</li>
<ul>
8. 테이블 태그
- 테이블 태그는 표를 생성할 때 사용되는 태그이다.
- 표를 생성할 때는 table 태그를 먼저 선언한 후 이후에 다음과 같은 태그를 사용한다.
(1) tr 태그 : 표 내부의 행 태그
(2) th 태그 : 행 내부의 제목 셀 테그
(3) td 태그 : 행 내부의 일반 셀 태그
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
9. 이미지 태그
- 이미지를 생성하고 싶을 때 사용하는 태그이다.
- img 태그를 쓰며, 아래와 같은 속성을 갖는다.
(1) src : 이미지 파일의 경로 저장
(2) alt : 이미지가 존재하지 않을 때 출력되는 텍스트 지정
(3) width : 이미지의 너비 지정
(4) height : 이미지의 높이 지정
<body>
<img src="img/img001.png" alt="사진이 존재하지 않습니다." width="300"><br>
<img src="img/img002.png" alt="사진이 존재하지 않습니다." height="300">
</body>
입력 양식 태그, select 태그, 공간 분할 태그, 블록과 인라인, 시맨틱 태그에 대해선
다음 포스팅에서 정리하도록 하겠습니다.
==============================================================================
개인적으로 공부하며 정리한 내용을 바탕으로 작성되었기에 틀린 부분이 있을 수 있습니다.
오타나 틀린 내용 발견 시 지적해 주시면 감사하겠습니다.
'프론트엔드(Front-End) > HTML(Hypertext Markup Language)' 카테고리의 다른 글
| [HTML] - 제목과 문단을 담당하는 태그(h, br, hr,  ) (0) | 2022.12.22 |
|---|---|
| [HTML] HTML의 여러 가지 태그 (2), 부모 요소(Parents element)와 자식 요소(Child element) (0) | 2022.07.13 |
댓글