[HTML] 01. HTML의 기본 개념

01-1. HTML(Hypertext Markup Language)의 정의와 기능

초보자들이 컴퓨터 소프트웨어에 대해 처음 입문할 때 가장 많이, 그리고 쉽게 배우는 HTML.

HTML은 과연 무엇일까요?

HTML 은 웹페이지를 구조화하기 위해 사용하는 코드로서, 콘텐츠의 구조를 정의하는 마크업언어입니다. (* HTML은 프로그래밍 언어가 아닙니다! *) 우리는 HTML을 통해 웹사이트에 보여지는 콘텐츠( 예를 들어 이미지, 텍스트, 글 목록, 데이터,, 등등)들을 구성할 수 있습니다. 또한 브라우저(Safari, Chrome, Ie ...)는 사용자가 작성한 HTML 파일을 토대로 무엇을 어떻게 그려주면 되는 지 파악한 후, 웹페이지를 형성하게 됩니다.

정리
HTML은 웹페이지를 구조화하기 위해 작성하는 텍스트 코드
웹사이트를 구성하는 콘텐츠( 글 제목, 이미지, 목록 데이터 등)을 구성할 수 있게 해주는 도구
브라우저 역시 사용자가 작성한 HTML코드를 통해 웹페이지를 형성함.

01-2. HTML 파일

우리가 텍스트 에디터를 통해 작성한 HTML파일은 아래와 같이 .html이라는 확장자가 붙은 텍스트 파일입니다.

파일 이름은 사용자가 원하는대로 정할 수 있지만, html확장자는 꼭 명시해야 합니다.

index.html
login_page.html
1_first.html
limitless.html

텍스트 에디터를 통해 간단히 HTML을 확인할 수 있습니다. 다음은 HTML의 기본적인 구조입니다.

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>basic of html</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    ***
  </body>
 </html>

위 코드에서 보이는 ***이 들어간 부분에 본격적으로 웹사이트를 구성할 내용이 들어가게 됩니다.
저는 텍스트에디터 인 visual studio code를 이용해 이 자리에 "우리는 모두 개발자."라는 간단한 한 문장을 적어 보았습니다.
결과는 아래에 나오는 것 처럼 제가 적은 문장이 웹사이트 화면 상에서 출력되는 것을 볼 수 있습니다.

이 단순한 구조가 웹 개발의 시작점입니다!

01-3. HTML tag

위의 코드에서 < > 로 쌓여진 부분을 태그라고 합니다.
태그와 관련하여 HTML 기초 용어인 콘텐츠(content)와 요소(element)를 알아보도록 하겠습니다.

01-3-1. tag(태그), content(내용)

사용자가 HTML을 통해 원하는 웹사이트를 구성하기 위해서는, 각 상황에 맞는 태그(Tag)를 적절히 선택할 수 있어야 합니다.
태그는 아래처럼 <> 으로 감싸져 있습니다.

브라우저에서 태그(tag)(<태그이름>과 </태그이름>)은 보여주지 않습니다.
즉, 내용(content) 부분만 보여줍니다.
내용의 왼쪽에 있는 것이 시작 태그(opening tag)이고, 내용 우측에 있는 것이 종료 태그(closing tag)입니다.
종료태그 괄호를 닫기전에 /(slash)가 있다는 것을 꼭 기억해주세요.

대부분의 태그는 시작하면 꼭 끝맺음을 해야합니다.
즉, 시작태그가 있으면 끝 태그도 꼭 있어야한다는 의미입니다.

아래의 태그는 시작과 끝 태그가 존재합니다.

<p></p>
<h1></h1>
<h2></h2>
<a></a>

반면에 시작과 동시에 종료되는 태그도 존재합니다.

<img>
<br>

01-3-2. attribute(속성)

속성은 해당 태그의 속성에 관해 지정해 주는 것으로, 시작 태그에 작성합니다.
아래에서 div, a, img는 태그 이름이고 class, href, src, alt는 속성 이름입니다.

<div class="title">HTML is so easy.</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="miracle.png" alt="기적">

01-3-3. element(요소)

<태그이름> 으로 시작하여 </태그이름> 으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 합니다.
끝 태그가 필요없는 것은 태그가 그 자체로 요소가 됩니다.

아래에서 HTML is so easy, src = "miracle.png"

<h1>시작!</h1>
<img src="miracle.png">

저작자표시 (새창열림)

'Web) HTML & CSS' 카테고리의 다른 글

[HTML&CSS]: 번외) Semantic Code (0)	2022.04.30
[HTML&CSS]4. CSS: inline, block, inline-block (0)	2022.04.30
[HTML&CSS] 3. CSS: Position (1)	2022.04.27
[HTML&CSS] 2. CSS의 기본 (0)	2022.04.25

[HTML&CSS]1. HTML의 기본