HTML로 간단한 웹페이지 만들기

PDF 다운로드
공동 작성자 위키하우 직원

출처

PDF 다운로드

이번 위키하우에서는 HTML(hypertext markup language)을 사용하여 간단한 웹 페이지 만드는 법을 알려드립니다. HTML 은 웹페이지 구조를 만드는 월드 와이드 웹의 중요한 요소 중 하나입니다. 웹페이지를 만들고 나면 HTML 문서로 저장하여 웹브라우저에서 볼 수 있습니다. HTML 페이지는 윈도우나 맥 컴퓨터에 있는 기본 텍스트 편집기를 사용해 만들 수 있습니다.

파트 1
파트 1 의 6:

HTML에 헤드 추가하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/4082-1-2.jpg\/v4-460px-4082-1-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/4082-1-2.jpg\/v4-728px-4082-1-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    윈도우 운영체제의 컴퓨터에서는 보통 메모장이나 메모장++를 사용하며 맥 OS 사용자는 텍스트 편집기를, 크롬 OS 사용자는 텍스트를 사용하게 됩니다:
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/54\/4082-2-2.jpg\/v4-460px-4082-2-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/54\/4082-2-2.jpg\/v4-728px-4082-2-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    를 입력한 후 ↵ Enter 를 누르세요. 그러면 웹 브라우저가 이를 HTML 문서로 인식하게 됩니다. [1]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/35\/4082-3-2.jpg\/v4-460px-4082-3-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/35\/4082-3-2.jpg\/v4-728px-4082-3-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    을 입력한 후 ↵ Enter 를 누르세요. 이는 HTML 코드를 여는 태그입니다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/db\/4082-4-2.jpg\/v4-460px-4082-4-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/db\/4082-4-2.jpg\/v4-728px-4082-4-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    를 입력한 후 ↵ Enter 를 누르세요. 이는 HTML 헤드를 여는 태그입니다. 보통 HTML 헤드 정보는 웹 페이지에 표시되지 않습니다. 이 정보에는 타이틀, 메타 데이터, CSS 스타일 시트, 그리고 그 외 스크립트 언어 등이 포함됩니다. [2]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/62\/4082-5-2.jpg\/v4-460px-4082-5-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/62\/4082-5-2.jpg\/v4-728px-4082-5-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    를 입력하세요. 이는 페이지의 타이틀을 추가하는 태그입니다.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8a\/4082-6-2.jpg\/v4-460px-4082-6-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8a\/4082-6-2.jpg\/v4-728px-4082-6-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    웹페이지에 원하는 어떤 타이틀이라도 입력할 수 있습니다.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/4082-7-2.jpg\/v4-460px-4082-7-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/4082-7-2.jpg\/v4-728px-4082-7-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    을 입력한 후 ↵ Enter 을 누르세요. 이는 타이틀을 닫는 태그입니다.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/4082-8-2.jpg\/v4-460px-4082-8-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/4082-8-2.jpg\/v4-728px-4082-8-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    을 입력한 후 ↵ Enter 를 누르세요. 이는 헤드를 닫는 태그입니다. HTML 코드는 다음과 같이 보여야 합니다. 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
My Web Page </ 
 title 
 > 
 </ 
 head 
 >
    광고
파트 2
파트 2 의 6:

HTML에 바디 및 텍스트 추가하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a1\/4082-9-2.jpg\/v4-460px-4082-9-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a1\/4082-9-2.jpg\/v4-728px-4082-9-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    이는 HTML 문서의 바디를 여는 태그입니다. HTML 바디에 있는 모든 내용은 웹페이지에 표시됩니다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/84\/4082-10-2.jpg\/v4-460px-4082-10-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/84\/4082-10-2.jpg\/v4-728px-4082-10-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    를 입력하세요. 이는 HTML 문서에 헤딩을 추가하는 태그입니다. 헤딩은 크고 굵은 텍스트로 일반적으로 HTML 문서 상단에 위치하게 됩니다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0e\/4082-11-2.jpg\/v4-460px-4082-11-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0e\/4082-11-2.jpg\/v4-728px-4082-11-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    페이지 타이틀이나 환영 인사를 입력할 수 있습니다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3f\/4082-12-2.jpg\/v4-460px-4082-12-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3f\/4082-12-2.jpg\/v4-728px-4082-12-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    이는 헤딩을 닫는 태그입니다.
    • 진행하면서 헤딩을 추가하세요. <h1></h1> 부터 <h6></h6> 태그를 사용해 여섯 가지의 헤딩을 만들 수 있습니다. 이 태그들로 크기가 다른 헤딩을 만들 수 있습니다. 예를 들어 연속해서 크기가 다른 세 가지 헤딩을 만들려면 다음과 같이 쓸 수 있을 것입니다.: 
       < 
 h1 
 > 
