HTML(Hypertext Markup Language)는 프로그래밍 언어가 아닌 마크업 언어입니다. 주로 웹 브라우저에서 웹을 구성하는 요소들을 구성하는 전체 틀을 짜는 언어입니다. HTML은 각 태그로 구성되어 있고, 웹의 구조를 언어로 구성할 수 있다는 장점이 있습니다.
예를 들어 웹 사이트에서 하나의 공간을 마련하고 싶다면 <div> 태그를 사용할 수 있습니다.
HTML 태그
HTML 언어는 시작태그와 끝내그로 구성됩니다. 시작 태그와 닫는 태그를 하나의 세트로 구성됩니다.
하나의 태그를 요소(element)라고 할 수 있습니다.
HTML은 프로그래밍 언어가 아니기 때문에 잘못적어도 오류가 나지 않습니다. 웹 브라우저가 어떻게든 HTML을 해석해서 렌더링 해주기 때문입니다. 하지만 여는 태그 뒤에는 항상 닫는 태그가 이어지는게 원칙입니다.
아래는 제목 태그에 주로 사용되는 H1 태그를 사용한 문장입니다. H1 태그로 열었으면 H1 태그로 닫아줘야 합니다.
<h1> 제목입니다 </h1>
블록 레벨 VS 인라인 객체
먼저 블록 레벨 요소는 웹페이지사 하나의 블록을 형성합니다. 블록 요소 앞뒤로는 줄라인이 변경되고, 웹 페이지의 구조를 위해 사용됩니다. 대부분의 웹 페이지들은 정형화된 구조를 가집니다. 헤더와 본문 그리고 푸터로 구성됩니다.
블록 요소는 단락을 변경하거나 목록을 생성할 때 사용됩니다. 위에서 사용했던 H1 태그 또한 블록 요소 라고 할 수 있습니다.
반면 인라인 요소는 블록 요소 내에 포함되는 요소입니다. 새로운 줄을 만들지 않고, 단락 내에서 그대로 일반 문장처럼 사용될 수 있습니다.
대표적으로 em, span 태그는 인라인 요소입니다. 줄을 변경하지 않고 문장 내에서 요소를 그대로 사용할 수 있습니다. 아래 예시를 보시면 H1 블록 요소로 중첩되어 있지만 span 태그는 블록 내에서 하나의 문장을 그대로 이어나가기 때문에 하나의 문장처럼 보이게 만드는 효과를 가집니다.
<h1> Hello <span>World</span></h1>
Hello World
태그를 열지 않는 요소
위에서 모든 요소가 여는 태그 + 닫는 태그로 구성된다고 말씀 드렸습니다. 하지만 예외는 있는 법입니다. 빈 요소라 불리는 요소는 여는 태그와 닫는 태그가 존재하지 않습니다. 대표적으로 img 태그에는 닫는 요소가 없습니다.
<img src="myimage.png" />
빈 요소의 경우 닫는 태그 없이 "/>"로 요소를 닫아줍니다.
HTML 속성 적용하기
그럼, 특정 요소를 특정해서 작업을 하고 싶은데, 요소를 어떻게 특정할 수 있을까요?
HTML 각 요소에는 해당 요소를 특정할 수 있는 속성을 적용시킬 수 있습니다.
아래 예시를 보시면 id와 class 속성으로 해당 태그를 특정할 수 있습니다.
<h1 id="title-id"> Hello World </h1>
<h1 class="title-class"> Hello World </h1>
id는 유일한 요소를 특정하게 되고, class 속성은 여러개의 속성을 배열값으로 지정할 수 있습니다.
HTML 문서 구성요소
이제 본격적으로 HTML 페이지를 작성합니다.
HTML의 기본 골격은 다음과 같습니다.
<!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>- <!DOCTYPE html> - html 파일의 형식을 의미합니다. 웹의 초창기 시절 doctype이 HTML에서 발생하는 오류를 자동 검사해주거나 품질이 좋은 파일이라는 것을 의미했습니다. 지금은 문서 형식을 나타낸다고만 이해하시면 됩니다.
- <html></html> - html 파일에서 가장 최상위 요소입니다. 전체 페이지를 의미합니다.
- <head></head> - 사용자에게 직접적으로 보이는 요소는 아닙니다. 하지만 CSS파일 연결, 메타태그 설정, 제목 설정 등 웹 페이지가 담고 있어야 할 정보를 기록하는 공간입니다.
- <body></body> - 사용자에게 직접적으로 보여지는 공간으로 텍스트, 이미지 등 다양한 요소가 담기게 됩니다.
- <meta charset="UTF-8"> - 인코딩 설정 메타태그입니다. 영어 뿐만 아니라 전세계 언어를 표시하기 위해서는 확장된 인코딩이 필요합니다.
- <meta http-equiv="X-UA-Compatible" content="IE=Edge"> - 일명 쿼크 모드라고도 하며 IE 버전에 따라 다르게 렌더링 되는 에러를 잡기 위해 넣습니다. 현재 IE는 서비스가 중단되어 넣으실 필요는 없습니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> - viewport를 설정하는 메타태그입니다. 모바일웹 혹은 반응형웹에서 기기를 인식하기 위해 사용됩니다.
<h1 class="title">Hello World</h1>
Hello World가 출력됩니다.
클래스 속성을 지정했으므로, title이라는 이름으로 해당 요소를 특정해보겠습니다.
요소를 선택하기 위해서는 document 객체가 소유하고 있는 querySelector() 함수를 사용합니다.
document.querySelector(".title");
다음 명령으로 요소가 포함하고 있는 텍스트를 추출해낼 수 있습니다.
document.querySelecotr(".title").textContent
🚀️ 도움이 되셨다면 구독과 좋아요 부탁드립니다 👍️
'Programming' 카테고리의 다른 글
| HTML5 웹페이지 만들기 #2 용어 정리 (0) | 2023.01.08 |
|---|---|
| HTML5 웹페이지 만들기 #1 웹의 발전 (0) | 2023.01.08 |
| AWS 10,000 크레딧 수령하는 방법 (0) | 2023.01.05 |
| Node.js 크롤링 하는 방법 (0) | 2023.01.05 |
| Web이란 무엇인가? (0) | 2023.01.03 |
댓글