HTML : HyperText Markup Language
1. 이름 의미
-HyperText :텍스트에 생명을 불어넣는 것(다른 페이지로 가는 링크를 넣거나, 현재 텍스트가 문단인지 제목인지 등 의미적인 내용을 부여함)
*Text는 순차적으로 정보를 읽어들이나, HyperText는 정보에 대한 순차적인 접근을 뛰어넘는 것이다.
-Markup : "태그를 통해" 텍스트에 생명을 불어넣는다.
-Language : 컴퓨터와의 의사소통 언어
2. HTML 요소
<p> 안녕하세요. </p>
위 코드처럼 여는 태그, 내용, 닫는 태그로 이루어진 부분을 '요소'라고 한다.
3. HTML 속성
<p class = "hello"> 안녕하세요 </p>
여는 태그 부분에 추가된 class="hello" 부분을 '속성'이라고 한다. 속성은 아무것도 적지 않아도 되고, 여러가지를 추가해도 된다. 속성은 다양한 종류와 역할이 있으며 그 형식은 [속성이름="속성값"]이다. 속성을 여러개 추가할 경우 각 형식마다 서로 붙지 않도록 띄어쓰기를 해주어야 한다.
4. HTML 주석
<!-- <p> 안녕하세요. </p> -->
작성은 되어있는 코드를 브라우저에 뜨지 않도록 무시하는 방법이다. 주석은 위와 같이 꺽쇠와 하이픈을 사용하고 여는 태그에는 느낌표를 추가한다. 보통 수기로 주석을 치는 것은 번거롭기 때문에 단축키를 많이 사용한다.
- 주석 지정 Ctrl + /(맥은 커맨드 + /)
- 주석 해제 Ctrl + /(맥은 커맨드 + /)
※ 브라우저 화면에 뜨지 않는다고 주석을 남용해서는 안된다.
웹 사이트를 띄우려면, 브라우저에서 웹 서버에 HTML을 받아와야 하는데, 이때 주석을 포함한 모든 *.html 파일을 가져온다. 그러므로 주석에 개인정보나 진행 중인 프로젝트의 대외비를 적게 되면 브라우저를 통해 노출이 되므로 조심해야 한다. 개발 중에는 자유롭게 주석을 달아도 괜찮지만, 최종적으로 배포할 때는 사용한 태그가 어떤 의미인지 정도만 적어두는 것이 좋다. 불필요한 정보는 주석으로 남기지 않은 것이 좋다.
5. HTML 문서구조
HTML도 문서이기 때문에 일정한 구조를 가지고 있다.
* Boilerplate : 프로그래밍에서 일정한 규칙을 가지고 있는 것. 반복적인 구성.
<!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>Document</title>
</head>
<body>
</body>
</html>이것이 HTML의 Boilerplate이다. Boilerplate는 직접 타자치는 것보다 단축키를 사용하여 작성한다. Boilerplate는 크게 두 부분으로 나뉜다.
(1) <head> 태그 내부
내부적인 메타 데이터(설정 정보)나 브라우저에 전달해야 하는 정보들.
(2)<body> 태그 내부
브라우저에 실제로 보여지는 내용을 담은 부분.
+) <!DOCTYPE html> 부분은 html 문서임을 선언하는 부분이다.
<html> 태그의 속성 lang="en"은 html 문서가 어떤 언어로 사용되어 작성되었는 지를 나타내는 부분이다. 기본 언어는 영어로 설정되어 있으나, 본인이 만든 웹 페이지가 한국어 위주라면 lang= "ko"로 바꾸어주는 것이 좋다. 검색 엔진이나 서버가 본 웹 페이지를 어떤 언어로 해석해야 하는지에 대한 기준이 되기 때문이다.
*참고자료
https://techit.education/
https://dasima.xyz/html-comments/
HTML 주석 처리 예제 및 디버깅과 단축키 - dasima
HTML 주석 처리는 한줄과 여러줄 동일하게 부등호, 느낌표, 하이픈 기호 조합으로 구성됩니다. 주석으로 디버깅 효과를 흉내낼 수도 있습니다. atom, visual studio, codpen 등에서 주석 단축키도 존재합
dasima.xyz
https://brunch.co.kr/@coveryou/14
html 이란? 속 시원한 HTML 뜻 풀이
HTML의 의미를 명확하게 알아보자 | HTML : Hyper Text Markup Language 하이퍼 텍스트 마크업 랭귀지 html이란 무엇인가? html 뜻 html 개념 여러분들은 HTML에 대해 잘 이해하고 계신가요? 요즘 HTML은 웹개발자
brunch.co.kr
'개발자 김모립 > Web' 카테고리의 다른 글
| [HTML(5)] <body> 태그 *비공개 중 (0) | 2023.03.30 |
|---|---|
| [HTML(4)] 블록 요소 vs 인라인 요소(재확인(비유) 필요) (0) | 2023.03.30 |
| [HTML(3)] <head> 태그 : HTML 문서에 대한 설정 정보(재확인 필요) (0) | 2023.03.30 |
| Chrome 개발자 도구 사용 방법 (0) | 2023.03.30 |
| [HTML (1)] HTML이란 (0) | 2023.03.30 |