제 페이지에 오신 걸 환영합니다! </ 
 h1 
 > 
 < 
 h2 
 > 
저 이름은 밥입니다. </ 
 h2 
 > 
 < 
 h3 
 > 
제 페이지를 좋아하셨으면 합니다. </ 
 h3 
 >
    • 헤딩은 텍스트의 우선순위나 중요도를 나타냅니다. 하지만 작은 헤딩을 사용하고 싶다면 반드시 큰 헤딩을 사용하지 않아도 됩니다. 게시물에 H1 없이 바로 H3을 사용할 수도 있습니다.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/4082-13-2.jpg\/v4-460px-4082-13-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/4082-13-2.jpg\/v4-728px-4082-13-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    을 입력하세요. 이는 단락을 여는 태그입니다. 단락 텍스트는 보통 크기의 텍스트로 표시됩니다.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/49\/4082-14-2.jpg\/v4-460px-4082-14-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/49\/4082-14-2.jpg\/v4-728px-4082-14-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    웹페이지에 대한 설명이나 공유하고 싶은 다른 정보를 입력할 수 있습니다.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/92\/4082-15-2.jpg\/v4-460px-4082-15-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/92\/4082-15-2.jpg\/v4-728px-4082-15-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    이는 단락을 닫는 태그입니다. 다음은 HTML 단락 텍스트의 예시입니다.: 
     < 
 p 
 > 
단락입니다. </ 
 p 
 >
    • 연속해서 여러 단락을 추가해 하나의 헤딩 아래로 단락들을 만들 수 있습니다.
    • <font color="color"> 및 </font> 태그를 사용해 텍스트의 색상을 변경할 수 있습니다. 원하는 색상을 "color" 부분에 입력하도록 하세요.(따옴표가 있어야 합니다.) 이 태그를 사용해 텍스트(예. 헤더)마다 색상을 다르게 할 수 있습니다. 예를 들어 단락 텍스트는 파란색으로 하려면 다음 코드를 쓰세요.: <p><font color="blue">고래는 위풍당당한 생명체입니다.</font></p>
    • HTML를 사용해 굵기, 기울기, 그리고 그 외 다른 텍스트 형식을 추가할 수 있습니다. 다음은 HTML 태그를 사용해 텍스트 형식을 만드는 예시입니다.: [3] 
       < 
 b 
 > 
굵은 텍스트 </ 
 b 
 > 
 < 
 i 
 > 
기울어진 텍스트 </ 
 i 
 > 
 < 
 u 
 > 
밑줄이 있는 텍스트 </ 
 u 
 > 
 < 
 sub 
 > 
아래 첨자 텍스트 </ 
 sub 
 > 
 < 
 sup 
 > 
위 첨자 텍스트 </ 
 sup 
 >
    • 꾸미는 것이 아닌 강조하기 위해 굵고 기울어진 텍스트를 사용할 경우, <b> 와 <i> 대신 <strong> 와 <em> 요소를 사용하세요. 그러면 스크린 리더 [4] 나 그 외 일부 브라우저에서 제공되는 리더 모드 [5] 기술이 사용될 때 웹페이지 인식이 더 잘됩니다.
    광고
파트 3
파트 3 의 6:

