< BODY > 태그에 관하여 💪

< BODY > 태그에 관하여 💪B4 Junior2022. 4. 30. 12:23@꿀젤리

Table of Contents

참고 할만한 문서

< body > 태그에 관한 공식 문서 👇👇👇👇

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body

<body>: The Document Body element - HTML: HyperText Markup Language | MDN

The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.

developer.mozilla.org

참고 할만한 영상

HTML, head, body 태그에 대해 알아보자!!! - 코딩온CODINGOn👇👇👇👇

https://www.youtube.com/watch?v=Jwv1cHhOz1g

< body > 태그는 html의 문서 내용을 나타내는 곳을 말합니다. 한 html 내부에 무조건 하나의 < body > 만 존재 해야합니다.

< body > 태그 안에 들어갈 수 있는 태그는 수도없이 많습니다.

너무 많은 태그가 존재하므로 대표적으로 쓰이는 태그 몇가지만을 다루겠습니다.

종류 별로 크게 나누자면

1. 구역을 나누는 태그

2. 미디어 객체를 넣는 태그

3. 텍스트를 다루는 태그

4. 테이블 관련 태그

5. 이동 태그 등 다양한 태그가 있습니다. 보다 자세한 태그를 찾는다면, 구글링 or MDN 문서를 참고하세요.

1. 구역을 나누는 태그

📌 < div >

div는 division의 약자로 구역을 분할한다는 태그입니다.

< div > 태그는 기본적 스타일을 수정하지 않는다면 너비는 html의 좌우 끝에서 끝까지를 차지하고 높이는 기본 글자 크기정도를 차지합니다.

  <body>
    <div>기본적으로 차지하게 되는 범위</div>
  </body>

< div > 의 크기의 조정 같은 것은 기본적으로 제공하는 태그의 속성으로도 조절 가능합니다.

  <body>
    <div style="height: 150px; width: 50%">크기를 조절한 범위</div>
    <div>기본적으로 차지하는 크기</div>
  </body>

파란색 주황색의 영역이 나뉘게 되는데 이것은 div 가 기본적으로 가지는 너비 영역이 좌우 100% 이기 때문에 정렬을 위한 속성인

float 속성을 이용해주면 주황색 박스를 없애고 div와 같은 줄에 다른 요소들이 위치 할 수 있게 해줍니다.

  <body>
    <div style="height: 150px; width: 50%; float: left">너비 50%</div>
    <div style="width: 30%; float: left">너비 30%</div>
  </body>

이런식으로 태그의 크기나 위치, 클래스명, 아이디명 등 태그가 가지는 성질을 바꾸는걸 태그의 속성 ( property ) 라고 합니다. 속성의 종류는 각 태그마다 다르며, 속성의 종류는 태그마다 다르기에 직접 찾으면서 공부하고 사용해보면서 공부해야합니다.

< span >

영역을 나누는 태그에는 < div > 말고도 존재합니다. < span > 태그는 기본적으로 차지하는 영역은 0 x 0 의 크기로 크기 자체가 없습니다. 그렇지만 < span > 태그는 태그 내부에 존재하는 요소의 크기 만큼의 자리를 차지하게 됩니다.

<body>
	<span></span>
</body>

  <body>
    <span> span 내부에 요소가 존재할 시의 크기 </span>
  </body>

< span > 태그도 < div > 태그 처럼 속성을 통한 조절로 성질을 변경 할 수 있습니다. 각 태그에 대한 자세한 내용, 속성에 대한 내용은 MDN의 문서를 참고하시거나 구글링을 통해서 찾아보면됩니다.

요소들을 배치하는 작업을 하게 되면

< div > 태그로 영역을 크게 분할 뒤 < div > 내부에서 영역을 나누게 될 경우 < span > 을 쓰거나 < div > 를 써서 세부적인 영역을 나누게 됩니다. 영역을 나누는데에는 < article > , < aside >, < footer > 등등 많은 태그가 있지만 이런 태그들은 semantic 태그로 불리우며 우선 < div > , < span > 에 대해 이해하고 전반적인 웹사이트 구성에 대해 공부를 한 뒤 공부하는게 좋습니다.

2. 미디어 객체를 넣는 태그 ( < img > , < video > , < audio > 등이 있지만 < img > 만을 다룹니다. )

📌 < IMG >

< img > 태그는 이미지를 삽입하는 태그입니다. 태그만으로는 의미가 크게 없습니다. 나타나는 것도 없습니다.

< img > 태그에 의미를 부여하기위해선 기본 속성을 사용해야만 합니다.

< img > 태그에는 필수적으로 쓰여야하는 속성이 있는데 이는 src 속성입니다.

src 속성은 어떤 이미지를 불러올지에 대한 속성인데, 값은 이미지의 주소가 되겠습니다.

<body>
	<img src="./beer.png" />
</body>

이런 식으로 src 속성에 주소값을 넣으면 되는데 주소값은 상대주소 절대주소라는 것이 있습니다. 구글링을 하면 관련된 많은 것이 있지만 간단하게 정리하면

