Enterprise Teaho

  • Web
  • HTML

HTML의 기본 (3)

My 22th Post


HTML의 기본 (3)

by Enterprise Kim.T.H

const html_listTag = (tag) => {
  console.log("리스트 태그가 사용되는 이유와 기본 사용법을 배워봅시다.");
};

1. HTML의 리스트 태그는 왜 사용되고, 종류에는 무엇이 있을까?

HTML은 웹페이지를 구성하는 “문서” 입니다. 문서는 가독성이 높아야 하겠죠?

예를 들어서 한글이나 Word와 같이 문서를 작성하는 프로그램을 이용하여 문서를 작성하였는데

이 문서에 목차와 단락, 줄간격등이 적절하게 조절되어있지 않아서 가독성이 매우 떨어진다면,

굳이 위와 같은 문서 작성 전용 프로그램을 사용할 필요가 없었을 것입니다.

HTML문서도 사용자가 웹페이지를 보았을 때, 보다 보기 편하고 가독성이 높은 레이아웃을 구성하기 위해서 탄생했다고 볼 수 있습니다.

위와 같은 조건을 충족하기 위해서 많은 태그들이 사용되지만 그중에 아주 중요한 역할을 하는 태그가 바로 리스트 태그입니다.

리스트 태그의 종류는 아래와 같이 크게 3가지가 있습니다.

<ol>

<ul>

<li>

밑에서 이 3가지 태그의 사용방식과 어떤 특징을 가지고 있는지 알아보겠습니다.

2. 리스트 태그의 기본 사용 방법

<!DOCTYPE html>
<html>
  <head></head>
  <title>여기는 제목</title>
  <body>
    <ol>
      <li>과일</li>
      <ul>
        <li>바나나</li>
        <li>사과</li>
        <li>포도</li>
      </ul>
      <li>운동</li>
      <ul>
        <li>수영</li>
        <li>주짓수</li>
        <li>농구</li>
      </ul>
    </ol>
  </body>
</html>

오늘은 조금은 지루하지만 코드설명이 길어질 것 같습니다. . .

먼저 가장 먼저 나오는 <ol>태그에 대해서 알아보겠습니다.

<ol>태그는 순서있는 목록을 만들기 위해서 사용되며 <li>태그와 같이 사용합니다.

기본적으로 각 항목의 앞쪽에 숫자가 붙어서 순서를 표시합니다.

다음으로 <ul>태그는 <ol>태그와 반대로 순서없는 목록을 만들 때 사용됩니다.

즉 순서가 없는 목록을 만들 때에는 <ul>태그를 사용합니다.

또한 기본값으로 항목의 앞에 서클이 찍혀서 목록임을 표현합니다.

마지막으로 <li>태그는 각각의 요소, 항목들을 표현합니다.

그래서 <ol>태그와 <ul>태그안에 모두 사용합니다.

위에서 본코드를 직접 작성하여 페이지에 나타나도록 하면 아래와 같습니다.

  1. 과일
    • 바나나
    • 사과
    • 포도
  2. 운동
    • 수영
    • 주짓수
    • 농구

3. 어디에 많이 사용될까?

리스트 태그는 목록을 만들 때에도 많이 사용되지만, 저번시간에 공부했던 Semantic태그 중

상단 메뉴를 만드는 <nav>태그에 많이 사용됩니다. 후에 웹사이트를 제작하다 보면 알게 되지만

상단 메뉴를 제작할 때 <div>와 같은 블록으로 만들려고 하면 신경써야하는 부분이 굉장히 많아지게 됩니다.

좋은 추억이 될 수도 있지만 . . .

그래서 대부분의 프로그래머들은 상단 nav메뉴를 효율적으로 만들기 위해서 리스트 태그를 이용합니다.

또 다른 문제점은 <div>와 같은 블록으로 상단 메뉴를 깔끔하게 꾸몄는데 사용자가 접속한 브라우저에서

CSS의 일부 기능이 적용되지 않을 수 있습니다. 그런 경우 메뉴가 짤려서 보이거나,

최악의 경우 상단 메뉴가 보이지 않을 수도 있습니다.

그렇기 때문에 거의 모든(?) 브라우저에서 안정적으로 지원되는 리스트 태그로 상단 메뉴를 구성하는 것입니다.

마지막으로 리스트 태그를 이용한 상단 nav메뉴의 가장 기본적인 코드를 보고 다음으로 넘어가겠습니다.

아래의 코드는 순수 HTML로만 이루어진 코드입니다. 후에 CSS를 배워야지 완벽한 nav메뉴를 만들 수 있습니다.

<!DOCTYPE html>
<html>
  <head></head>
  <title>여기는 제목</title>
  <body>
    <!--CSS를 추가하지 않으면 메뉴보다는 목록의 형태로 보입니다.-->
    <!--CSS편에서 다시 자세하게 다루도록 하겠습니다.-->
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
      <li>메뉴3</li>
    </ul>
  </body>
</html>

오늘은 HTML의 아주 중요한 파트인,

리스트 태그가 무엇인지?

왜 리스트 태그를 사용하는지?

리스트 태그의 기본 구성은 어떻게 되는지?

리스트 태그가 많이 쓰이는 곳은 어디인지?

리스트 태그의 모든것(?)에 대하여 배워보았습니다.

실제로 리스트 태그는 HTML에서 매우 많이 사용되기 때문에 정확하게 알아두면 좋습니다.

후에 눈물흘리며 밤을 지세울 일이 없습니다.

다음 시간에는 HTML의 다양한 태그들에 대하여 알아보도록 하겠습니다.

그럼 안녕 !

Good Bye ~