2021.12.08 - [Web/HTML & CSS] - HTML) 2. HTML 기본 용어와 구조
HTML) 2. HTML 기본 용어와 구조
안녕하세요. 이번 포스팅은 다음과 같은 구성으로 진행하려 합니다. ① 웹 용어 정리 ② HTML 용어 기본 ③ HTML 기본 구조 ① 웹 용어 정리 HTML에 들어가기 전 알아두면 좋을 용어들로 정리했습니
okeybox.tistory.com
안녕하세요 성조입니다.
이전 포스팅에 대해서 참조하면 좋을 것 같다는 생각에 링크를 걸어둡니다.
올바르지 못한 지식의 경우 댓글을 통해서 어떤 부분이 어떻게 진행되는 것이 맞는지 얘기해 주시면 정말 감사드리겠습니다!
태그는 요소와 함께 동일선상으로 두고 학습하게 됩니다. 하지만 이전 포스팅 글에서 작성됐을 때 당시 얕고 넓게 가 아닌 깊고 천천히 배워가는 부분이라 생각하고 자료 조사와 학습을 반복하면서 정리한 내용은 다음과 같았습니다.
태그 : HTML의 문서에 포함된 개념입니다.
요소 : HTML의 경우 문서로 구문 분석 과정을 통하여 뼈대의 형태로 웹의 기본 화면을 구성합니다.
개념에 대해서 명확한 구분을 위해서 예를 들면 다음과 같습니다.
[요소]
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
</body>
</html>
|
위와 같이 HTML을 담당하는 모든 태그들의 집합이 되는 부분이 요소가 됩니다.
[태그]
|
1
|
<p> 안녕하세요! </p>
|
위의 태그는 <p>태그라고 합니다.
<p>태그 속한 "안녕하세요!"의 경우 body 태그 사이에 들어가며, <p>태그는 단락을 의미합니다. 본문 화면에서 내용을 표현하기 위해서 사용됩니다.
또한 <p> 태그안에 내용을 작성하여 띄어쓰기를 작성 후 실행했을 때 띄어쓰기가 적용되지는 않습니다.
이런 경우에는<br>태그를 사용하여 줄 바꿈을 진행해 주면 됩니다.
결국 다시 요약하면 다음과 같습니다.
| 요소 === 태그 X 요소 > 태그 O |
태그의 종류와 사용법을 모두 아는 것은 매우 어려움에 있습니다. 하지만 실제로 자주 사용하는 태그의 경우 정해져 있을 정도로 모든 태그를 암기할 필요는 없습니다. 아래의 링크는 HTML에서 가장 많이 사용되는 태그들의 모음이며, 모든 태그를 공부하기보다 자주 사용되는 태그들을 우선적으로 암기한 후 이후에 필요할 때마다 태그의 사용법을 찾아서 학습을 진행하는 것을 추천드립니다.
https://www.advancedwebranking.com/seo/html-study/
HTML Study
Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The
www.advancedwebranking.com
위 사이트에 들어가면 다음과 같은 태그들의 사용 빈도를 확인할 수 있습니다.
<html> 태그의 경우 하나의 문서가 html의 형식으로 선언되어 있는 것을 알려주는 태그입니다.
<head> 태그의 경우 css, script와 같은 정보들을 담아주는 meta 데이터 들의 집합 태그입니다.
<meta> 정보를 담고 있는 태그로 head 태그로 정의가 어려운 부분의 태그를 표기하기 위한 태그입니다.
<link> 태그는 css 같은 파일들을 연결해 줄 때 사용되는 태그입니다.
<script> 태그는 src를 활용해서 다른 폴더 또는 위치에 존재하는 자바스크립트(. js) 파일을 호출하거나 정의할 때 사용됩니다.
<a> html에서 버튼을 클릭했을 때 다른 링크로 넘겨주는 용도로 많이 사용되는 태그이며, css를 입혀서 button 태그와 비슷하게 디자인해서 사용하는 경우도 있습니다.
그 외에 많은 태그들이 존재하는데 모든 태그를 설명하기에는 불필요한 설명도 있을 수 있다 생각됩니다. 모두 다 외우려 하지 않고 자주 사용되는 태그들을 검색하며 학습 후 경우에 따라 필요성이 많이 높아지는 태그의 사용법을 찾아서 학습하는 것을 권합니다.
저 또한 모든 태그들을 암기한 것이 아니며, 태그 공부에서 전체적으로 읽고 확인만 해봤습니다. 현재 Node.js와 sts4의 환경에서 백엔드 학습을 진행하고 있는데 frontend 화면 구성에 필요한 태그는 수많은 태그들 중 자주 사용되는 태그들을 사용하고 있습니다.
너무 빠르게 많은 내용을 정리할 시간도 없이 학습했는데 정리와 복습이 부족하면 금세 잊어버리기 마련이라 생각하며, 토대가 될 수 있는 기초적인 지식들을 다시 정리하고 하는 시간을 갖게 되었습니다. 몇 번이고 공부하고 정리하며, 지난 내용을 잊더라도 다시 또 배우는 과정 속에서 평생을 성장하며 배우면서 살고 싶네요. 나이에 인연 하지 않고 늘 사람과 사람으로 소통하면서 더 많이 배울 수 있으면 좋겠습니다.
감사합니다! 다음 포스팅 때 뵙겠습니다!
'Web Basic > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그(Semantic tag)란? (0) | 2022.12.04 |
|---|---|
| [HTML] 5. 작성 태그와 인용 태그 정리 (2) | 2022.09.23 |
| [HTML] 4. 요소(Elements) 와 속성(Attributes) (0) | 2022.04.13 |
| [HTML] 2. HTML 기본 용어와 구조 (0) | 2021.12.08 |
| [HTML] 1. 발달 개념 (0) | 2020.06.10 |
