HTML (1)

생활코딩의 HTML 강의를 따라가며 공부한 것을 정리한 글입니다.

링크: opentutorials.org/course/3084

WEB1 - HTML & Internet - 생활코딩

 

웹에 대해 한 번도 공부한 적이 없어서 막연하게만 알고 있었는데,

웹 쪽으로 커리어를 쌓겠다는 생각은 없어도 어떤 식으로 작성되고 동작하는지 알고 싶어서 맛만 보려고 공부를 시작했습니다.

공부한 내용을 설명하는 느낌으로 적어 보겠습니다.

 

환경: MacOS, Atom

 

1. 태그 (tag)

다음과 같은 글이 있습니다.

"Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications."

 

이 글을 1.html 파일에 그대로 붙여넣으면 아래와 같이 됩니다.

실행 결과

여기서 특정 글자를 강조하고 싶다면 어떻게 하면 될까요?

'creating web pages and web applications' 를 강조하려고 합니다. <strong> 과 </strong> 으로 앞뒤를 감싸 줍시다.

 

Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages and web applications</strong>.

 

실행 결과

성공적으로 강조 표시가 되었습니다!

 

다음으로, 특정 문자에 밑줄을 그어 봅시다.

Hypertext Markup Language (HTML) 에 밑줄을 그어 보겠습니다. 밑줄은 underline이며, 그 앞글자를 따서 <u>와 </u>로 앞뒤를 감싸 줍니다.

 

<u>Hypertext Markup Language (HTML)</u> is the standard markup language for <strong>creating web pages and web applications</strong>.

 

실행 결과

성공적으로 밑줄이 그어진 것을 확인할 수 있습니다.

 

위와 같이 앞뒤로 문자를 둘러싸는 것을 HTML 문법상 태그 (tag) 라고 부릅니다. 열리는 태그, 닫히는 태그라고 구분해서 부르기도 하며, 닫히는 태그는 앞에 /를 붙여서 구분합니다.

간단하지만, 가장 흔히 사용되는 문법 구조로써, 글에 대한 설명을 옷의 상표마냥 덧붙인다는 의미에서 태그라는 이름을 사용한다고 하네요.

HTML 코드를 볼 때 태그를 알아볼 수 있게 되었습니다.

 

<h1>이라는 태그가 있습니다. 정의에 따르면, h1은 HTML 제목을 정의할 때 사용합니다. h1 ~ h6이 존재하는데, 1은 가장 중요한 제목, 6은 가장 덜 중요한 제목을 의미합니다.

이것을 이용해서 앞에서 작성한 코드에 간단한 내용을 추가해 보았습니다.

 

<h1>HTML</h1>
<u>Hypertext Markup Language (HTML)</u> is the standard markup language for <strong>creating web pages and web applications</strong>.

 

실행 결과

강조된 제목이 추가된 것을 확인할 수 있습니다.

 

 

이렇듯 태그는 굉장히 여러 가지가 존재합니다. 약 150개 가량이 존재한다고 하네요.

이 중에서 모르는 것은 검색하면 바로 알 수 있지만, 자주 사용되는 것일수록 미리 알고 있는 것이 사용하기에 편합니다.

 

www.advancedwebranking.com/html/

The average web page from top twenty Google results

위 링크에서는 구글이 전 세계에 있는 웹사이트를 분석한 결과가 공개되어 있습니다.

그래프에 따르면, 사용 빈도가 높은 순서대로 32개의 태그를 소개하고 있습니다. 

빈도가 높은 순서대로 공부하는 것이 효율적인 방법이 되겠습니다.