한마음

<W3Schools 번역> - HTML 소개 본문

공부/웹프로그래밍

<W3Schools 번역> - HTML 소개

갓태희 2020. 11. 8. 04:17

 

이 글은 첫번째 글입니다.

2020년 11월 8일부터 W3S 사이트에 있는 HTML, CSS, JAVASCRIPT를 배우는 문서들을 한글화 해보려고 합니다.

본문에 나와있는 영어 밑에 영어해석을 적고 검은색 글씨의 강조 표시를 해놓았습니다

강조가 되어있지만 검은색이 아닌 글씨는 제가 부연설명을 덧붙였습니다. 내용이 다르거나 잘못된 지식이 있으면

wonderfulhuman@naver.com으로 메일 혹은 댓글을 통해 언제든지 피드백 주세요!! 

자 그럼, 다들 저와함께 차근차근 HTML공부 시작해봅시다

글을 읽어주셔서 감사합니다.

원문보기

 

HTML is the standard markup language for creating Web pages.

-> HTML은 웹페이지를 만들기 위해 기준이 되는 마크업 언어(Markup Language)입니다.

What is HTML?

-> HTML이란?

 

* HTML stands for Hyper Text Markup Language
-> HTML 은 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language)의 줄임말입니다.

-> 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.

여기서 태그는 <html>, <head>, <title> 이러한 형식을 가지는 것을 태그라 총칭합니다. 출처


* HTML is the standard markup language for creating Web pages
-> HTML은 웹페이지를 만들기 위해 기준이 되는 마크업 언어(Markup Language)입니다.


* HTML describes the structure of a Web page
-> HTML은 웹페이지(Web page)의 구조를 묘사하는 언어입니다.


* HTML consists of a series of elements
-> HTML은 일련의 요소(아주 간단한 예로 아까 말한 태그)로 구성되어 있습니다.


* HTML elements tell the browser how to display the content
-> HTML 구성요소들은 웹페이지의 내용(content)들을 브라우저에 표시하는 방법을 알려줍니다

-> 여기서 말하는 내용은 웹브라우저에서 눈에 보이는 모든 것들을 말합니다. 녹색창에서 우리가 로그인을 할 때 아이디를 입력하는 칸, 비밀번호를 입력하는 칸, 로그인 버튼 네이버 메인에 뜨는 기사 내용들 이런 것들이 모두 웹페이지의 내용(content)이 될 수 있습니다.

-> 이러한 것(content)을 브라우저는 HTML 문서 안에 사람이 작성한 코드를 해석하여 사용자(우리)에게 보기 좋게 보여줍니다. -> 브라우저의 역할

 


* HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

-> HTML 원소들은 어떠한 내용에 "여긴 heading 부분이야", "여긴 paragraph 부분이야", "여긴 link 부분이야" 등등처럼 라벨링을 합니다

-> 예를 들어 <head>여긴 heading 부분이야</head> 이런 식으로 <head> 태그로 "heading 부분이야"라는 내용(content)가 heading 부분이라는 것을 말해줍니다.

-> 또한 <p>여긴 paragraph 부분이야</p> 이런 식으로 <p> 태그로 "paragraph 부분이야"라는 내용(content)이 paragraph부분임을 라벨링(말해줍니다)해줍니다.

 

A Simple HTML Document -  간단한 HTML 문서(예제)

직접 따라 해 보시면 좋습니다

저뿐만 아니라 많은 개발자분들은 공감하실 수도 있겠습니다. 저런 백 마디 말보다 그냥 코드 몇 번 쳐보는 게 더 빨리 습득할 수 있는 길인 것 같습니다. 저도 프로그래밍을 처음 할 때는 정말 그냥 무작정 따라만 했었는데 나중에는 어떤 의미인지 자동적으로 알게 되고 자연히 쓰게 되더라고요 이건 그냥 프로그래밍에 있어서 자연스럽게 그렇게 돼가는 거 같습니다 말로 설명을 못하겠네요 그렇다고 지금 제가 막 엄청 잘한다 이건 절대 아닙니다! 아마 정말 그냥 따라 하시 다 보고, 어느 정도 프로그래밍을 해보시면 제 말이 이해 가실 겁니다

<!DOCTYPE html>
<html> 
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>


<!-- <html>, <head> 이런것처럼 <어떠한내용> 이런형식의 코드들 보이시죠? 이런게 태그입니다 -->
<!-- 점점 배워나가실겁니다! 이건 주석이라고하는것입니다. 실제 웹화면에 보이지않아요 이건 안따라하셔도되요 ㅎㅎ -->

</body>
</html>

Example Explained -> 예제 설명

* The <!DOCTYPE html> declaration defines that this document is an HTML5 document

-> <!DOCTYPE html> 태그 선언문은 이 문서가 HTML5 문서임을 정의하고 있습니다.


* The <html> element is the root element of an HTML page

-> <html> 태그는 HTML 페이지의 root 요소입니다. 웹페이지의 시작을 나타내는 아주 중요한 태그입니다!


* The <head> element contains meta information about the HTML page

-> <head> 태그는 meta information을 포함하는 요소입니다.

-> meta information 은 예를 들어 이 HTML 문서의 작성자가 누구인지 이러한 정보와 같은 중요한 정보를 말합니다. 