HTML에 그 외 요소 추가하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/4082-16-2.jpg\/v4-460px-4082-16-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/4082-16-2.jpg\/v4-728px-4082-16-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    다음의 방법으로 HTML에 이미지를 추가 할 수 있습니다.:
    • <img src= 를 입력해 이미지 태그를 여세요.
    • 따옴표 안에 있는 "=" 표시 다음에 URL를 복사해 붙여 넣으세요.
    • 이미지 URL 다음에 > 를 입력해 이미지 태그를 닫으세요. 예를 들어 이미지 URL이 "http://www.mypicture.com/lake"일 경우, 다음과 같이 입력하세요.: 
       < 
 img 
 src 
 = 
 "http://www.mypicture.com/lake.jpg" 
 >
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/74\/4082-17-2.jpg\/v4-460px-4082-17-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/74\/4082-17-2.jpg\/v4-728px-4082-17-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    다음의 방법으로 HTML에 링크를 추가할 수 있습니다.:
    • <a href= 를 입력해 링크 태그를 여세요.
    • 따옴표 안에 있는 "=" 표시 다음에 URL를 복사해 붙여 넣으세요.
    • URL 다음에 > 를 입력해 HTML의 링크 부분을 닫으세요.
    • 닫기 괄호 다음에 링크 이름을 입력하세요.
    • 링크 이름 다음에 </a> 를 입력해 HTML 링크를 닫으세요. [6] 다음은 페이스북 링크를 추가한 예시입니다. 
       < 
 a 
 href 
 = 
 "https://www.facebook.com" 
 > 
페이스북 </ 
 a 
 > 
.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d0\/4082-18-2.jpg\/v4-460px-4082-18-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d0\/4082-18-2.jpg\/v4-728px-4082-18-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    선 을 추가해 HTML를 분리하세요. <br> 를 입력해 HTML을 분리하는 선을 추가할 수 있습니다. 그러면 페이지를 다른 부분으로 나눌 수 있는 가로 선이 생깁니다.
    광고
파트 4
파트 4 의 6:

색상 변경하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/4082-19-3.jpg\/v4-460px-4082-19-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/4082-19-3.jpg\/v4-728px-4082-19-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    월드 와이드 웹 컨소시엄(W3C)이 관리하는 공식 색상 목록은 https://www.w3.org/wiki/CSS/Properties/color/keywords 에서 볼 수 있습니다. 각 색상마다 정식 명칭과 6자리의 16진 코드 및 십진법 값이 있습니다. 웹페이지 요소에 이 색상 값을 사용할 수 있습니다. 다음 예시에서는 색상 명칭을 사용할 것입니다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/4082-20-3.jpg\/v4-460px-4082-20-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/4082-20-3.jpg\/v4-728px-4082-20-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    태그에 [[ |배경 색상을 설정 하세요. 이는 태그에 style 을 추가해 할 수 있습니다. 페이지 전체 배경색을 라벤더 로 한다고 가정해 보세요:
    • <body style="background-color:lavender;">
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/4082-21-3.jpg\/v4-460px-4082-21-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/4082-21-3.jpg\/v4-728px-4082-21-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    모든 태그에 텍스트 색상을 설정 하세요. style 를 사용해 특정 태그 안에 있는 모든 텍스트의 색상을 지정할 수 있습니다. 예를 들어 <p> 태그 중 하나의 텍스트를 미드나잇블루 로 한다고 가정해 보세요:
    • <p style="color:midnightblue;">
    • <p> 태그 안에 있는 텍스트만 이 색상으로 변경됩니다. 나중에 또 다른 <p> 태그의 텍스트도 midnightblue 로 하고 싶다면 이 스타일 조합을 사용해야 합니다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/35\/4082-22-3.jpg\/v4-460px-4082-22-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/35\/4082-22-3.jpg\/v4-728px-4082-22-3.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    바디 태그의 배경색을 설정하는 것과 유사한 방법으로 다른 태그의 배경색도 설정할 수 있습니다. <p> 의 배경색은 연회색 , H1 헤더의 배경색은 연하늘색 으로 한다고 가정하면 다음과 같이 할 수 있습니다.:
    • <p style="background-color:lightgrey;">
    • <h1 style="background-color:lightskyblue;">
    광고
파트 5
파트 5 의 6:

