<꿀팁모아 : 155번째 포스팅> HTML이란?
안녕하세요 꿀팁모아의 희망주기입니다
오늘 알아볼 것은 HTML 입니다
파이썬, c언어, 자바를 배우기 전에 한번쯤 들어봤을거 같은데요
오늘 HTML에 대하여 알아보겠습니다
1 HTML 이란?
HTML은 하이퍼 텍스트 마크 업 언어의 약자이며 웹 페이지를 만들기 위한 표준 마크업 언어인데요. HTML을 쓰는 이유는 웹페이지를 만드는 사람들에게 구조를 설명하기 위함도 있으며 일련의 구성으로 이루어지기에 브라우저에 어떠한 컨텐츠를 가지고 있는지 표시하는 방법이기도 합니다. 이때, HTML의 요소라는 것은 "이것은 제목입니다", "이것은 단락입니다", "이것은 링크입니다"등과 같은 콘텐츠 조각에 레이블을 붙이는 것을 말해요
2 간단한 HTML 문서 살펴보기
아마 이렇게 설명을 해도 이해를 못할거 같아서 하나의 예제를 준비해보았는데요. 사진과 설명을 잘 참조하여 비교해서 보시면 아.. 이게 HTML이구나 라는 느낌을 받으실거에요
<!DOCTYPE html> 처음에 등장하는 이 선언은 HTML 문서라는 것을 정의해요. <Html> 이 요소는 html 페이지의 루트 요소입니다. <head> 라는 거 부터가 html 페이지에 대한 메타 정보가 포함되어 있는데요. 쉽게 이야기를 하자면, 논문에 서론, 본론, 결론이 있는것처럼 head는 서론부분에 해당이 됩니다. Head 바로 아래에 적혀있는 요소 <title>은 html 페이지의 제목 (브라우저의 제목 표시줄 또는 페이지의 탭에 표시됨)을 지정합니다.
<Body> 부터가 서론 본론 결론 중 본론에 해당되는 요소입니다. 문서의 본물을 정의하여 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등과 같이 보이는 모든 내용에 대한 컨테이너라고 생각하시면 편할 거 같아요. 그 외에 사진 속에 보시면 <h1> 과 <p>도 보이기는 하는데요. <h1>은 큰 제목을 정의하는 툴입니다. <p>의 경우에는 단락을 정의합니다.
3 HTML 요소?
아까부터 요소 요소? 라는 말이 언급을 많이 했는데 뭐지? 라고 생각이 드실 수 있는데요. HTML 요소는 시작 태그, 일부 콘텐츠 및 태그로 정의 되는 것을 말해요. 쉽게 설명을 하자면, 다음 사진과 같이 설명이 가능한데요.
| Start Tag | Element content | End tag |
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph | </p> |
| <br> | none | none |
일부 HTML 요소에는 내용이 없는데요. (ex: <br> 요소). 이러한 요소를 빈 요소라고 하는데요. 빈 요소에는 끝 태그가 존재하지 않습니다. 더 자세한 것은 앞으로의 포스팅에서 다룰 예정이니 그냥 그런가보다 하시고 넘어가시면 됩니다.
4 웹 브라우저 (Web Browser)
웹 브라우저 (Chrome, Edge, Firefox, Safari)의 목적은 html 문서를 읽고 올바르게 표시하는 것인데요. 브라우저는 html 태그를 표시하지 않지만 HTML 태그를 사용하여 문서를 표시하는 방법을 결정합니다.
5 HTML 페이지 구조 (HTML Page Structure)
<Body> 섹션 (위의 흰색 영역) 내의 콘텐츠가 브라우저에 표시된다. <title> 요소 내의 콘텐츠는 브라우저의 제목 표시줄 또는 페이지의 탭에 표시된다
'IT 및 코딩 > HTML 및 CSS' 카테고리의 다른 글
| <꿀팁모아 : 160번째 포스팅> HTML 단락 (0) | 2022.04.30 |
|---|---|
| <꿀팁모아 : 159번째 포스팅> HTML 제목 (0) | 2022.04.30 |
| <꿀팁모아 : 158번째 포스팅> HTML 속성 (0) | 2022.04.30 |
| <꿀팁모아 : 157번째 포스팅> HTML 기본 예제 (0) | 2022.04.14 |
| <꿀팁모아 : 156번째 포스팅> HTML 편집기 사용방법 (2) | 2022.04.13 |