Skip to Content

로그인/회원 가입

메모장으로 간단한 웹페이지 만드는 방법

PDF 다운로드

PDF 다운로드

이 글은 윈도우 컴퓨터의 메모장 앱을 이용해서 텍스트 기반의 간단한 웹페이지를 만드는 방법에 대해 설명한다. 웹페이지 언어로는 HTML을 사용할 것이다.

파트 1

파트 1 의 4:

HTML 문서 만들기

PDF 다운로드

화면 왼쪽 하단의 윈도우 로고를 누른다. 시작 메뉴가 뜬다.
메모장을 입력하면 된다. 검색에 맞는 결과가 시작 메뉴 상단 쪽에 나온다.
을 누른다. 결과 상단에 있는 파란색 메모장 아이콘이다. 그러면 메모장이 열린다.
을 누른다. 메모장 창 왼쪽 상단 코너에 있다. 누르면 드롭다운 메뉴가 뜬다.
을 누른다. 드롭다운 메뉴에 있다. 다음으로 저장 창이 열릴 것이다.
창 하단 쪽에 있는 옵션이고, "텍스트 문서 (*.text)"라고 써있을 것이다. 이를 누르면 드롭다운 메뉴가 뜬다.
을 누른다. 드롭다운 메뉴에 있다. 누르면 파일을 HTML 문서로 저장할 수 있다.
8
저장 위치를 선택한다. 창 왼쪽에 문서를 저장하고 싶은 폴더 이름을 누른다.
- 예를 들어 데스크탑에 문서를 저장하고 싶다면, 위로 스크롤하여 왼쪽 사이드바에 있는 데스크탑을 누른다.
9
이름과 "html" 파일 확장자를 입력한다. "파일 이름" 텍스트 칸을 누른 다음 원하는 파일 이름을 입력하고 .html을 붙인다.
- 예를 들어 웹페이지 파일 이름을 "hello"라고 한다면, hello.html라고 입력하면 된다.
10
을 누른다. 그러면 현재 메모장 문서가 HTML 문서로 저장된다. 여기까지 왔다면, 웹페이지의 기본 구조를 만들 수 있다.
- 메모장이 우연히 닫히거나 나중에 다시 문서로 돌아와야 한다면, HTML 파일을 마우스 오른쪽 버튼으로 누른 다음, 드롭다운 메뉴에서 편집을 누르면 된다.
광고

파트 2

파트 2 의 4:

웹페이지 설정하기

PDF 다운로드

1
웹페이지 언어 태그를 추가한다. 메모장 가장 처음에 추가해야 하는 태그가 문서 나머지에 HTML을 사용하도록 알려준다. 다음과 같이 입력한다.
```
<!DOCTYPE html><html>
```
이 태그는 페이지 타이틀의 시작과 끝을 표시하는데, 페이지 타이틀은 다음 단계에서 만들 것이다. 이제 태그 다음에 <head>를 입력하고 ↵ Enter를 두 번 눌러서 공백을 남긴 다음 </head>를 입력한다.
3
웹사이트에 페이지 타이틀을 추가한다. 타이틀은 "<title></title>" 태그 사이에 넣어야 하고 타이틀 태그는 "head" 태그 사이에 들어가면 된다. 타이틀은 브라우저 탭에 뜨기 때문에 웹사이트의 이름을 알려준다. 예를 들어, 웹사이트 이름이 "내 웹사이트"인 헤더를 입력하려면, 다음과 같이 입력하면 된다:
```
<title>내 웹사이트</title>
```
4
"body" 태그를 추가한다. 모든 웹페이지 코드는 이 태그 사이에 들어가고, 이 태그는 "</title>" 태그 밑에 입력하면 된다:
```
<body></body>
```
문서 마지막 태그는 HTML 태그를 닫아서 페이지 끝을 표시하면 된다. "</body>" 태그 밑에 </html>을 입력하여 HTML 태그를 닫는다.
6
지금까지의 HTML 문서를 검토한다. 여기까지 왔다면 문서가 다음과 같이 보일 것이다.
```
<!DOCTYPE html><html><head><title>내 웹사이트</title></head><body></body></html>
```
Ctrl+S를 누르면 된다. 이제 문단이나, 제목같은 요소들을 문서에 추가할 수 있다.
광고

파트 3

파트 3 의 4:

웹페이지 요소 추가하기

PDF 다운로드