HTML 문서 닫기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/57\/4082-19-2.jpg\/v4-460px-4082-19-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/57\/4082-19-2.jpg\/v4-728px-4082-19-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    를 입력해 바디를 닫으세요. HTML 문서 바디에 텍스트, 이미지, 그리고 그 외 요소들을 모두 추가했다면 문서 하단에 이 태그를 입력해 HTML 문서 바디를 닫으세요.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/4082-20-2.jpg\/v4-460px-4082-20-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/4082-20-2.jpg\/v4-728px-4082-20-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    를 입력해 HTML 문서를 닫으세요. HTML 바디 닫기 태그 아래이자 HTML 문서 마지막에 이 태그를 입력하세요. 이는 이 태그 이후로는 더 이상 HTML 코드가 없다는 것을 알리는 것입니다. HTML 문서 전체는 다음과 같이 보여야 합니다.: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
위키하우 팬 페이지 </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
제 페이지에 오신 걸 환영합니다! </ 
 h1 
 > 
 < 
 p 
 > 
이 곳은 위키하우 팬 페이지입니다. 편하게 즐기세요! </ 
 p 
 > 
 < 
 h2 
 > 
중요한 날짜 </ 
 h2 
 > 
 < 
 p 
 >< 
 i 
 > 
2019년 1월 15일 </ 
 i 
 > 
- 위키하우 생일 </ 
 p 
 > 
 < 
 h2 
 > 
링크 </ 
 h2 
 > 
 < 
 p 
 > 
다음은 위키하우 링크입니다.: < 
 a 
 href 
 = 
 "http://www.wikihow.com" 
 > 
wikiHow </ 
 a 
 ></ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    광고
파트 6
파트 6 의 6:

웹 페이지 저장 및 열기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b9\/4082-21-2.jpg\/v4-460px-4082-21-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b9\/4082-21-2.jpg\/v4-728px-4082-21-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    화면 상단에서 포맷 메뉴를 클릭한 다음, 드롭 다운 메뉴에서 일반 텍스트 만들기 를 클릭하세요.
    • 윈도우에서는 이 단계를 하지 않아도 되며 할 수도 없습니다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/09\/4082-22-2.jpg\/v4-460px-4082-22-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/4082-22-2.jpg\/v4-728px-4082-22-2.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":539,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    을 클릭하세요. 이는 화면 상단 메뉴 막대에 있습니다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/4082-23-2.jpg\/v4-460px-4082-23-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/4082-23-2.jpg\/v4-728px-4082-23-2.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":539,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    을 클릭하세요. 이는 "파일" 드롭다운 메뉴에 있습니다.
    • 다른 방법으로는 Ctrl + S (윈도우)나 ⌘ Command + S (맥)을 눌러서 할 수도 있습니다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/4082-24-2.jpg\/v4-460px-4082-24-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/4082-24-2.jpg\/v4-728px-4082-24-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    "파일 이름"(윈도우)나 "이름"(맥) 텍스트 상자에 원하는 문서 이름을 입력하세요.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/89\/4082-25-2.jpg\/v4-460px-4082-25-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/89\/4082-25-2.jpg\/v4-728px-4082-25-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    문서를 텍스트 파일에서 HTML 파일로 변경해야 합니다. 다음의 방법으로 문서 형식을 변경하세요.:
    • 윈도우 - "파일 형식" 드롭 다운 박스를 클릭한 후 모든 파일 을 클릭한 다음, 파일 이름 끝에 .html 를 입력하세요.
    • 맥 OS - 파일 이름 끝에 있는 .txt 를 .html 로 변경하세요.
    • 크롬 OS - "다른 이름으로 저장" 버튼을 클릭하세요. 파일 이름 끝에 .html 를 입력하세요. 파일 이름은 원하는 대로 할 수 있습니다.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/4082-26-2.jpg\/v4-460px-4082-26-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/4082-26-2.jpg\/v4-728px-4082-26-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    을 클릭하세요. 이는 창의 하단에 있습니다. 그러면 HTML 파일이 생깁니다.
    • HTML 파일은 보통 기본 설정된 웹 브라우저로 열 수 있습니다.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d7\/4082-27-2.jpg\/v4-460px-4082-27-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d7\/4082-27-2.jpg\/v4-728px-4082-27-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    이제 웹 브라우저에서 HTML 파일을 열어 웹페이지를 볼 수 있습니다.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/14\/4082-28-2.jpg\/v4-460px-4082-28-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/4082-28-2.jpg\/v4-728px-4082-28-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    대부분의 경우, HTML 문서를 더블 클릭해 열 수 있습니다. 더블 클릭을 했는데 문서에 오류가 생길 경우, 다음과 같이 하세요.:
    • 윈도우 – 문서를 오른쪽 클릭하고 연결 프로그램 을 선택한 다음, 원하는 브라우저를 클릭하세요.
    • 맥 – 문서를 한번 클릭하고 파일 을 클릭한 후, 연결 프로그램 을 선택한 다음, 원하는 브라우저를 클릭하세요.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b3\/4082-29-2.jpg\/v4-460px-4082-29-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b3\/4082-29-2.jpg\/v4-728px-4082-29-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 페이지에서 오류가 발견될 수도 있습니다. HTML 문서의 텍스트를 편집해 이를 수정할 수 있습니다.:
    • 윈도우에서는 문서를 오른쪽 클릭해 드롭다운 메뉴에서 편집 을 클릭하세요.(메모장++가 설치되어 있다면 메모장++으로 편집 이라고 되어 있을 수도 있습니다.)
    • 맥에서는 문서를 클릭하고 파일 을 클릭한 후, 연결 프로그램 을 선택한 다음, 텍스트 편집기 를 클릭하세요. 문서를 텍스트 편집기로 끌어올 수도 있습니다.
    • 크롬북에서는 텍스트 앱을 닫고 파일을 연 후 해당 파일을 찾아 클릭하세요.
    광고