* The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

-> <title> 태그는 그 HTML 페이지의 제목을 지정하는 요소입니다 (브라우저의 타이틀바에 보이거나 페이지 탭에 보이는 것들을 말합니다.)

<title>태그

-> 위에 "새로운 글쓰기"라는 글씨 보이시나요? 이처럼 우리가 자주 사용하는 웹사이트들의 타이틀을 보여주고 싶을 때 <title> 태그를 사용합니다 이것은 저희가 마음대로 수정 가능합니다

<title> 태그가 실제로 사용된모습

-> 어떠한 페이지에 우클릭을 해서 우리가 보고 있는 페이지의 HTML 소스를 볼 수 있습니다. 그 안을 보면 이처럼 실제로 코드로 사용된 모습을 볼 수 있습니다 저기 새로운 글쓰기라는 글씨는 티스토리 웹페이지를 만드시는 개발자분께서 작성하신 겁니다.

 


* The <body> element defines the document's body, and is a container for all the visible contents, such as headings,

paragraphs, images, hyperlinks, tables, lists, etc.

-> <body> 태그는 문서의 몸통 부분을 정의하는 부분입니다. 그리고 이것은 제목(heading) , 문단, 이미지, 하이퍼링크, 테이블들, 리스트 등등 이러한 눈에 보이는 모든 것들의 컨테이너(이러한 것들을 모아놓은)입니다.


* The <h1> element defines a large heading

-> <h1> h1요소는 가장 큰 제목을 정의하는 태그입니다.

 

* The <p> element defines a paragraph

->  <p> 태그는 하나의 문단을 말합니다 줄 바꾸기 기능이 있습니다.

 

What is an HTML Element?

-> HTML 요소란 무엇인가?

 

An HTML element is defined by a start tag, some content, and an end tag:

-> HTML 요소란 태그로 시작해서 어떠한 내용을 중간에 넣고 태그로 끝나는 것으로 정의됩니다.

 

<tagname>Content goes here...</tagname>

<태그이름>이곳에 내용을적으세요</태그이름>

 

The HTML element is everything from the start tag to the end tag:

-> HTML 요소는 태그로 시작해서 태그로 끝나는 모든 것을 말합니다.

 

<h1>My First Heading</h1>
<h1>나의 첫 h1태그 사용</h1>

<p>My first paragraph.</p>
<p>내 첫 p태그 사용</p>

<!-- paragraph의 첫글자 p를따서 p태그입니다 -->
<!-- 한글이 깨져보일수 있습니다. -->

 

위 소스를 그대로 타이핑 치시고 html문서를 실행하면 영어는 정상 출력되지만 한글이 깨져서 화면에 보입니다 영어를 번역하기 위해서 한글을 쓴 것뿐입니다. 한글을 정상 출력하기 위해선 인코딩 과정을 거쳐야 합니다 하지만 지금은 자세히 알 필요가 전혀 없습니다.

정상 출력 소스를 아래에 첨삭하겠습니다 

<html>
<head>
    <meta charset="utf-8">
</head>
<h1>My First Heading</h1>
<h1>나의 첫 h1태그 사용</h1>

<p>My first paragraph.</p>
<p>내 첫 p태그 사용</p>

<!-- paragraph의 첫글자 p를따서 p태그입니다 -->
<!-- 한글이 깨져보이지 않으실겁니다. -->
</html>

 

 

Start tag (시작 태그) Element content (내용요소들) End tag (끝 태그)
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none (없음) none (없음)

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

-> 알림: 몇몇 HTML 요소들은 내용이( <br> 태그처럼) 없을 수도 있습니다. 이러한 요소들을 빈 요소들(empty elements)이라고 부릅니다. 빈 요소들은 끝 태그(end tag)도 가지지 않습니다!

 

Web Browsers - 웹 브라우저

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

-> 웹브라우저(크롬, 엣지, 파이어폭스, 사파리)의 목적은 HTML 문서를 읽기 위함이고 읽은 후 이것들을 알맞게(알맞은 위치에) 배치하는 것이 목적입니다. 브라우저는 HTML 태그를 배치하지 않고 문서들의 내용들을 어떻게 배치할 것인지를 결정하기 위해 태그를 사용합니다.

 

 

HTML Page Structure - HTML 페이지 구조

Below is a visualization of an HTML page structure:

-> 아래 HTML의 페이지 구조를 시각화해서 나타냈습니다.

 

HTML 페이지의 구조

Note: Only the content inside the <body> section (the white area above) will be displayed in a browser.

-> 알림 : 오직 <body> 태그 구역 안에 있는 내용만(흰색 부분) 브라우저에 보입니다.

 

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

-> WWW(World Wide Web) 초기부터 HTML의 많은 버전이 있었습니다.

HTML 역사

 

This tutorial follows the latest HTML5 standard.

-> 이 튜토리얼은 HTML5 기준을 따릅니다.

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

<W3Schools 번역> - HTML 요소들  (0) 2020.11.21
<W3Schools 번역> - HTML 기본  (0) 2020.11.21
<W3Schools 번역> - HTML 에디터  (0) 2020.11.08
'공부/웹프로그래밍' Related Articles more
Comments