본문으로 건너뛰기
실습하기

body 태그

<body> 태그는 웹 페이지에 실제로 표시되는 내용을 담습니다.

사용자와 상호작용하는 모든 웹 콘텐츠는 body 태그 안에 위치해야 합니다.

<body> 태그 안에는 다음과 같은 요소들이 포함될 수 있습니다.


텍스트 요소​

웹페이지에서 텍스트 내용을 표시할 때 사용하는 태그들입니다.

  • <h1>, <h2> ... <h6>: h는 Heading(제목)의 약자로, 가장 큰 제목인 h1부터 가장 작은 제목인 h6까지 표현할 수 있습니다.

  • <p>: 텍스트로 구성된 단락(Paragraph)을 나타내는 태그입니다.

제목과 단락 표시
<body>
  <h1>환영합니다!</h1>
  <p>이곳은 나의 첫 웹페이지입니다.</p>
</body>

이미지, 비디오, 오디오​

웹페이지에 멀티미디어 콘텐츠를 표시할 때는 아래와 같은 태그들을 사용합니다.

  • <img>: 이미지를 표시하는 태그

  • <video>: 비디오를 표시하는 태그

  • <audio>: 오디오를 표시하는 태그

img, video, audio 태그
<body>
  <img src="myimage.jpg" alt="나의 사진" />
  <video src="myvideo.mp4" controls></video>
  <audio src="mysong.mp3" controls></audio>
</body>

목록​

웹페이지에서 순서가 있거나 없는 목록을 표시합니다.

  • <ul>: 순서 없는 목록 (Unordered List)

  • <ol>: 번호가 매겨지는 순서 있는 목록 (Ordered List)

  • <li>: 목록 내의 항목 (List Item)

ul, li 태그
<body>
  <!-- 순서 없는 목록 -->
  <ul>
    <li>사과</li>
    <li>바나나</li>
  </ul>
</body>

링크​

  • <a>: 다른 페이지나 웹사이트로 이동할 수 있는 하이퍼링크를 생성합니다.
a 태그
<body>
  <a href="https://www.example.com">example.com로 이동</a>
</body>

실습​

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!