팁

  • 태그는 항상 열기 태그와 거울 형태로 닫기 태그가 있어야 합니다. 예를 들면, <tag1><tag2> 는 </tag2></tag1> 로 닫아야 합니다.
  • <marquee></marquee> 태그를 사용해 웹사이트 사이드 스크롤 텍스트를 추가할 수 있지만 일부 브라우저에서는 이 태그가 인식되지 않을 수도 있습니다.
  • 많은 사람들은 메모장++를 사용해 코드를 쓰고 편집합니다.
  • 이미지를 페이지 중앙에 오게 하려면, img 태그 내 이미지 이름 다음에 <class="center"> 를 입력하세요.(예. <img src="URL" class="center"> ).
광고

경고

  • 웹페이지에 이미지를 업로드할 경우, Imgur와 같은 곳에 본인의 이미지를 호스팅 하는 것이 가장 좋습니다. 다른 사람의 사진을 게시하면 저작권 침해가 될 수도 있습니다.
광고

관련 위키하우

유튜브 비디오 다운받는 방법
PDF 번역하는 방법
와이파이 비밀번호 변경하는 법
특정 웹사이트가 안 열릴 때 해결하는 법
마인크래프트 스킨을 변경하는 방법
내 컴퓨터의 IP 주소 찾는 법
디스코드에서 친구를 추가하는 방법
유튜브 동영상 다운로드하는 7가지 방법
스포티파이에서 음악 다운받는 법
인스타그램 팔로워 차단 및 차단 해제 방법
영화 다운 받는 방법
인스타그램 사용하는 방법
공유기 두 대 연결하는 법
구글 크롬을 기본 브라우저로 설정하는 방법
광고

출처

  1. ↑ https://www.w3schools.com/howto/howto_website.asp
  2. ↑ https://www.w3schools.com
  3. ↑ https://www.w3schools.com/html/html_formatting.asp
  4. ↑ https://alistapart.com/article/conversational-semantics/
  5. ↑ https://alistapart.com/article/accessibility-for-vestibular/#section6
  6. ↑ https://www.w3schools.com/html/html_links.asp

이 위키하우에 대하여

다른 언어
이 문서는 99,781 번 조회 되었습니다.

이 글이 도움이 되었나요?

광고