민혁이의 IT스토리

[혼자 공부해서 개발까지]part2 - 웹을 이루는 작은 조각, HTML 태그 본문

혼자 공부해서 개발까지/HTML

[혼자 공부해서 개발까지]part2 - 웹을 이루는 작은 조각, HTML 태그

FE_Minhyuk 2025. 1. 25. 12:00

 

웹페이지는 정말 많은 요소들로 이루어져 있습니다. 사람들은 그 요소를 태그라고 정의하고 상황에 알맞는 태그를 골라서 사용합니다.  이번 시간에는 웹페이지를 만들 때 중요한  목록,표(테이블)를 만드는 방법에 대해 알아보겠습니다😊

 

 

목차

  • 순서가 있는 목록
  • 순서가 없는 목록
  • 표 만들기

 

 

 

태그 설명

 

2-1 순서가 없는 목록

목록은 우리에 일상에서도 쉽게 찾아볼 수 있습니다. 그중에는 순서가 중요하지 않은 것과 중요한 것으로 나눌 수 있는데요. HTML에서는 그 두 가지 상황을 <ul> 태그와 <ol>태그로 나누고 각각에 태그들 속에 항목들을 <li>로 구분하여 사용합니다. 

 

<ul>태그:  순서가 중요한지 아닌지에 관계없이 항목을 나열할 때 사용합니다.  li(항목)들을 ul태그로 감싸면 순서가 없는 목록을 만들 수 있습니다.

 

 

예시 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li>귤</li>
    </ul>      
</body>
</html>

 

 

실행화면

2-2 순서가 있는 목록과  

<ol>태그 : 순서 있는 목록을 정의하는 데 사용됩니다. 항목이 특정한 순서대로 나열될 때 사용하며, 각 항목은 사용자의 선택에 따라 자동으로 번호나 알파벳으로 출력되어 나옵니다. 

 

 

 

예시 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 1~3 숫자로 표시 -->
  <ol>
    <li>1번째 항목</li>
    <li>2번째 항목</li>
    <li>3번째 항목</li>
  </ol>

<!-- a~c 알파벳으로 표시 -->
<ol type="a">
    <li>1번째 항목</li>
    <li>2번째 항목</li>
    <li>3번째 항목</li>
  </ol>

<ol type="i">
    <li>1번째 항목</li>
    <li>2번째 항목</li>
    <li>3번째 항목</li>
</ol>

<ol type="I">
    <li>1번째 항목</li>
    <li>2번째 항목</li>
    <li>3번째 항목</li>
</ol>
</body>
</html>

 

 

실행 화면

 

 

 

 

2-3 표 만들기

HTML에서 표는 테이블이라고 부르는데요. 테이블을 만들 때  여러개에 태그가 사용되고 사용방법이 어려울 수 있습니다.

먼저 태그들을 소개를 읽고 예시코드를 소개에 맞춰서 해석해보세요!

 

  • <table>: 테이블 전체를 감싸는 역할을 하는 최상의 태그이며, 표의 구조를 시작하고 끝내는 태그입니다.
    또 border라는 속성을 사용해서 표를 꾸미는 것도 가능합니다.
  • <tr>: 이 태그로 하나의 수평적 행을 구분합니다.
  • <th>: 테이블의 열 제목이나 행 제목을 나타내며, 기본적으로 굵고 중앙 정렬됩니다
  • <td>: 이 태그는 테이블의 실제 데이터가 들어가는 셀을 나타냅니다.

예시코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>학생 정보 테이블</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>이름</th>
        <th>나이</th>
        <th>학년</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>홍길동</td>
        <td>20</td>
        <td>2학년</td>
      </tr>
      <tr>
        <td>김철수</td>
        <td>22</td>
        <td>3학년</td>
      </tr>
      <tr>
        <td>박영희</td>
        <td>21</td>
        <td>2학년</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

 

 

실행화면

 

 

테이블 셀 병합

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>학생 정보 테이블</title>
</head>
<body>
  <table border="1">
    <tr>
      <td>셀 1</td>
      <td>셀 2</td>
      <td>셀 3</td>
    </tr>
    <tr>
      <td colspan="2">열 2와 3을 병합한 셀</td>
      <td>셀 6</td>
    </tr>
  </table>
  
  <table border="1">
    <tr>
      <td rowspan="2">셀 병합</td>
      <td>셀 2</td>
      <td>셀 3</td>
    </tr>
    <tr>
      <td>셀 5</td>
      <td>셀 6</td>
    </tr>
    <tr>
      <td>셀 7</td>
      <td>셀 8</td>
      <td>셀 9</td>
    </tr>
  </table>
  
</body>
</html>

 

 

화면

 

 

마무리

오늘은 목록 태그와 표 태그를 배웠는데요. 사용할 수 있는 방법이 다양하기 때문에 궁금한 것은 직접 코드를 치면서 알아가는 걸 추천합니다! 그럼 오늘 태그소개는 여기서 마치고 다음 글로 찾아오겠습니다. 감사합니😊

'혼자 공부해서 개발까지 > HTML' 카테고리의 다른 글

[혼자 공부해서 개발까지 ] Part4 - Layout과 구조태그 개념 이해하기  (4) 2025.02.08
[혼자 공부해서 개발까지] part3 - HTML 입력과 버튼 태그의 기초  (4) 2025.02.01
[혼자 공부해서 개발까지 ] Part1- 웹 개발의 첫걸음, HTML이란?  (3) 2025.01.18
'혼자 공부해서 개발까지/HTML' Related Articles more