PDF 다운로드PDF 다운로드X
이 글은 위키하우 편집팀과 전문 조사원이 공동 작성하였으며 정확성 검토가 완료 되었습니다.
위키하우 콘텐츠 관리팀은 작성된 모든 글이 위키하우 글 작성 규정을 준수하는지 꾸준히 검토합니다.
조회수 97,868회
이번 위키하우에서는 HTML(hypertext markup language)을 사용하여 간단한 웹 페이지 만드는 법을 알려드립니다. HTML은 웹페이지 구조를 만드는 월드 와이드 웹의 중요한 요소 중 하나입니다. 웹페이지를 만들고 나면 HTML 문서로 저장하여 웹브라우저에서 볼 수 있습니다. HTML 페이지는 윈도우나 맥 컴퓨터에 있는 기본 텍스트 편집기를 사용해 만들 수 있습니다.
단계
텍스트 편집기를 여세요. 윈도우 운영체제의 컴퓨터에서는 보통 메모장이나 메모장++를 사용하며 맥 OS 사용자는 텍스트 편집기를, 크롬 OS 사용자는 텍스트를 사용하게 됩니다:- 윈도우 - 시작 를 연 다음, 메모장 또는 메모장++을 입력한 후, 창의 상단에서 메모장 또는 "메모장++ 나 서브라임"을 클릭하세요.
- 맥 OS - 스폿라이트 를 클릭한 후, 텍스트 편집기를 입력한 다음, 검색 결과 상단에서 텍스트 편집기를 더블 클릭하세요.
- 크롬 OS – 실행기를 연 다음 텍스트를 클릭하세요.(Code Pad라고 되어있는 아이콘입니다).
- 윈도우 - 시작
<!DOCTYPE html>를 입력한 후 ↵ Enter를 누르세요. 그러면 웹 브라우저가 이를 HTML 문서로 인식하게 됩니다.[1]
<html>을 입력한 후 ↵ Enter를 누르세요. 이는 HTML 코드를 여는 태그입니다.
<head>를 입력한 후 ↵ Enter를 누르세요. 이는 HTML 헤드를 여는 태그입니다. 보통 HTML 헤드 정보는 웹 페이지에 표시되지 않습니다. 이 정보에는 타이틀, 메타 데이터, CSS 스타일 시트, 그리고 그 외 스크립트 언어 등이 포함됩니다. [2]
<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]
<b>굵은 텍스트</b><i>기울어진 텍스트</i><u>밑줄이 있는 텍스트</u><sub>아래 첨자 텍스트</sub><sup>위 첨자 텍스트</sup>
- 꾸미는 것이 아닌 강조하기 위해 굵고 기울어진 텍스트를 사용할 경우, <b>와 <i> 대신 <strong>와 <em> 요소를 사용하세요. 그러면 스크린 리더[4]나 그 외 일부 브라우저에서 제공되는 리더 모드[5]기술이 사용될 때 웹페이지 인식이 더 잘됩니다.
광고
페이지에 이미지를 추가하세요. 다음의 방법으로 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] 다음은 페이스북 링크를 추가한 예시입니다.
<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">How.com.vn</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
이 글이 도움이 되었나요?
⚠️ 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.
- - 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.
광고
