Enterprise Teaho

  • Web
  • HTML

HTML의 기본 (4)

My 23th Post


HTML의 기본 (4)

by Enterprise Kim.T.H

const html_listTag = (tag) => {
  console.log("HTML의 다양한 태그에 대해서 알아봅시다.");
};

1. HTML의 대표적인 태그들의 종류는 무엇이 있을까?

지금까지 배운 리스트 태그, Semantic태그 그리고 HTML의 기본 구성태그들만을 이용해도 충분히

웹사이트의 레이아웃을 구성할 수 있습니다.

하지만 기본적인 태그만을 이용하면 레이아웃이 너무 단조롭게 구성되게 됩니다.

따라서 사진을 띄우고, 글의 단락을 구분하고, 글씨 크기를 조절하는 등의 태그를 오늘 배워보려고 합니다.

2. 제목, 머릿말 태그

가장 먼저 글씨 크기를 정해진 사이즈로 조절해주는 h태그에 대해서 알아보겠습니다.

h태그는 h1~h6과 같이 h뒤에 숫자를 붙여서 사용합니다.

뒤에 숫자가 작을수록 글씨의 크기는 커지게 됩니다.

간단한 예제코드를 보겠습니다.

<!DOCTYPE html>
<html>
  <head></head>
  <title>여기는 제목</title>
  <body>
    <h1>h1태그</h1>
    <h2>h2태그</h2>
    <h3>h3태그</h3>
    <h4>h4태그</h4>
    <h5>h5태그</h5>
    <h6>h6태그</h6>
  </body>
</html>

위 프로그램의 실행결과를 보면 이해가 훨씬 쉽습니다.

실행결과

h1태그

h2태그

h3태그

h4태그

h5태그
h6태그

3. 이미지를 띄워주는 img태그의 사용

다음으로는 웹페이지상에 이미지를 불러와서 띄워주는 img태그에 대해서 알아보겠습니다.

img태그는 기본적으로 src=”“속성을 이용하여 이미지의 위치를 지정하여 불러오게됩니다.

여기서 ‘이미지의 위치’ 라는 것은 말그대로 파일 탐색기에서 불러오고자 하는 파일의 위치를 의미합니다.

코드를 보며 이해를 하도록 하겠습니다.

<!DOCTYPE html>
<html>
  <head></head>
  <title>여기는 제목</title>
  <body>
    <img src="/cover.jpg" width="200px" />
  </body>
</html>

위에서 말한 것과 같이 src속성에 파일의 위치, 즉 경로를 넣어줍니다.

여기서 경로의 ‘../cover.jpg’이러한 형식이 익숙하지 않을 수 있습니다.

하지만 이번 글에서는 다루지 않고 다음에 따로 다루도록 하겠습니다.

뒤쪽에 보면 width라는 속성이 있는데 이것은 기본적으로 사진의 가로 넓이를 지정합니다.

width와 반대로 height 속성은 세로 높이를 지정해주며,

width와 height를 모두 지정할 수 있지만 사진의 원본 비율유지를 위해서

두 속성중에서 하나만 지정하는 것이 일반적입니다.

위 프로그램의 실행결과를 보겠습니다.

4. 글의 단락을 분리해주는 p태그

오늘의 마지막 주제인 p태그에 대해서 알아보겠습니다.

div태그도 알아봐야 되는데

p태그를 쉽게 설명하면 글의 단락을 구분 해줍니다.

말로 설명하는 것보다 한 번 보는 것이 쉽기 때문에 코드를 먼저 보겠습니다.

<!DOCTYPE html>
<html>
  <head></head>
  <title>여기는 제목</title>
  <body>
    <p>
      첫번째 단락입니다.<br />
      안녕하세요!<br />
      첫번째 p태그 입니다.
    </p>
    <p>
      두번째 단락입니다.<br />
      안녕히가세요!<br />
      두번째 p태그입니다.
    </p>
  </body>
</html>

여기서 <br />태그를 볼 수 있습니다. br태그는 단순히 줄바꿈을 해주는 역할입니다.

우리가 word나 한글, 메모장같은 Text에디터에서 엔터키를 누른 것과 같은 역할을 해줍니다.

아래의 실행결과를 보며 마치도록 하겠습니다.

첫번째 단락입니다.
안녕하세요!
첫번째 p태그 입니다.

두번째 단락입니다.
안녕히가세요!
두번째 p태그입니다.

오늘은 조금 많은 양을 배운 것 같은데요.

하지만 많은 것을 배우지 않았습니다.

HTML의 레이아웃을 위한 기본적인 태그들을 추가적으로 배워보았습니다.

머릿말 태그인 h

이미지 태그인 img

글 단락 구분 태그인 p

줄바꿈 태그인 br

이부분은 읽고 지나갈 경우 . . . 후에 엄청난 후회의 눈물을 흘리게 됩니다.

쉬운 것 같아도 실제로 사용방법을 정확하게 알고 있지 않으면,

복잡한 코드에서 ‘이게 뭐지?’ 이런 경험을 할 수도 있습니다.

바보냐?

웹페이지 레이아웃을 하기 위해서 꼭 필요하고 많이 쓰이는 태그들이니 정확하게 알고 있길 바랍니다!

다음에는 hr태그와 div태그에 대해서 알아보도록 하겠습니다.

그럼 안녕 !

Good Bye ~