모든 요소 —제목이든 문단이든—는 "<body>" 태그와 "</body>" 태그 사이에 적어야 한다.
2
웹사이트의 메인 제목을 추가한다. "body" 태그 사이에 <h1></h1>을 입력하고, "<h1></h1>" 태그 사이에 원하는 웹페이지의 메인 제목을 입력한다. 예를 들어, 제목이 "환영합니다"인 페이지를 만들고 싶다면, 다음과 같이 하면된다.
```
<h1>환영합니다</h1>
```
- 태그 "<h2></h2>" 부터 "<h6></h6>" 까지 사용해서 제목 텍스트를 작게 만들 수 있다.
3
페이지에 문단 텍스트를 추가한다. "<p></p>"인 문단 태그를 입력하고 태그 사이에 문단으로 쓸 내용을 입력한다. 다 쓰고나면 다음과 같이 보여야 한다:
```
<p>여기는 제 웹사이트 입니다. 저를 학생 회장으로 뽑아주세요!</p>
```
4
문단에 공백을 넣는다. 문단이나 제목 사이에 공백을 넣고 싶다면 끝난 태그 줄 다음에 <br>을 입력한다. 예를 들어 문단 뒤에 한 줄을 띄우고 싶다면, 다음과 같이 보여야 한다:
```
<p>여기는 제 웹사이트 입니다. 저를 학생 회장으로 뽑아주세요!</p><br><p>저는 감자도 좋아합니다.</p>
```
- 첫 번째 문단 뒤에 "<br>" 태그를 더 넣어서 줄을 추가해서, 첫 번째 두 번째 문단 사이에 공백을 만들 수 있다.
5
텍스트에 형식을 추가한다. 문단 태그 안에 넣기만 한다면 단어, 문장 또는 글자 블록에 굵은 글꼴, 기울임체, 밑줄(위, 아래에 써있는 글자에도)을 추가할 수 있다.
```
<b>굵은 글꼴</b><i>기울임체</i><u>밑줄 글꼴</u><sup>위에 쓰는 글자</sup><sub>아래에 쓰는 글자</sub>
```

How.com.vn 한국어: Step 6 웹페이지가 어떻게 보이는지 검토한다.

웹페이지 요소가 다를 수 있지만, 다음과 비슷하게 문서가 보일 것이다:

<!DOCTYPE html><html><head><title>내 웹사이트</title></head><body><h1>환영합니다!</h1><p>여기는 제 웹사이트 입니다. 맘에 드시길 바래요!</p><p><b>여기에 강조할 내용을 굵은 글꼴로 표시합니다.</b></p><p><i>기울임체는 이상할 수 있어요.</i></p></body></html>

광고

파트 4

파트 4 의 4:

웹페이지 테스트 하기

PDF 다운로드

Ctrl+S를 누르면 된다. 그러면 문서를 열 때 가장 최근 버전의 웹페이지가 열린다.
드롭다운 메뉴가 뜬다.
를 선택한다. 드롭다운 메뉴에 있다. 팝업 메뉴가 뜰 것이다.
모든 웹 브라우저는 HTML 문서를 열 수 있기 때문에, 팝업 메뉴에서 원하는 웹 브라우저를 고르면 된다. 선택한 웹 브라우저에서 HTML 문서가 열릴 것이다.
5
웹페이지를 검토한다. 포맷에 문제가 없어 보인다면, 메모장을 닫으면 된다.
- 계속해서 HTML 문서를 편집하고 싶다면, 메모장으로 돌아가서 필요한 편집을 하고 저장해준다.
광고

팁

HTML 문서의 웹페이지 배경 색상을 조절하거나 또는 CSS로 글꼴 색상을 바꿀 수도 있다.

광고

관련 위키하우

광고

이 위키하우에 대하여

공동 작성자 :

위키하우 직원

위키하우 소속 작가

이 글은 위키하우 편집팀과 전문 조사원이 공동 작성하였으며 정확성 검토가 완료 되었습니다.

위키하우 콘텐츠 관리팀은 작성된 모든 글이 위키하우 글 작성 규정을 준수하는지 꾸준히 검토합니다. 조회수 20,422회

글 카테고리: 시스템 PC/window

포르투갈어

이탈리아어

인도네시아어

인쇄

이 문서는 20,422 번 조회 되었습니다.

이 글이 도움이 되었나요?

⚠️ Disclaimer:

Content from Wiki How 한국어 language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

Notices:

- A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

광고

-

-