한마음

<W3Schools 번역> - HTML 에디터 본문

공부/웹프로그래밍

<W3Schools 번역> - HTML 에디터

갓태희 2020. 11. 8. 15:16 
이 글은 두번째 글입니다.

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

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

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

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

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

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

원문보기

이전글 바로가기

 

A simple text editor is all you need to learn HTML.

-> 여러분이 HTML을 배우기 위해 필요한 건 간단한 텍스트 편집기밖에 없습니다.

Learn HTML Using Notepad or TextEdit

-> Notepad 혹은 TextEdit을 사용하여 HTML을 배우기

Web pages can be created and modified by using professional HTML editors.

-> 웹 페이지들은 전문적인 HTML편집기를 사용해서 만들어지거나 수정될 수 있습니다.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

-> 하지만, HTML을 배우기 위해서 우리는 Notepad(메모장)이나 TextEdit(맥에 있는 텍스트 편집기) 같은 간단한 text 편집기 사용을 추천드립니다.

 

We believe in that using a simple text editor is a good way to learn HTML.

-> 저희는 HTML을 배우는데 간단한 text 편집기를 사용하는 게 좋은 방법이라고 생각합니다.

 

Follow the steps below to create your first web page with Notepad or TextEdit.

-> Notepad 혹은 TextEdit을 통해 여러분의 첫 번째 웹사이트를 만들기 위해 아래 과정들을 따라와 주세요

Step 1: Open Notepad (PC) - 1 단계: 메모장 열기 (PC)윈도

Windows 8 or later: (윈도 8 포함 혹은 그 이후 버전)

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

-> 시작 버튼(화면의 왼쪽 아래에 있는 윈도 버튼을 말합니다)을 클릭하고 바로 메모장 혹은 Notepad라고 키보드로 쳐주세요

-> 윈도 8 버전 이후부터는 시작 버튼을 누르자마자 키보드로 원하는 것을 타이핑하면 바로 검색이 됩니다

 

Windows 7 or earlier: (윈도 7 포함 혹은 그 아래 버전)

Open Start > Programs > Accessories > Notepad

-> 시작 버튼 > 모든 프로그램 > 보조 프로그램 > 메모장 을통해 실행하시면 됩니다.

Step 1: Open TextEdit (Mac) - 1 단계: TextEdit(텍스트 편집기) 열기 (맥 OS)

Open Finder > Applications > TextEdit

-> Finder > Applications(응용프로그램) > TextEdit(텍스트 편집기)을 실행합니다.

-> 혹시 안된다면 LaunchPad에 들어가서 text라고 치면 앱이 자동으로 검색됩니다. 이것을 통해 실행시키셔도 됩니다.

 

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

-> 환경설정에 들어가서 파일을 알맞게 저장하기 위해 Plain Text(일반 텍스트)를 설정해줍니다.

-> 맥의 상단바 가장 왼쪽에 텍스트 편집기를 누르면 환경설정 버튼이 나옵니다. 

Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".

-> "열기 및 저장하기" 버튼을 누르고 "HTML 파일을 서식 있는 텍스트가 아닌 HTML 코드로 표시"를 체크해 주세요

 

Then open a new document to place the code.

-> 이후 HTML 코드를 작성할 새로운 문서를 열어주시면 됩니다.

 

Step 2: Write Some HTML - 2 단계 : 간단한 HTML 코드를 작성해봅시다!

Write or copy the following HTML code into Notepad:

-> 메모장에 HTML코드를 직접 작성하시거나 복사 + 붙여 넣기 해주세요!

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

 

 

윈도우 - 메모장

 

맥 - 텍스트편집기

Step 3: Save the HTML Page - 3 단계 : HTML 페이지 저장

Save the file on your computer. Select File > Save as in the Notepad menu.

-> 메모장 메뉴에 파일 > 다른 이름으로 저장을 통해 HTML 파일을 여러분 컴퓨터에 저장해주세요

 

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

-> 아래 사진과 같이 "index.htm"이라고 파일명을 정해주고 인코딩을 "UTF-8"로 해주세요 (HTML 파일의 기본 인코딩입니다)

Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.

팁: ". htm"과 ". html" 둘 다 사용하실 수 있습니다 차이가 없으니 둘 중에 아무거나 사용하시면 됩니다

Step 4: View the HTML Page in Your Browser

-> 4 단계 : 여러분의 기본 브라우저에서 HTML 페이지를 직접 이제 볼 수 있습니다.

 

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

기본 브라우저에서 저장된 HTML 파일을 열어보세요(더블클릭 혹은 우클릭 > 다른 프로그램으로 열기를 선택해 파일을 열수 있습니다.)

 

The result will look much like this:

-> 결과는 이렇습니다.

결과

W3Schools Online Editor - "Try it Yourself"

-> W3Schools의 온라인 에디터인 "Try it Yourself"

With our free online editor, you can edit the HTML code and view the result in your browser.

-> 저희의 무료 에디터로 여러분들은 HTML 코드를 편집할수있고 브라우져에서 결과를 확인하실수 있습니다.

 

It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:

-> 여러분이 작성한 HTML코드를 빠르게 테스트해보고 싶으실 때 완벽한 도구이고 색깔로 코드를 구분할 수 있고 저장할 수 있고 다른 사람들과 공유도 할 수 있습니다!

W3Schools에서 제공하는 온라인 편집기

Try it Yourself 바로가기

이 부분은 링크를 걸어두겠습니다. 위는 사진입니다

 

Click on the "Try it Yourself" button to see how it works.

-> "Try it Yourself"가 어떻게 동작하는지 클릭해보세요!

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

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