PDF 다운로드
PDF 다운로드
이번 위키하우에서는 HTML(hypertext markup language)을 사용하여 간단한 웹 페이지 만드는 법을 알려드립니다. HTML 은 웹페이지 구조를 만드는 월드 와이드 웹의 중요한 요소 중 하나입니다. 웹페이지를 만들고 나면 HTML 문서로 저장하여 웹브라우저에서 볼 수 있습니다. HTML 페이지는 윈도우나 맥 컴퓨터에 있는 기본 텍스트 편집기를 사용해 만들 수 있습니다.
단계
-
텍스트 편집기를 여세요. 윈도우 운영체제의 컴퓨터에서는 보통 메모장이나 메모장++를 사용하며 맥 OS 사용자는 텍스트 편집기를, 크롬 OS 사용자는 텍스트를 사용하게 됩니다:
- 윈도우 - 시작 를 연 다음, 메모장 또는 메모장++ 을 입력한 후, 창의 상단에서 메모장 또는 "메모장++ 나 서브라임"을 클릭하세요.
- 맥 OS - 스폿라이트 를 클릭한 후, 텍스트 편집기 를 입력한 다음, 검색 결과 상단에서 텍스트 편집기 를 더블 클릭하세요.
- 크롬 OS – 실행기를 연 다음 텍스트를 클릭하세요.(Code Pad라고 되어있는 아이콘입니다).
-
<html> 을 입력한 후 ↵ Enter 를 누르세요. 이는 HTML 코드를 여는 태그입니다.
-
<head> 를 입력한 후 ↵ Enter 를 누르세요. 이는 HTML 헤드를 여는 태그입니다. 보통 HTML 헤드 정보는 웹 페이지에 표시되지 않습니다. 이 정보에는 타이틀, 메타 데이터, CSS 스타일 시트, 그리고 그 외 스크립트 언어 등이 포함됩니다. [2] X 출처 검색하기
-
<title> 를 입력하세요. 이는 페이지의 타이틀을 추가하는 태그입니다.
-
웹페이지 타이틀을 입력하세요. 웹페이지에 원하는 어떤 타이틀이라도 입력할 수 있습니다.
-
</title> 을 입력한 후 ↵ Enter 을 누르세요. 이는 타이틀을 닫는 태그입니다.
-
</head> 을 입력한 후 ↵ Enter 를 누르세요. 이는 헤드를 닫는 태그입니다. HTML 코드는 다음과 같이 보여야 합니다.
<!DOCTYPE html> < html > < head > < title > My Web Page </ title > </ head >
광고
-
"Head" 닫기 태그 아래에 <body> 를 입력하세요. 이는 HTML 문서의 바디를 여는 태그입니다. HTML 바디에 있는 모든 내용은 웹페이지에 표시됩니다.
-
<h1> 를 입력하세요. 이는 HTML 문서에 헤딩을 추가하는 태그입니다. 헤딩은 크고 굵은 텍스트로 일반적으로 HTML 문서 상단에 위치하게 됩니다.
-
페이지의 헤딩을 입력하세요. 페이지 타이틀이나 환영 인사를 입력할 수 있습니다.
-
헤딩 텍스트 다음에 </h1> 를 입력한 후 ↵ Enter 를 누르세요. 이는 헤딩을 닫는 태그입니다.
- 진행하면서 헤딩을 추가하세요. <h1></h1>
부터 <h6></h6>
태그를 사용해 여섯 가지의 헤딩을 만들 수 있습니다. 이 태그들로 크기가 다른 헤딩을 만들 수 있습니다. 예를 들어 연속해서 크기가 다른 세 가지 헤딩을 만들려면 다음과 같이 쓸 수 있을 것입니다.:
< h1 > 제 페이지에 오신 걸 환영합니다! </ h1 > < h2 > 저 이름은 밥입니다. </ h2 > < h3 > 제 페이지를 좋아하셨으면 합니다. </ h3 >
- 헤딩은 텍스트의 우선순위나 중요도를 나타냅니다. 하지만 작은 헤딩을 사용하고 싶다면 반드시 큰 헤딩을 사용하지 않아도 됩니다. 게시물에 H1 없이 바로 H3을 사용할 수도 있습니다.
- 진행하면서 헤딩을 추가하세요. <h1></h1>
부터 <h6></h6>
태그를 사용해 여섯 가지의 헤딩을 만들 수 있습니다. 이 태그들로 크기가 다른 헤딩을 만들 수 있습니다. 예를 들어 연속해서 크기가 다른 세 가지 헤딩을 만들려면 다음과 같이 쓸 수 있을 것입니다.:
-
<p> 을 입력하세요. 이는 단락을 여는 태그입니다. 단락 텍스트는 보통 크기의 텍스트로 표시됩니다.
-
텍스트를 입력하세요. 웹페이지에 대한 설명이나 공유하고 싶은 다른 정보를 입력할 수 있습니다.
-
텍스트 다음에 </p> 를 입력한 후 ↵ Enter 를 누르세요. 이는 단락을 닫는 태그입니다. 다음은 HTML 단락 텍스트의 예시입니다.:
< p > 단락입니다. </ p >
- 연속해서 여러 단락을 추가해 하나의 헤딩 아래로 단락들을 만들 수 있습니다.
- <font color="color"> 및 </font> 태그를 사용해 텍스트의 색상을 변경할 수 있습니다. 원하는 색상을 "color" 부분에 입력하도록 하세요.(따옴표가 있어야 합니다.) 이 태그를 사용해 텍스트(예. 헤더)마다 색상을 다르게 할 수 있습니다. 예를 들어 단락 텍스트는 파란색으로 하려면 다음 코드를 쓰세요.: <p><font color="blue">고래는 위풍당당한 생명체입니다.</font></p>
- HTML를 사용해 굵기, 기울기, 그리고 그 외 다른 텍스트 형식을 추가할 수 있습니다.
다음은 HTML 태그를 사용해 텍스트 형식을 만드는 예시입니다.: [3]
X
출처 검색하기
< b > 굵은 텍스트 </ b > < i > 기울어진 텍스트 </ i > < u > 밑줄이 있는 텍스트 </ u > < sub > 아래 첨자 텍스트 </ sub > < sup > 위 첨자 텍스트 </ sup >
- 꾸미는 것이 아닌 강조하기 위해 굵고 기울어진 텍스트를 사용할 경우, <b> 와 <i> 대신 <strong> 와 <em> 요소를 사용하세요. 그러면 스크린 리더 [4] X 출처 검색하기 나 그 외 일부 브라우저에서 제공되는 리더 모드 [5] X 출처 검색하기 기술이 사용될 때 웹페이지 인식이 더 잘됩니다.
광고
-
페이지에 이미지를 추가하세요. 다음의 방법으로 HTML에 이미지를 추가 할 수 있습니다.:
- <img src= 를 입력해 이미지 태그를 여세요.
- 따옴표 안에 있는 "=" 표시 다음에 URL를 복사해 붙여 넣으세요.
- 이미지 URL 다음에 >
를 입력해 이미지 태그를 닫으세요. 예를 들어 이미지 URL이 "http://www.mypicture.com/lake"일 경우, 다음과 같이 입력하세요.:
< img src = "http://www.mypicture.com/lake.jpg" >
-
다른 페이지 링크를 연결하세요. 다음의 방법으로 HTML에 링크를 추가할 수 있습니다.:
- <a href= 를 입력해 링크 태그를 여세요.
- 따옴표 안에 있는 "=" 표시 다음에 URL를 복사해 붙여 넣으세요.
- URL 다음에 > 를 입력해 HTML의 링크 부분을 닫으세요.
- 닫기 괄호 다음에 링크 이름을 입력하세요.
- 링크 이름 다음에 </a>
를 입력해 HTML 링크를 닫으세요. [6]
X
출처 검색하기
다음은 페이스북 링크를 추가한 예시입니다.
< a href = "https://www.facebook.com" > 페이스북 </ a > .
-
선 을 추가해 HTML를 분리하세요. <br> 를 입력해 HTML을 분리하는 선을 추가할 수 있습니다. 그러면 페이지를 다른 부분으로 나눌 수 있는 가로 선이 생깁니다.광고
-
공식 HTML 색이름과 색 코드 목록을 확인하세요. 월드 와이드 웹 컨소시엄(W3C)이 관리하는 공식 색상 목록은 https://www.w3.org/wiki/CSS/Properties/color/keywords 에서 볼 수 있습니다. 각 색상마다 정식 명칭과 6자리의 16진 코드 및 십진법 값이 있습니다. 웹페이지 요소에 이 색상 값을 사용할 수 있습니다. 다음 예시에서는 색상 명칭을 사용할 것입니다.
-
<body> 태그에 [[ |배경 색상을 설정 하세요. 이는 태그에 style 을 추가해 할 수 있습니다. 페이지 전체 배경색을 라벤더 로 한다고 가정해 보세요:
- <body style="background-color:lavender;">
-
모든 태그에 텍스트 색상을 설정 하세요. style 를 사용해 특정 태그 안에 있는 모든 텍스트의 색상을 지정할 수 있습니다. 예를 들어 <p> 태그 중 하나의 텍스트를 미드나잇블루 로 한다고 가정해 보세요:
- <p style="color:midnightblue;">
- <p> 태그 안에 있는 텍스트만 이 색상으로 변경됩니다. 나중에 또 다른 <p> 태그의 텍스트도 midnightblue 로 하고 싶다면 이 스타일 조합을 사용해야 합니다.
-
헤더나 단락의 배경색을 설정하세요. 바디 태그의 배경색을 설정하는 것과 유사한 방법으로 다른 태그의 배경색도 설정할 수 있습니다. <p> 의 배경색은 연회색 , H1 헤더의 배경색은 연하늘색 으로 한다고 가정하면 다음과 같이 할 수 있습니다.:
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">
광고
-
</body> 를 입력해 바디를 닫으세요. HTML 문서 바디에 텍스트, 이미지, 그리고 그 외 요소들을 모두 추가했다면 문서 하단에 이 태그를 입력해 HTML 문서 바디를 닫으세요.
-
</html> 를 입력해 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 >
광고
-
문서를 일반 텍스트 문서로 변환하세요(맥 사용자만 해당됩니다). 화면 상단에서 포맷 메뉴를 클릭한 다음, 드롭 다운 메뉴에서 일반 텍스트 만들기 를 클릭하세요.
- 윈도우에서는 이 단계를 하지 않아도 되며 할 수도 없습니다.
-
파일 을 클릭하세요. 이는 화면 상단 메뉴 막대에 있습니다.
-
다른 이름으로 저장 을 클릭하세요. 이는 "파일" 드롭다운 메뉴에 있습니다.
- 다른 방법으로는 Ctrl + S (윈도우)나 ⌘ Command + S (맥)을 눌러서 할 수도 있습니다.
-
HTML 문서의 이름을 입력하세요. "파일 이름"(윈도우)나 "이름"(맥) 텍스트 상자에 원하는 문서 이름을 입력하세요.
-
문서 파일 형식을 변경하세요. 문서를 텍스트 파일에서 HTML 파일로 변경해야 합니다. 다음의 방법으로 문서 형식을 변경하세요.:
- 윈도우 - "파일 형식" 드롭 다운 박스를 클릭한 후 모든 파일 을 클릭한 다음, 파일 이름 끝에 .html 를 입력하세요.
- 맥 OS - 파일 이름 끝에 있는 .txt 를 .html 로 변경하세요.
- 크롬 OS - "다른 이름으로 저장" 버튼을 클릭하세요. 파일 이름 끝에 .html 를 입력하세요. 파일 이름은 원하는 대로 할 수 있습니다.
-
저장 을 클릭하세요. 이는 창의 하단에 있습니다. 그러면 HTML 파일이 생깁니다.
- HTML 파일은 보통 기본 설정된 웹 브라우저로 열 수 있습니다.
-
텍스트 편집기를 닫으세요. 이제 웹 브라우저에서 HTML 파일을 열어 웹페이지를 볼 수 있습니다.
-
웹 브라우저에서 HTML 문서를 여세요. 대부분의 경우, HTML 문서를 더블 클릭해 열 수 있습니다. 더블 클릭을 했는데 문서에 오류가 생길 경우, 다음과 같이 하세요.:
- 윈도우 – 문서를 오른쪽 클릭하고 연결 프로그램 을 선택한 다음, 원하는 브라우저를 클릭하세요.
- 맥 – 문서를 한번 클릭하고 파일 을 클릭한 후, 연결 프로그램 을 선택한 다음, 원하는 브라우저를 클릭하세요.
-
필요에 따라 HTML 문서를 편집하세요. HTML 페이지에서 오류가 발견될 수도 있습니다. HTML 문서의 텍스트를 편집해 이를 수정할 수 있습니다.:
- 윈도우에서는 문서를 오른쪽 클릭해 드롭다운 메뉴에서 편집 을 클릭하세요.(메모장++가 설치되어 있다면 메모장++으로 편집 이라고 되어 있을 수도 있습니다.)
- 맥에서는 문서를 클릭하고 파일 을 클릭한 후, 연결 프로그램 을 선택한 다음, 텍스트 편집기 를 클릭하세요. 문서를 텍스트 편집기로 끌어올 수도 있습니다.
- 크롬북에서는 텍스트 앱을 닫고 파일을 연 후 해당 파일을 찾아 클릭하세요.
광고
팁
- 태그는 항상 열기 태그와 거울 형태로 닫기 태그가 있어야 합니다. 예를 들면,
<tag1><tag2>
는</tag2></tag1>
로 닫아야 합니다. -
<marquee></marquee>
태그를 사용해 웹사이트 사이드 스크롤 텍스트를 추가할 수 있지만 일부 브라우저에서는 이 태그가 인식되지 않을 수도 있습니다. - 많은 사람들은 메모장++를 사용해 코드를 쓰고 편집합니다.
- 이미지를 페이지 중앙에 오게 하려면, img
태그 내 이미지 이름 다음에
<class="center">
를 입력하세요.(예.<img src="URL" class="center">
).
광고
경고
- 웹페이지에 이미지를 업로드할 경우, Imgur와 같은 곳에 본인의 이미지를 호스팅 하는 것이 가장 좋습니다. 다른 사람의 사진을 게시하면 저작권 침해가 될 수도 있습니다.
광고
출처
- ↑ https://www.w3schools.com/howto/howto_website.asp
- ↑ https://www.w3schools.com
- ↑ https://www.w3schools.com/html/html_formatting.asp
- ↑ https://alistapart.com/article/conversational-semantics/
- ↑ https://alistapart.com/article/accessibility-for-vestibular/#section6
- ↑ https://www.w3schools.com/html/html_links.asp
이 위키하우에 대하여
이 문서는 99,878 번 조회 되었습니다.
광고