HTML body 사용 방법 예제

HTML body 사용 방법과 작성 방법을 알아보겠습니다.

body 요소에 콘텐츠 내용을 작성

 body 요소는 실제 웹 페이지로 내용을 작성하는 곳입니다.

<!DOCTYPE html> 
<html lang="kr"> 
  <head> 	
    <meta charset="UTF-8"> 	
    <title>테스트</title>
  </head> 
  <body> 	
    <h1>웹 사이트</h1> 
  </body> 
</html>

<h1> 태그는 제목 요소입니다. 제목 요소가 있고 그 밑에 문장들을 작성하는 것이 기본적인 구조입니다.

h는 [heading]이 약자입니다.

제목 요소는 h1 > h2 > h3 > h4 > h5 > h6 순서로 존재합니다.

큰 제목, 중간 제목, 작은 제목으로 점점 작아지게 됩니다.

다음은 제목 요소 밑에 문장을 넣어 보도록 하겠습니다.

<!DOCTYPE html> 
<html lang="kr"> 
  <head> 	
    <meta charset="UTF-8"> 	
    <title>테스트</title> 
  </head> 
  <body> 	
    <h1>웹 사이트</h1> 	
    <p>
       이 웹 사이트는 테스트를 위한 사이트입니다. 
       테스트 내용을 작성해주세요. 
       다음과 같이 작성 했습니다.
    </p> 
   </body> 
</html>

문장은 <p> 태그를 사용해 표시합니다. (정확하게 말하면 단락입니다.)

저장하고 브라우저에서 표시해 보기

그러면 지금까지 작성한 것을 저장해 보도록 하겠습니다.

[UTF-8] 문자 코드로 저장합니다.

알기 쉬운 장소에 [test]라는 폴더를 작성하고 그 안에 파일을 저장합니다.

VScode를 사용하는 경우에는 기본값이 [UTF-8]로 되어있습니다.

[index.html]이라는 파일명으로 저장을 합니다.

메모장을 사용하는 경우에는 문자 코드를 [UTF-8]로 지정하고 [index.html]이라는 파일명으로 저장을 합니다.

저장한 파일을 Chrome 등의 브라우저에 드래그 앤 드롭을 합니다. 

 

표시 예

표시되었나요? 이 파일은 로컬에 있기 때문에 자신의 컴퓨터에서만 볼 수 있는 페이지입니다.

서버를 렌탈하고 파일을 서버에 업로드하는 것으로, 전 세계에 웹 사이트를 공개할 수 있습니다.

코멘트 아웃 사용해 보기

 HTML에는 페이지에는 표시되지 않는 메모를 적을 수 있습니다.

<!-- 이 내용을 페이지에 표시하지 않습니다. -->

 

<!– ~ –>로 감싸인 내용은 웹 페이지에서는 표시되지 않습니다.

무언가 메모를 남기고 싶다던가 웹 페이지에 표시하고 싶지 않은 부분 등에 사용됩니다.

<!DOCTYPE html> 
<html lang="kr"> 
  <head>
    <meta charset="UTF-8">
    <title>테스트</title> 
  </head>
  <body>
    <h1>웹 사이트</h1>
      <p>
        이 웹 사이트는 테스트를 위한 사이트입니다. 
        테스트 내용을 작성해주세요. 
        다음과 같이 작성 했습니다.
      </p>
      <!-- 이 내용을 페이지에 표시하지 않습니다. -->
  </body>
</html>

위처럼 작성하고 저장한 뒤 브라우저를 갱신(F5 또는 Ctrl + R)해보겠습니다.

좀 전에 작성한 부분은 표시되지 않습니다.

표시 예

댓글