한마음

<W3Schools 번역> - HTML 기본 본문

공부/웹프로그래밍

<W3Schools 번역> - HTML 기본

갓태희 2020. 11. 21. 04:20 
이 글은 세번째 글입니다.

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

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

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

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

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

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

 

원문보기

이전 글 보기

HTML Basic Examples

-> HTML 기본 예제들

 

 

In this chapter we will show some basic HTML examples.

-> 이 챕터에서는 몇 가지 HTML의 기본 예제들을 보여드리겠습니다.

Don't worry if we use tags you have not learned about yet.

-> 여러분이 아직 배우지 않은 태그를 사용했다 해도 걱정하지 마세요!

HTML Documents

-> HTML 문서들

 

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

-> 모든 HTML 문서들은 <!DOCTYPE html>이라는 문서 타입 정의(document type declation)로 시작해야 합니다

-> 문서 타입 정의는 줄여서 DTD라고 합니다.

 

The HTML document itself begins with <html> and ends with </html>.

-> HTML 문서 자체는 <html> 태그로 시작해 </html> 태그로 끝납니다.

 

The visible part of the HTML document is between <body> and </body>.

-> HTML 문서의 보이는 부분은(우리가 웹페이지에서 실제로 보는 내용, 그림, 동영상 등등을 말합니다) <body> 태그와 </body> 태그 사이에 있습니다.

Example

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

직접 해보세요!!

The <!DOCTYPE> Declaration

-> <!DOCTYPE> 선언 부분

 

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

-> <!DOCTYPE> 선언부분은 문서의 형태 혹은 종류를 나타내며 웹페이지를 브라우저가 알맞게 표시하도록 도와줍니다.

 

It must only appear once, at the top of the page (before any HTML tags).

-> <!DOCTYPE> 태그는 페이지 최상단에 한번만 나타납니다 (어떠한 HTML태그보다도 앞에 선언되어있습니다.)

 

The <!DOCTYPE> declaration is not case sensitive.

-> <!DOCTYPE> 정의는 대소문자를 구분하지 않습니다.

 

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

-> HTML5에서 <!DOCTYPE> 선언은 다음과 같이 합니다. :

<!DOCTYPE html>

HTML Headings

-> HTML의 제목을 나타내는 태그들

 

HTML headings are defined with the <h1> to <h6> tags.

-> HTML의 제목을 나타나는 태그는 <h1>부터 <h6>까지 정의되어있습니다.

 

<h1> defines the most important heading. <h6> defines the least important heading:

-> <h1> 은 가장 중요한 제목을 표시하고 싶을 때 사용하며, <h6>은 가장 중요하지 않은 제목을 표시하고싶을때 사용합니다.

Example

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

직접 해보세요!!

 

 

 

HTML Paragraphs

-> HTML의 문단을 나타낼 때 사용하는 태그들

 

HTML paragraphs are defined with the <p> tag:

-> HTML의 문단은 <p> 태그로 정의되어있습니다.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

 

HTML Links

-> HTML의 링크들을 나타낼 때 사용하는 태그

 

HTML links are defined with the <a> tag:

-> HTML 링크들은 <a> 태그로 정의할 수 있습니다.

Example

<a href="https://www.w3schools.com">This is a link</a>

직접 해보세요!!

 

 

The link's destination is specified in the href attribute. 

-> 원하는 링크를 "href"속성에 작성하고 "This is a link"를 클릭하면 작성한 링크에 접속할 수 있습니다.

 

Attributes are used to provide additional information about HTML elements.

-> 속성들은 HTML 요소들에 대해 추가적인 정보 혹은 기능을 제공할 때 사용됩니다.

You will learn more about attributes in a later chapter.

-> 추후에 더 많은 속성들을 배울 겁니다.

HTML Images

-> HTML안에 이미지들을 표현하고 싶을 때 사용하는 태그

 

HTML images are defined with the <img> tag.

->HTML안에 이미지들을 표현하고싶을때 <img> 태그를 사용합니다.

 

The source file (src), alternative text (alt), width, and height are provided as attributes:

-> <img> 태그는 나타내고 싶은 이미지 파일 (src), 대체 텍스트 (alt), 넓이, 높이들이 속성으로 제공됩니다.

-> src는 html 안에 표현하고 싶은 이미지 파일의 경로 혹은 링크를 적어주시면 됩니다.

-> alt는 대체 텍스트인데 마우스를 이미지 위에 올려두면 보이는 텍스트 혹은 이미지가 브라우저에 표시되지 않을 때 이 이미지가 어떠한 이미지였는지 텍스트 형태로 대신 알려주는 텍스트를 말합니다.

Example

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

직접 해보세요!!

How to View HTML Source?

-> HTML 소스를 보는 방법

 

Have you ever seen a Web page and wondered "Hey! How did they do that?"

-> 여러분들은 웹페이지를 보며 이 페이지를 어떻게 표시를 했지?라고 의문을 품어본 적 있으세요?

-> 밑에 HTML 소스코드를 보는 방법을 알려줍니다. 알려주기 전에 그냥 농담 삼아하는 얘기인 거 같습니다.

-> 한국어로 해석하기 정말 어색하네요

View HTML Source Code:

->HTML 소스코드 보기

 

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in

other browsers. This will open a window containing the HTML source code of the page.

 

-> HTML 페이지에서 우클릭을 하고 "페이지 소스 보기"를 선택하거나 "소스 보기"(마이크로 소프트 Edge 웹브라우저), 혹은 다른 브라우저에서 비슷한 선택 버튼을 클릭하면 됩니다. 그러면 HTML 페이지의 소스코드를 포함한 창을 열어줄 겁니다.

 

Inspect an HTML Element:

-> HTML 요소 검사

 

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

 

-> 속성에 마우스를 갖다 대고 우클릭을 하고(혹은 빈부분 위에서 우클릭을 해도 됩니다), "검사" 혹은 "요소 검사"를 선택하여 어떠한 요소들로 구성되어있는지 확인합니다 (HTML과 CSS를 모두 볼 수 있습니다.) 여러분은 Elements 메뉴 혹은 Styles panel 메뉴를 통해 HTML 혹은 CSS를 실시간으로 편집할 수 있습니다.

 

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

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