Steadaily

[HTML 공부하기 1] HTML이란? HTML 기본 구조 및 요소 정리 (feat. 내 맘대로 기사 수정하기) 본문

프로그래밍 공부

[HTML 공부하기 1] HTML이란? HTML 기본 구조 및 요소 정리 (feat. 내 맘대로 기사 수정하기)

Steadaily 2023. 7. 11. 00:15

HTML이란

HTML이란 모든 웹 페이지의 뼈대입니다. 가장 쉽게 배울 수 있는 코딩(개발자들은 코딩이라고 부르지도 않는)이며,

사용자에게 보여지는 front-end 개발에 중요한 부분입니다.

 

HTML은 Hyper Text Markup Language의 약자입니다.

마크업 언어(Markup Language)는 텍스트나 데이터가 표시되는 구조를 정의하는 언어를 의미하고

하이퍼 텍스트(Hyper Text)는 컴퓨터나 핸드폰에 표시되어 다른 텍스트로 접근하도록 도와주는 하이퍼링크 같은 텍스트를 의미합니다.

(단어의 정의보다는 실제로 어떻게 구성되어있는지 보시면 더 이해가 잘 될 겁니다!)

 

HTML은 앞서 말했듯이, 웹 페이지에 보여지는 내용들을 구조화 하는 뼈대인데요,

이미지나 텍스트, 비디오들을 어떻게 구조화하고 배열할지 등을 결정한다고 보시면 됩니다.

 

모든 웹 페이지의 뼈대라고 했으니, 모든 사이트에는 HTML 언어로 쓰여진 문장이 있을텐데요.

간단하게 마우스-우클릭을 하여 현재 웹 사이트의 HTML 코드를 볼 수 있습니다.

아무 웹 사이트에서 마우스-우클릭을 한 뒤 '검사' 또는 'inspect' 버튼을 누르면 해당 웹 사이트에 대한 HTML 코드를 보실 수 있습니다. 간단하게 키보드 F12을 눌러도 보실 수가 있어요.

 

오른쪽에 보이시는 코드는 네이버 메인 페이지의 HTML 코드입니다.

코드에 마우스를 가져다대면, 해당 코드가 의미하는 웹 사이트의 부분을 표시해주고, 원한다면 사용자가 수정을 할 수도 있습니다.

하지만, 수정된 내용이 네이버 서버에 직접 반영되는 것은 아니고 일시적으로 나만 볼 수 있습니다.

 

이런식으로 기사 제목도 쉽게 바꿀 수가 있는데, 새로고침을 하면 다시 원상태로 돌아와요.

원한다면 이미지도 변경할 수도 있고, 이것 저것 스타일도 변경할 수 있어요.

 

HTML 구조

이제 HTML이 대충 어디에 사용되는지 알았으니, 실제로 어떻게 구성되었는지 알아보겠습니다.

HTML은 element(요소)들로 이루어져있는데요, 하나의 문장에는 '여는 태그', '내용', '닫는 태그' 와 같은 요소들로 구성되어있습니다.

아래 예시를 한 번 보겠습니다.

보시면, <h1>과 </h1> 사이에 "HTML 이란?"이라는 내용이 들어가있습니다.

앞에 오는 <h1>이 '여는 태그', 마지막에 오는 </h1>이 '닫는 태그'이며, 그 사이에 '내용'이 들어갑니다.

이러한 요소들을 이용해서 텍스트나 이미지들을 어떻게 표시할지 결정하게 되는 거에요.

위에서 사용한 <h1>는 제목처럼 큰 글씨를 표시할 때 사용하는 요소(element)입니다.

 

그럼 지금부터 HTML에서 사용되는 요소(element)들을 한 번 정리해보겠습니다.

 

HTML 요소

Body 

HTML의 주요 요소들을 포함하는, 큰 범위의 요소입니다.

중요한 내용들은 전부 여는 태그인 <body>와 닫는 태그인 </body> 사이에 작성하게 됩니다.

요소들이 서로 포함하고 포함되는 관계라는 걸 먼저 이해해야 하기에, HTML 구조를 잠깐 보고 가겠습니다.

 

HTML은 부모(Parent), 자식(Child) 형태의 트리구조를 갖습니다.

A라는 element가 B라는 element에 포함되는 경우, A는 B의 자식(Child) element가 되고

반대로 B는 A의 부모(Parent) element가 됩니다.

위의 예시의 경우, <p> element가 <body> element의 자식(child)이 되고, 반대로 <body> element가 <p> element의 부모가 됩니다. 위 예시처럼, 자식 element를 쉽게 구분할 수 있게 Tap키를 이용하여 들여쓰기를 하는 게 좋습니다.

부모, 자식 간의 관계 이상으로 더 상위 관계를 구분할 때는 grandparent, great-grandparent 관계로 확장시킬 수 있습니다.

이렇게 상하위 관계구조를 계층(hierarchy)구조라고 말합니다.

 

Headings

HTML에서의 Heading은 신문기사 등의 매체에서 사용하는 제목과 같은 성격을 띄고 있습니다.

독자들의 주의를 끌기 위해 주요 사용되고, 내용을 간단하게 설명할 때에도 사용됩니다.

 

HTML에서는 6개의 Heading elements가 있는데, 전부 크기가 다르기 때문에 목적에 맞게 사용할 수 있습니다.

<h1>부터 <h6>까지 있으며, 순서대로 큰 사이즈부터 작은 사이즈의 내용을 표시할 때 사용합니다.

 

Divs

<div> 는 division의 약자로, 웹페이지의 섹션을 구분하는 데 사용됩니다.

다른 element들을 그룹화하는 데 매우 유용하게 사용될 수 있어요. 따라서 <div>는 웹페이지에 표시되진 않습니다.

text나 이미지, 비디오 같은 다른 element들이 포함될 수 있고, <div> 을 사용할 때에는 parent, child를 구분하듯이, 그룹화 할 element들을 들여쓰기하는 것이 중요합니다.

 

지금까지 HTML가 무엇인지와, 정말 기본적인 요소들을 알아봤습니다.

다음 글에서는 몇가지 요소들과 스타일 등을 설정하는 방법들에 대해 정리해보겠습니다.

 

저도 공부하면서 정리하는 거라, 잘못된 내용이 있을 수 있습니다. 틀린 부분은 잡아주세요!

 

 

'프로그래밍 공부' 카테고리의 다른 글

[HTML 공부하기 4] 도메인 구매하고, DNS(Domain Name System)에 등록하기. DNS란? (가비아, 카페 24). 네임서버 변경하기  (0) 2023.07.11
[HTML 공부하기 3] HTML 템플릿 수정하고 배포(deploy)하기, 웹 사이트 쉽게 만드는 법. (Free CSS, Start Bootstrap, Netlify)  (1) 2023.07.11
[HTML 공부하기 2] HTML 태그를 이용하여 스타일 바꾸기, 번호 매기기, 이미지 등 삽입하기  (0) 2023.07.11
'프로그래밍 공부' Related Articles more