PDF 다운로드
PDF 다운로드
이 글은 윈도우 컴퓨터의 메모장 앱을 이용해서 텍스트 기반의 간단한 웹페이지를 만드는 방법에 대해 설명한다. 웹페이지 언어로는 HTML을 사용할 것이다.
단계
-
시작 을 연다. 화면 왼쪽 하단의 윈도우 로고를 누른다. 시작 메뉴가 뜬다.
-
메모장을 검색한다. 메모장 을 입력하면 된다. 검색에 맞는 결과가 시작 메뉴 상단 쪽에 나온다.
-
메모장 을 누른다. 결과 상단에 있는 파란색 메모장 아이콘이다. 그러면 메모장이 열린다.
-
파일 을 누른다. 메모장 창 왼쪽 상단 코너에 있다. 누르면 드롭다운 메뉴가 뜬다.
-
다음으로 저장… 을 누른다. 드롭다운 메뉴에 있다. 다음으로 저장 창이 열릴 것이다.
-
드롭다운 박스의 "형식으로 저장"을 누른다. 창 하단 쪽에 있는 옵션이고, "텍스트 문서 (*.text)"라고 써있을 것이다. 이를 누르면 드롭다운 메뉴가 뜬다.
-
모든 파일 을 누른다. 드롭다운 메뉴에 있다. 누르면 파일을 HTML 문서로 저장할 수 있다.
-
저장 위치를 선택한다. 창 왼쪽에 문서를 저장하고 싶은 폴더 이름을 누른다.
- 예를 들어 데스크탑에 문서를 저장하고 싶다면, 위로 스크롤하여 왼쪽 사이드바에 있는 데스크탑 을 누른다.
-
이름과 "html" 파일 확장자를 입력한다. "파일 이름" 텍스트 칸을 누른 다음 원하는 파일 이름을 입력하고 .html 을 붙인다.
- 예를 들어 웹페이지 파일 이름을 "hello"라고 한다면, hello.html 라고 입력하면 된다.
-
저장 을 누른다. 그러면 현재 메모장 문서가 HTML 문서로 저장된다. 여기까지 왔다면, 웹페이지의 기본 구조를 만들 수 있다.
- 메모장이 우연히 닫히거나 나중에 다시 문서로 돌아와야 한다면, HTML 파일을 마우스 오른쪽 버튼으로 누른 다음, 드롭다운 메뉴에서 편집 을 누르면 된다.
광고
-
웹페이지 언어 태그를 추가한다. 메모장 가장 처음에 추가해야 하는 태그가 문서 나머지에 HTML을 사용하도록 알려준다. 다음과 같이 입력한다.
<!DOCTYPE html> < html >
-
"head" 태그를 추가한다. 이 태그는 페이지 타이틀의 시작과 끝을 표시하는데, 페이지 타이틀은 다음 단계에서 만들 것이다. 이제 태그 다음에 <head> 를 입력하고 ↵ Enter 를 두 번 눌러서 공백을 남긴 다음 </head> 를 입력한다.
-
웹사이트에 페이지 타이틀을 추가한다. 타이틀은 "<title></title>" 태그 사이에 넣어야 하고 타이틀 태그는 "head" 태그 사이에 들어가면 된다. 타이틀은 브라우저 탭에 뜨기 때문에 웹사이트의 이름을 알려준다. 예를 들어, 웹사이트 이름이 "내 웹사이트"인 헤더를 입력하려면, 다음과 같이 입력하면 된다:
< title > 내 웹사이트 </ title >
-
"body" 태그를 추가한다. 모든 웹페이지 코드는 이 태그 사이에 들어가고, 이 태그는 "</title>" 태그 밑에 입력하면 된다:
< body > </ body >
-
HTML 언어 태그를 닫는다. 문서 마지막 태그는 HTML 태그를 닫아서 페이지 끝을 표시하면 된다. "</body>" 태그 밑에 </html> 을 입력하여 HTML 태그를 닫는다.
-
지금까지의 HTML 문서를 검토한다. 여기까지 왔다면 문서가 다음과 같이 보일 것이다.
<!DOCTYPE html> < html > < head > < title > 내 웹사이트 </ title > </ head > < body > </ body > </ html >
-
문서를 저장한다. Ctrl + S 를 누르면 된다. 이제 문단이나, 제목같은 요소들을 문서에 추가할 수 있다.광고
-
웹페이지의 모든 요소는 "body" 태그 사이에 들어가야 한다. 모든 요소 —제목이든 문단이든—는 "<body>" 태그와 "</body>" 태그 사이에 적어야 한다.
-
웹사이트의 메인 제목을 추가한다. "body" 태그 사이에 <h1></h1> 을 입력하고, "<h1></h1>" 태그 사이에 원하는 웹페이지의 메인 제목을 입력한다. 예를 들어, 제목이 "환영합니다"인 페이지를 만들고 싶다면, 다음과 같이 하면된다.
< h1 > 환영합니다 </ h1 >
- 태그 "<h2></h2>" 부터 "<h6></h6>" 까지 사용해서 제목 텍스트를 작게 만들 수 있다.
-
페이지에 문단 텍스트를 추가한다. "<p></p>"인 문단 태그를 입력하고 태그 사이에 문단으로 쓸 내용을 입력한다. 다 쓰고나면 다음과 같이 보여야 한다:
< p > 여기는 제 웹사이트 입니다. 저를 학생 회장으로 뽑아주세요! </ p >
-
문단에 공백을 넣는다. 문단이나 제목 사이에 공백을 넣고 싶다면 끝난 태그 줄 다음에 <br> 을 입력한다. 예를 들어 문단 뒤에 한 줄을 띄우고 싶다면, 다음과 같이 보여야 한다:
< p > 여기는 제 웹사이트 입니다. 저를 학생 회장으로 뽑아주세요! </ p >< br > < p > 저는 감자도 좋아합니다. </ p >
- 첫 번째 문단 뒤에 "<br>" 태그를 더 넣어서 줄을 추가해서, 첫 번째 두 번째 문단 사이에 공백을 만들 수 있다.
-
텍스트에 형식을 추가한다. 문단 태그 안에 넣기만 한다면 단어, 문장 또는 글자 블록에 굵은 글꼴, 기울임체, 밑줄(위, 아래에 써있는 글자에도)을 추가할 수 있다.
< b > 굵은 글꼴 </ b > < i > 기울임체 </ i > < u > 밑줄 글꼴 </ u > < sup > 위에 쓰는 글자 </ sup > < sub > 아래에 쓰는 글자 </ sub >
-
웹페이지가 어떻게 보이는지 검토한다. 웹페이지 요소가 다를 수 있지만, 다음과 비슷하게 문서가 보일 것이다:
<!DOCTYPE html> < html > < head > < title > 내 웹사이트 </ title > </ head > < body > < h1 > 환영합니다! </ h1 > < p > 여기는 제 웹사이트 입니다. 맘에 드시길 바래요! </ p > < p >< b > 여기에 강조할 내용을 굵은 글꼴로 표시합니다. </ b ></ p > < p >< i > 기울임체는 이상할 수 있어요. </ i ></ p > </ body > </ html >
광고
-
문서를 저장한다. Ctrl + S 를 누르면 된다. 그러면 문서를 열 때 가장 최근 버전의 웹페이지가 열린다.
-
HTML 문서를 오른쪽 버튼으로 클릭한다. 드롭다운 메뉴가 뜬다.
-
다음으로 열기 를 선택한다. 드롭다운 메뉴에 있다. 팝업 메뉴가 뜰 것이다.
-
선호하는 웹 브라우저를 고른다. 모든 웹 브라우저는 HTML 문서를 열 수 있기 때문에, 팝업 메뉴에서 원하는 웹 브라우저를 고르면 된다. 선택한 웹 브라우저에서 HTML 문서가 열릴 것이다.
-
웹페이지를 검토한다. 포맷에 문제가 없어 보인다면, 메모장을 닫으면 된다.
- 계속해서 HTML 문서를 편집하고 싶다면, 메모장으로 돌아가서 필요한 편집을 하고 저장해준다.
광고
팁
이 위키하우에 대하여
이 문서는 21,060 번 조회 되었습니다.
광고