상대주소 : 현재 내가 작업하는 파일의 위치를 기준으로 찾고자 하는 파일의 상대적인 위치

절대주소 : 현재 내가 작업하는 파일의 위치와 상관이 없이 그 파일이 위치하는 절대적인 위치

3. 텍스트를 다루는 태그

📌 < H1 > , < H2 > , < H3 > , < B > , etc..

<h1> , <h2> , <h3>, <b> 등등 너무 많은 태그가 존재하니 어떻게 사용하는지만 보이겠습니다.

  <body>
    <div>
      <h1>h1 태그입니다.</h1>
      <h2>h2 태그입니다.</h2>
      <h3>h3 태그입니다.</h3>
      <b> 태그입니다.</b>
    </div>
    일반 글씨입니다.
  </body>

사용법은 간단하고, 다양한 태그가 존재합니다.

글씨의 색을 바꾸거나 크기를 좀 더 자세하게 바꾸려고 하면 속성을 사용해야합니다.

<body>
	<h1 style="color: red">h1 태그입니다.</h1>
</body>

이런식으로 다양하게 조정 가능합니다.

4. 테이블 관련 태그

📌 < TABLE > , < THEAD >, < TFOOT > , < TBODY > , <TH > , < TR > , < TD > 등

자세한 설명은 아래 테이블로 대체하겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <style>
      table,
      th,
      td,
      thead {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>TABLE</h1>
    <table>
      <thead>
        <th colspan="3">thead</th>
        <tr>
          <td>thead-tr1-td1</td>
        </tr>
      </thead>
      <tbody>
        <th colspan="3">tbody</th>
        <tr>
          <td>tbody-tr1 - td1</td>
        </tr>
        <tr>
          <td>tbody-tr2 - td1</td>
          <td>tbody-tr2 - td2</td>
          <td>tbody-tr3 - td3</td>
        </tr>
      </tbody>
      <tfoot>
        <th colspan="3">tfoot</th>
        <tr>
          <td>tfoot-tr1-td1</td>
        </tr>
        <tr>
          <td>tfoot-tr2-td1</td>
        </tr>
        <tr>
          <td>tfoot-tr3-td1</td>
          <td>tfoot-tr3-td2</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

프로그래밍 언어의 배열을 생각하시면서 보면 편합니다.

5. 이동 태그

📌 < a >

이 태그는 하이퍼링크를 내장한 태그입니다.

하이퍼링크란? : 하이퍼링크가 내재 된 어떠한 요소를 작동시켜서 연결된 다른 사이트 , 위치 등으로 포커스를 이동시키는 것

이 태그도 단독으로 쓰이면 의미가 없는 태그이고 반드시 속성을 작성해야 의미가 생기는 태그입니다.

<!DOCTYPE html>
<html lang="UTF-8">
  <head>
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.naver.com">네이버로 날아가보자</a>
  </body>
</html>

이 태그가 덮고 있는 범위에 해당되는 요소를 누르면 href 속성에 작성된 위치로 넘어가게 됩니다.

이 경우에는 https://www.naver.com 네이버로 이동되게 하는 경우입니다.

그리고 <a> 태그는 텍스트에도 사용 가능하지만 기타 다른 요소와도 사용 가능합니다.

아까 만들었던 맥주 사진위에 <a> 태그를 사용해봤습니다.

<!DOCTYPE html>
<html lang="UTF-8">
  <head>
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.naver.com"><img src="./beer.png" width="200px;" /></a>
  </body>
</html>

이 사진도 누르게 된다면 https://www.naver.com 으로 이동하게 됩니다.

<a>태그가 잘 적용되었는지 보려면 내가 <a> 태그를 적용한 요소 위에 마우스를 가져다 댔을 때

이 모양이 나오면 잘 적용된 것입니다.

이렇게 간단한 웹사이트를 제작 할 때 필요한 <body> 내부의 태그들을 알아봤습니다.

사실 다른 모든 태그들이 이런 태그들을 기본으로 뻗어나가는 태그들이라 이 태그들에 대해서만 자세히 알아도 다른 태그들은 공부하기도 쉽고 사용하기도 쉽습니다.

이번에 <body> 태그를 적용해보며 글을 작성하다보니 애매모호했던 개념이 한두가지 있었는데 잡혀서 좋았습니다.

얼른 화려한 웹사이트를 만들고 싶으시겠지만 기본을 다루지 않는다면 결국 화려한 웹사이트를 만드는 툴을 절대로 못다루기에 기본기부터 차근차근하시길 바래요.

그럼 오늘도 XP 🔥🔥🔥🔥

'B4 Junior' 카테고리의 다른 글

Git 기초 ( git init 🏃‍♂️) (0)	2022.05.02
Git 기초 ( git 이란 , git 과 github 차이 🐙 ) (0)	2022.05.01
코드스테이츠 블록체인 과정 3일차 후기 💻 (0)	2022.04.29
코드스테이츠 블록체인 과정 2일차 후기 💻 (0)	2022.04.28
코드스테이츠 블록체인 과정 1일차 후기 💻 (0)	2022.04.28