본문 바로가기
실무/web

[HTML] 속성 주석 태그 설명 2

by 설화님 2024. 9. 25.

속성

속성(attribute)은 태그에 부가 기능을 추가하기 위해 작성하는 것으로, 선택사항입니다. 다음은 속성을 한 개 추가한 태그의 형태를 나타낸 것입니다.

<태그의이름 속성명="속성값">콘텐츠</태그의이름>  

<태그의이름 속성명="속성값">

위처럼 속성은 여는 태그의 태그 이름 옆에 공백을 두고 작성해야 합니다. 이때 속성명은 특별한 기호를 사용하지 않고 속성명만 정확히 입력하면 되는데, 이어서 속성값을 입력할 때는 속성값에 해당하는 영역을 따옴표로 묶어서 표현해주어야 합니다. 속성명과 속성값 사이의 = 기호는 둘을 짝 지어주는 역할을 합니다.
태그에 속성을 추가하는 작업에는 따로 개수 제한이 정해져 있지 않습니다. 따라서 사용자는 하나의 태그에 여러 개의 속성을 필요한 만큼 추가할 수 있습니다. 단 이때 주의할 점은 태그의 이름이나 각 속성 간의 구분을 정확하게 할 수 있도록 공백 문자(space)를 적절히 추가해 주어야 한다는 점입니다. 태그 안의 텍스트들이 공백 없이 이어서 쓰여있는 경우 웹 브라우저가 이를 제대로 해석하지 못 할 수도 있습니다. 아래 코드는 속성이 두 개 추가된 img태그의 예입니다(지금은 아래 코드의 의미를 몰라도 괜찮습니다).

<img src="dog.png" alt="강아지 이미지">

 
 
 
주석(comment)은 사람에게는 보이지만, 웹 브라우저에게는 보이지 않는 코드입니다. 주석은 주로 코드 작성자가 자신이 작성한 코드에 설명 또는 메모를 추가하기 위해 사용합니다. 주석을 작성하는 방법은 다음과 같습니다.

<!-- 이 안에 쓰인 내용은 웹 브라우저에게 아무런 영향도 주지 못합니다 -->

주석 또한 태그 형태로 작성되는데, 이때 총 7개의 기호를 사용합니다. 앞의 4개와 뒤의 3개는 모두 붙여서 작성해야 하고, 그 사이에 들어가는 모든 내용은 주석으로 처리되어 웹페이지의 결과물에는 아무런 영향을 주지 않습니다.
 
 
태그, 속성, 그리고 주석 등 HTML 코드 작성에 필요한 기본 사항들에 대해 알아보았습니다. 이제 태그의 종류를 학습해가며 실제로 웹페이지에 콘텐츠를 표시해보는 일만 남았습니다. 이를 위해 가장 먼저 HTML 문서의 기본 구조를 살펴보겠습니다. 기본 구조를 작성해 두는 것은 HTML 문서를 '웹 콘텐츠를 작성할 준비가 되어있는 상태'로 만드는 작업입니다. 일반적으로 HTML 문서는 다음과 같은 기본 구조를 가집니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>여기에는 문서의 제목을 입력해주세요</title>
  </head>
  <body>
    여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
  </body>
</html>

위 코드가 바로 HTML 문서의 기본 구조인데, 이를 구성하는 각 태그의 역할에 대해서 자세히 살펴보겠습니다.
 
 
 

문서의 제목, <title>

<title> 태그는 문서의 제목을 입력하는 태그입니다. 여기에 입력한 제목은 웹 브라우저의 탭 메뉴에 표시됩니다. 웹페이지를 방문하는 웹 이용자는 탭 메뉴에 표시되는 텍스트를 보고 웹페이지가 제공하는 콘텐츠에 대해 짐작할 수 있으므로 이는 무척 중요한 정보입니다. 또한 문서의 제목은 검색 엔진이 웹페이지를 탐색할 때에도 영향을 끼칩니다. 아래는 태그에 제목을 입력하고 웹 브라우저의 탭을 확인한 결과입니다.

Copy<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>문서 제목 나와라 얍</title>
  </head>
  <body>
  </body>
</html>

뉴스 기사나 블로그 글 등 인터넷에 게시된 여러 종류의 글에는 대부분 제목이 표시되어 있습니다. 제목은 해당 글의 정체성을 드러내는 중요한 요소입니다. HTML로 제목을 표시할 때는 알파벳 h로 시작되는 <hx> 태그를 사용하는데, 이 태그를 사용하면 텍스트가 일반적인 텍스트보다 두껍게 표시됩니다.
태그 입력 시 h의 뒤에는 1부터 6까지의 숫자 중 하나를 입력해야 합니다. 여기에서 숫자는 제목 텍스트의 상대적인 크기를 나타내는 것으로, 텍스트는 숫자가 1일 때 가장 크고 6일 때 가장 작습니다. 다음은 <h1> 부터 <h6> 까지의 크기를 비교한 것입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>제목 태그별 크기 비교</title>
  </head>
  <body>
    <h1>숫자가 1일 때의 제목 텍스트</h1>
    <h2>숫자가 2일 때의 제목 텍스트</h2>
    <h3>숫자가 3일 때의 제목 텍스트</h3>
    <h4>숫자가 4일 때의 제목 텍스트</h4>
    <h5>숫자가 5일 때의 제목 텍스트</h5>
    <h6>숫자가 6일 때의 제목 텍스트</h6>
  </body>
</html>

<p> 태그와는 다르게 특별한 스타일이 가미된 문단을 표시하는 태그도 존재합니다. <blockquote> 태그는 태그 안쪽의 텍스트가 인용구임을 나타내는데, <blockquote> 태그로 표시한 텍스트는 일반적인 텍스트보다 안쪽으로 들여 써집니다. 또한 <blockquote> 태그에는 선택적으로 cite라는 속성을 추가할 수 있습니다. cite 속성은 해당 인용구의 출처를 입력하는 속성으로, 여기에는 주로 문구를 인용해 온 웹페이지의 주소를 입력합니다.
아래 코드는 일반적인 텍스트를 표시하는 <p> 태그와 <blockquote> 태그를 비교하기 위해 작성한 코드입니다.

이제부터는 간헐적으로 문서 기본 구조를 생략하고 코드의 주요 부분만을 표시하겠습니다.

<body>
  <p>p 태그는 문단을 나타낼 때 사용하는 태그입니다.</p>
  <blockquote cite="https://wikidocs.net/book/7596">웹 개발 입문자들을 대상으로 하는 HTML 교재입니다.</blockquote>
</body>

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그를 ‘컨테이너’라고 합니다. 컨테이너는 콘텐츠의 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 무척 유용합니다.
다음은 컨테이너 역할을 담당하는 두 가지 대표적인 태그들입니다.

  • <div> : 블록 레벨의 컨테이너 요소를 만드는 태그
  • <span> : 인라인 레벨의 컨테이너를 만드는 태그

블록 레벨 컨테이너, <div>

<body>
  <div>
    <p>행복하고 즐거워요~</p>
    <p>HTML 공부!</p>
  </div>
  <div>
    <p>슬프고 힘들어요</p>
    <p>적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

위 코드에서는 두 개의 <div> 컨테이너가 사용되었습니다. 각각의 컨테이너는 두 개의 <p> 태그를 감싸고 있다는 점이 같지만, 각각이 포함하고 있는 태그의 주제(공부와 다이어트)는 확연히 다릅니다. 이렇듯 컨테이너 요소는 '영역을 구분하는' 역할을 하기 위해 주로 사용되곤 합니다.
<div> 태그는 블록 레벨 컨테이너를 만듭니다. 따라서 개발자 도구에서 공간을 확인해 보면 하나의 블록(층)을 형성하고 있는 것을 확인할 수 있습니다.

앞에서 언급한대로, 컨테이너 태그는 콘텐츠 내용이나 레이아웃에는 아무런 영향을 끼치지 않았

인라인 컨테이너, <span>

  
<body>
  <p>
    예능 프로그램 즐겨 보시나요?
    저는 <span>골때리는 그녀들</span> 재미있게 보고 있습니다!
  </p>
</body>

<span> 태그는 인라인 컨테이너입니다. 블록 레벨 요소의 내부에서 콘텐츠를 영역 별로, 또는 목적 별로 구분하는 역할을 하기도 하고, CSS를 통한 스타일 적용을 위해 사용되기도 합니다. 위 예제에서는 예능 프로그램의 제목(골때리는 그녀들)을 인라인 컨테이너로 묶어두었지만, 역시나 웹페이지의 결과 자체에는 별다른 영향을 주지 않습니다.

고유한 식별자, id

id 속성은 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위해 요소에 대한 고유식별자를 지정합니다. 하나의 요소는 하나의 id를 가질 수 있으며, 각 요소에 대한 id는 고유한 값이어야 합니다. 아래 예제는 앞서 <div>를 살펴보기 위해 작성했던 예제에 id 속성값을 추가한 예입니다.

<body>
  <div id="study">
    <p>행복하고 즐거워요~</p>
    <p>HTML 공부!</p>
  </div>
  <div id="diet">
    <p>슬프고 힘들어요</p>
    <p>적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

위와 같이 id가 지정된 요소를 식별한 다음 스타일시트(CSS)나 스크립트(JavaScript)를 추가하곤 합니다.

기본적으로 id의 값은 사용자가 자유롭게 정할 수 있습니다. 그러나 공백(스페이스나 탭 등)을 포함해서는 안되며, 문자나 숫자, 하이픈(-)과 언더스코어(_) 등의 기호를 사용해서 작성해주어야 하는 등 몇몇 제약사항도 존재합니
 

그룹화 식별자, class

class 속성은 여러 요소에 같은 이름의 식별자를 지정하여 요소를 그룹화할 수 있는 식별자입니다. id와 달리 각 요소가 고유한 값을 가지지 않아도 됩니다. 또한 id와 마찬가지로 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위해 사용하곤 합니다.

<body>
  <div>
    <p class="text content">행복하고 즐거워요~</p>
    <p class="text content">HTML 공부!</p>
  </div>
  <div>
    <p class="text content">슬프고 힘들어요</p>
    <p class="text content">적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

 

요소를 설명하는 추가 텍스트, title

title 속성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다. 요소에 title을 추가하면, 렌더링 되고 난 후의 결과물에 마우스를 얹었을 때 툴팁(tooltip)이 나타나게 됩니다.

툴팁이란 커서를 얹었을 때 나타나는 도움말을 뜻합니다.

<body>
  <p title="현재의 심정">화창한 날씨... 어디론가 떠나고 싶다!</p>
</body>

이미지 표시하기

웹 문서에 이미지를 추가할 때는 <img> 태그를 사용합니다. 이 태그는 닫는 태그를 사용하지 않는 단일 태그이므로, 태그와 태그 사이에 콘텐츠를 입력할 수 없습니다. <img> 태그를 사용해서 표시할 이미지를 지정할 때는 src 속성에 이미지의 URL을 입력하는 방식을 사용합니다.

<img src="IMAGE_URL">

 
URL(Uniform Resource Locator)은 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열을 말합니다. 이미지를 표시하기 위해서는 우선적으로 표시할 이미지가 실제로 존재해야 하고, 해당 이미지가 존재하는 위치와 이미지 파일의 이름 등을 입력해야만 웹 페이지 화면을 통해 원하는 이미지를 확인할 수 있습니다.
이 글이 게시되어 있는 '위키독스' 서버에 있는 이미지 중 하나의 URL을 <img> 태그의 src 속성에 지정하고 그 결과를 확인해 보았습니다.

<body>
  <h1>위키독스 소개글 대표이미지</h1>
  <img src="https://wikidocs.net/images//book/wikidocs_1_5nYDT0Q.png">
  <p>위키독스라는 훌륭한 플랫폼을 알게되어 영광입니다 ㅎㅎ 이미지는 아마도 화분인 것 같습니다!</p>
</body>

 

미지가 웹 문서와 같은 폴더 내에 있을 때

이미지가 HTML 문서와 같은 폴더에 있을 때는 단순하게 이미지 파일의 이름만 작성해 주거나, ./ 문자열을 사용해서 '동일한 폴더에 있다'라는 것을 표시해줍니다. 파일명은 penguin.png라고 가정합니다.

<img src="penguin.png">

또는

<img src="./penguin.png">

이미지가 웹 문서의 상위 폴더 또는 하위 폴더에 있을 때

이미지가 HTML 문서의 상위 폴더에 있거나 하위 폴더에 있을 때는 이를 표현할 수 있는 문자열을 추가해서 상대적인 위치를 명확하게 입력해주어야 합니다.
상위 폴더에 있을 때는 파일명 앞에 문자열 ../을 추가해 '한 단계 위 폴더에 있다'라는 것을 명시해줍니다.

<img src="../penguin.png">

하위 폴더에 있을 때는 파일명 앞에 하위 폴더의 이름을 적어줍니다.

<img src="하위폴더명/penguin.png">

또는

Copy<img src="./하위폴더명/penguin.png">

 

절대 경로를 지정할 수도 있다

이미지가 HTML 문서의 위치와 많이 동떨어진 폴더에 위치한 경우도 있을 수 있습니다. 그럴 때는 ../이나 ./과 같이 상대성을 나타내는 문자열을 사용하기 보다는 이미지 파일의 '절대 경로'를 기입해서 이미지를 표시할 수도 있습니다. 예를 들어 C드라이브 폴더 안에 있는 images라는 이름의 폴더에 이미지가 저장되어 있다면, 다음과 같이 태그를 작성하면 됩니다.

<img src="C:₩images₩penguin.png">

예시에서는 절대 경로 표현 시 폴더의 경계를 표시할 때 ₩ 기호를 사용했지만, 윈도우, 맥 등 운영체제에 따라서 사용하는 기호가 달라질 수 있습니다. 예를 들면 윈도우에서는 ₩를 사용하고 맥에서는 /를 사용하는 식입니다.

 
 

대체 텍스트 추가하기

<img> 태그의 alt 속성은 이미지의 대체 텍스트를 입력하는 속성입니다. 대체 텍스트란 이미지가 아직 로드되지 않았거나 이미지 로드에 실패한 경우 이미지를 대신해 표시될 텍스트를 말합니다. 아래 예제는 실제 이미지 파일명이 penguin.png인 상황에서 <img> 태그를 두 번 사용한 예입니다.

<body>
  <img src="penguin.png" alt="이미지를 대신해 내가 등장!"> 
  <img src="no_penguin.png" alt="이미지를 대신해 내가 등장!"> 
</body>


위 예제에서는 <img> 태그를 두 번 사용했지만, URL을 바르게 입력한 경우에만 이미지가 표시되고 잘못 입력했을 때는 대체 텍스트가 표시되는 것을 확인할 수 있습니다.
 

미지의 크기 정하기

<img> 태그는 기본적으로 이미지를 원본 크기 그대로 표시한다는 특징이 있습니다. 만일 이미지의 원본 크기가 너무 크거나 작아서 불편하다면, 사용자는 <img> 태그의 width와 height 속성을 활용해 화면에 표시될 이미지의 크기를 적절하게 변경할 수 있습니다.
width와 height에는 속성값으로 정수값을 입력합니다. 입력된 정수값은 너비(width)와 높이(height) 각각에 대해 픽셀(px)단위로 적용됩니다.

<body>
  <img src="penguin.png" width="250" height="100"> 
  <img src="penguin.png" width="100" height="100"> 
</body>

HTML5에서는 이미지를 비롯해 오디오, 비디오 등의 독립적인 콘텐츠에 자막을 추가해 표시할 수 있는 <figure>와 <figcaption> 태그가 추가되었습니다. 자막을 담당하는 <figcaption> 태그와 콘텐츠(이미지) 태그가 <figure> 태그에 포함되는 방식으로 사용되며, 이는 자막과 콘텐츠를 함께 관리하기 좋은 편리한 방식입니다. <figure> 태그를 이용해 표시한 콘텐츠는 왼편에 조금의 여백이 추가됩니다.

<body>
  <figure>
    <img src="penguin.png">
    <figcaption>귀여운 펭귄의 따봉</figcaption>
  </figure>
</body>

<figcaption> 요소로 자막을 추가할 때는 <br>을 추가하지 않아도 개행 처리가 됩니다

HTML5의 <picture> 태그 또한 이미지 소스를 감싸는 역할을 합니다. 그리고 그 안에는 여러 개의 <source> 태그를 사용해 화면 크기 별로 사용할 수 있는 여러 개의 이미지를 포함시킬 수 있습니다.

<body>
  <picture>
    <source media="(max-width: 375px)" srcset="image1.png">
    <source media="(max-width: 768px)" srcset="image2.png">
    <source media="(max-width: 1024px)" srcset="image3.png">
  </picture>
</body>

위 예제처럼 하나의 <picture> 태그의 안에 세 개의 <source> 태그를 포함하면, 결과가 렌더링되는 화면의 크기에 따라 세 이미지 중 하나의 이미지 만이 선택되어 화면에 표시됩니다.
<source> 태그의 media 속성은 화면 크기에 대한 조건을 지정할 수 있는 속성으로, 여기에 쓰인 max-width란 '최대 크기'를 의미합니다. 최대 크기가 375px이라는 것은 375px 이하라는 조건을 의미합니다. srcset 속성은 이미지의 URL을 지정할 수 있는 속성입니다. 결과적으로 위 예제에서는 375px 이하의 화면에서는 image1.png를, 375px 이상 768px 이하의 화면에서는 image2.png를 화면에 표시하게 됩니다.
 

문서의 이동

<a> 태그는 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 링크 요소를 만들어주는 태그입니다. <a> 태그 내부에 포함된 콘텐츠를 클릭하면 지정된 위치로 이동하는 방식이기 때문에, 텍스트를 포함한 경우에는 텍스트 링크가 만들어지고 이미지를 포함한 경우에는 이미지 링크가 만들어집니다.
<a> 태그의 href(hypertext reference) 속성은 요소를 통해 연결하고자 하는 문서나 사이트의 주소 등을 입력하는 속성으로, 링크 요소의 핵심 속성입니다. 아래 예제는 네이버 홈페이지의 주소로 이동할 수 있는 링크를 만든 예이며, 요소를 클릭하면 네이버 홈페이지로 이동하게 됩니다.

<body>
  <h1>
    네이버 홈페이지로 이동하려면 
    <a href="https://www.naver.com/">여기</a>
    를 클릭 
  </h1>
</body>

위 예제에서 '여기'를 클릭하면, 화면 내에서 보고 있던 문서가 사라지고 href에 지정된 주소로 문서가 변경됩니다. 이 상황에서 원래 보고 있던 문서로 돌아가기 위해서는 브라우저의 [뒤로 가기]를 눌러야 합니다. 그러나 <a> 태그의 target 속성을 활용하면 기존에 보고 있던 문서를 그대로 유지한 채, 연결된 문서를 새로운 탭에서 열 수도 있습니다.
target 속성의 기본값은 "_self"로, 이는 "현재 탭에서 열기"를 의미하는 값입니다. 그러나 target의 값을 "_blank"로 변경하게 되면 "새 탭에서 열기" 기능이 활성화됩니다.

기본값이란 따로 값을 지정하지 않아도 이미 적용되어 있는 값을 의미합니다.

<body>
  <h1>두 링크의 차이를 비교해보세요</h1>
  <a href="https://www.naver.com/" target="_self">
    현재 탭에서 열기
  </a>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <a href="https://www.naver.com/" target="_blank">
    새 탭에서 열기
  </a>
</body>

위 결과를 통해 <a> 요소가 인라인 요소임을 확인할 수 있습니다.



전화 걸기와 메일 보내기

<a> 태그의 href 속성에는 문서의 URL 외에 전화 번호나 메일 주소 등을 지정할 수도 있습니다. 이 경우 링크 요소는 새로운 문서를 여는 것이 아닌, 전화를 걸거나 메일을 보낼 때 사용하는 프로그램을 열어주는 역할을 합니다. 예를 들어 href에 전화 번호를 지정한 문서를 모바일에서 열고 이를 클릭하면 해당 번호로 전화가 가고, href에 메일 주소를 지정한 상태에서 이를 클릭하면 별도의 메일 작성 프로그램이 열리게 됩니다.
href 속성에 전화 번호나 메일 주소를 지정할 때는 각각 "tel:"과 "mailto:" 문자열을 맨 앞에 작성해 해당 값이 전화 번호 또는 메일 주소라는 것을 명시해주어야 합니다.

<body>
  <a href="tel:010-1234-5678">
    전화 걸기
  </a>
  <a href="mailto:eansdrawer@naver.com">
    메일 보내기
  </a>
</body>

전화를 걸거나 메일을 보내는 방식은 문서를 이용하는 환경(PC, 모바일)에 따라 무척 다양합니다. 가령 모바일 환경에서 전화 걸기 링크를 클릭하면 바로 전화가 연결되지만, PC에서 전화 걸기 링크를 클릭하면 화상 전화 앱 설치를 유도하거나 이미 설치되어 있는 화상 전화 앱이 열리게 되는 등 상황에 따라 결과가 다를 수 있습니다. 따라서 이는 각자의 환경에서 직접 확인해보실 것을 추천합니다.

 
 
순서 있는 목록(Ordered List)이란 기호를 이용해서 각 항목들 사이의 순서를 구분하는 목록을 뜻합니다. 아래는 순서 있는 목록의 예입니다.

순서 없는 목록과 순서 있는 목록은 블록 레벨 요소입니다.

항목을 나타내는 태그는 같다

항목(List Item)이 하나도 적혀 있지 않은 목록은 단지 비어있는 하나의 블록에 불과합니다. 목록을 만들기 위해 사용하는 <ul>과 <ol> 태그 안에서 항목을 나타낼 때는 <li> 태그를 사용해야 합니다. <li> 태그가 목록 안에 하나 추가될 때마다 항목 하나가 추가되는 식인데, <li>가 <ul> 태그 안에 포함되면 항목에는 순서가 표시되지 않고, <li>가 <ol> 태그 안에 포함되면 순서가 표시됩니다.

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ul>
    <li>강아지</li>
    <li>고양이</li>
    <li>거북이</li>
    <li>햄스터</li>
  </ul>
</body>

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ol>
    <li>스타벅스</li>
    <li>커피빈</li>
    <li>파스쿠찌</li>
    <li>이디야</li>
  </ol>
</body>

목록 안에 포함되는 <li> 요소 또한 블록 레벨 요소입니다.

순서 있는 목록의 속성

순서 있는 목록은 기본적으로 숫자를 이용해 순서를 표시하고, 1번부터 순서대로 값이 증가합니다. 그러나 원하는 경우 사용자는 이러한 기본 속성을 수정해 기호나 순서 등을 다르게 표시할 수 있습니다. 이때 사용할 수 있는 속성은 아래의 두 가지입니다.

  • start : 자연수를 지정해 몇 번부터 시작할 것인지를 정한다,
  • type : 어떤 유형의 기호로 순서를 표시할 것인지를 정한다.

<ol> 태그의 start는 시작 번호로 사용하고자 하는 값을 자연수로 입력하는 속성입니다. 당연히 기본값은 1입니다.
type 속성은 어떤 유형의 기호로 순서를 표시할지를 의미하는데, 여기에는 다섯 가지 유형 중 한 가지를 선택할 수 있습니다. 각 유형은 A, a, 1, i, I 인데 각각은 순서대로 알파벳 대문자, 알파벳 소문자, 숫자, 로마숫자 소문자, 로마숫자 대문자를 의미합니다. 아래 예제는 항목을 알파벳 소문자로 3번부터 나열한 예입니다.

<body>
  <h1>과목명 나열하기</h1>
  <ol start="3" type="a">
    <li>유체역학</li>
    <li>전자회로</li>
    <li>동역학</li>
    <li>마이크로프로세서</li>
  </ol>
</body>

순서 있는 목록(Ordered List)이란 기호를 이용해서 각 항목들 사이의 순서를 구분하는 목록을 뜻합니다. 아래는 순서 있는 목록의 예입니다.

순서 없는 목록과 순서 있는 목록은 블록 레벨 요소입니다.

항목을 나타내는 태그는 같다

항목(List Item)이 하나도 적혀 있지 않은 목록은 단지 비어있는 하나의 블록에 불과합니다. 목록을 만들기 위해 사용하는 <ul>과 <ol> 태그 안에서 항목을 나타낼 때는 <li> 태그를 사용해야 합니다. <li> 태그가 목록 안에 하나 추가될 때마다 항목 하나가 추가되는 식인데, <li>가 <ul> 태그 안에 포함되면 항목에는 순서가 표시되지 않고, <li>가 <ol> 태그 안에 포함되면 순서가 표시됩니다.

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ul>
    <li>강아지</li>
    <li>고양이</li>
    <li>거북이</li>
    <li>햄스터</li>
  </ul>
</body>

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ol>
    <li>스타벅스</li>
    <li>커피빈</li>
    <li>파스쿠찌</li>
    <li>이디야</li>
  </ol>
</body>

목록 안에 포함되는 <li> 요소 또한 블록 레벨 요소입니다.

순서 있는 목록의 속성

순서 있는 목록은 기본적으로 숫자를 이용해 순서를 표시하고, 1번부터 순서대로 값이 증가합니다. 그러나 원하는 경우 사용자는 이러한 기본 속성을 수정해 기호나 순서 등을 다르게 표시할 수 있습니다. 이때 사용할 수 있는 속성은 아래의 두 가지입니다.

  • start : 자연수를 지정해 몇 번부터 시작할 것인지를 정한다,
  • type : 어떤 유형의 기호로 순서를 표시할 것인지를 정한다.

<ol> 태그의 start는 시작 번호로 사용하고자 하는 값을 자연수로 입력하는 속성입니다. 당연히 기본값은 1입니다.
type 속성은 어떤 유형의 기호로 순서를 표시할지를 의미하는데, 여기에는 다섯 가지 유형 중 한 가지를 선택할 수 있습니다. 각 유형은 A, a, 1, i, I 인데 각각은 순서대로 알파벳 대문자, 알파벳 소문자, 숫자, 로마숫자 소문자, 로마숫자 대문자를 의미합니다. 아래 예제는 항목을 알파벳 소문자로 3번부터 나열한 예입니다.

<body>
  <h1>과목명 나열하기</h1>
  <ol start="3" type="a">
    <li>유체역학</li>
    <li>전자회로</li>
    <li>동역학</li>
    <li>마이크로프로세서</li>
  </ol>
</body>

순서 있는 목록(Ordered List)이란 기호를 이용해서 각 항목들 사이의 순서를 구분하는 목록을 뜻합니다. 아래는 순서 있는 목록의 예입니다.

순서 없는 목록과 순서 있는 목록은 블록 레벨 요소입니다.

항목을 나타내는 태그는 같다

항목(List Item)이 하나도 적혀 있지 않은 목록은 단지 비어있는 하나의 블록에 불과합니다. 목록을 만들기 위해 사용하는 <ul>과 <ol> 태그 안에서 항목을 나타낼 때는 <li> 태그를 사용해야 합니다. <li> 태그가 목록 안에 하나 추가될 때마다 항목 하나가 추가되는 식인데, <li>가 <ul> 태그 안에 포함되면 항목에는 순서가 표시되지 않고, <li>가 <ol> 태그 안에 포함되면 순서가 표시됩니다.

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ul>
    <li>강아지</li>
    <li>고양이</li>
    <li>거북이</li>
    <li>햄스터</li>
  </ul>
</body>

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ol>
    <li>스타벅스</li>
    <li>커피빈</li>
    <li>파스쿠찌</li>
    <li>이디야</li>
  </ol>
</body>

목록 안에 포함되는 <li> 요소 또한 블록 레벨 요소입니다.

순서 있는 목록의 속성

순서 있는 목록은 기본적으로 숫자를 이용해 순서를 표시하고, 1번부터 순서대로 값이 증가합니다. 그러나 원하는 경우 사용자는 이러한 기본 속성을 수정해 기호나 순서 등을 다르게 표시할 수 있습니다. 이때 사용할 수 있는 속성은 아래의 두 가지입니다.

  • start : 자연수를 지정해 몇 번부터 시작할 것인지를 정한다,
  • type : 어떤 유형의 기호로 순서를 표시할 것인지를 정한다.

<ol> 태그의 start는 시작 번호로 사용하고자 하는 값을 자연수로 입력하는 속성입니다. 당연히 기본값은 1입니다.
type 속성은 어떤 유형의 기호로 순서를 표시할지를 의미하는데, 여기에는 다섯 가지 유형 중 한 가지를 선택할 수 있습니다. 각 유형은 A, a, 1, i, I 인데 각각은 순서대로 알파벳 대문자, 알파벳 소문자, 숫자, 로마숫자 소문자, 로마숫자 대문자를 의미합니다. 아래 예제는 항목을 알파벳 소문자로 3번부터 나열한 예입니다.

<body>
  <h1>과목명 나열하기</h1>
  <ol start="3" type="a">
    <li>유체역학</li>
    <li>전자회로</li>
    <li>동역학</li>
    <li>마이크로프로세서</li>
  </ol>
</body>

순서 있는 목록(Ordered List)이란 기호를 이용해서 각 항목들 사이의 순서를 구분하는 목록을 뜻합니다. 아래는 순서 있는 목록의 예입니다.

순서 없는 목록과 순서 있는 목록은 블록 레벨 요소입니다.

항목을 나타내는 태그는 같다

항목(List Item)이 하나도 적혀 있지 않은 목록은 단지 비어있는 하나의 블록에 불과합니다. 목록을 만들기 위해 사용하는 <ul>과 <ol> 태그 안에서 항목을 나타낼 때는 <li> 태그를 사용해야 합니다. <li> 태그가 목록 안에 하나 추가될 때마다 항목 하나가 추가되는 식인데, <li>가 <ul> 태그 안에 포함되면 항목에는 순서가 표시되지 않고, <li>가 <ol> 태그 안에 포함되면 순서가 표시됩니다.

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ul>
    <li>강아지</li>
    <li>고양이</li>
    <li>거북이</li>
    <li>햄스터</li>
  </ul>
</body>

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ol>
    <li>스타벅스</li>
    <li>커피빈</li>
    <li>파스쿠찌</li>
    <li>이디야</li>
  </ol>
</body>

목록 안에 포함되는 <li> 요소 또한 블록 레벨 요소입니다.

순서 있는 목록의 속성

순서 있는 목록은 기본적으로 숫자를 이용해 순서를 표시하고, 1번부터 순서대로 값이 증가합니다. 그러나 원하는 경우 사용자는 이러한 기본 속성을 수정해 기호나 순서 등을 다르게 표시할 수 있습니다. 이때 사용할 수 있는 속성은 아래의 두 가지입니다.

  • start : 자연수를 지정해 몇 번부터 시작할 것인지를 정한다,
  • type : 어떤 유형의 기호로 순서를 표시할 것인지를 정한다.

<ol> 태그의 start는 시작 번호로 사용하고자 하는 값을 자연수로 입력하는 속성입니다. 당연히 기본값은 1입니다.
type 속성은 어떤 유형의 기호로 순서를 표시할지를 의미하는데, 여기에는 다섯 가지 유형 중 한 가지를 선택할 수 있습니다. 각 유형은 A, a, 1, i, I 인데 각각은 순서대로 알파벳 대문자, 알파벳 소문자, 숫자, 로마숫자 소문자, 로마숫자 대문자를 의미합니다. 아래 예제는 항목을 알파벳 소문자로 3번부터 나열한 예입니다.

<body>
  <h1>과목명 나열하기</h1>
  <ol start="3" type="a">
    <li>유체역학</li>
    <li>전자회로</li>
    <li>동역학</li>
    <li>마이크로프로세서</li>
  </ol>
</body>

 
 
 

  • <table> : 하나의 표를 나타내는 태그
  • <tr> : 표 안에서 하나의 행을 나타내는 태그
  • <th> : 행 안에서 제목에 해당하는 셀을 나타내는 태그
  • <td> : 행 안에서 항목에 해당하는 셀을 나태는 태그

다음은 위 태그들을 사용해 기본적인 스타일의 표를 만든 예입니다.

<body>
  <table border="1">
    <tr>
      <th>한국 선수</th>
      <th>일본 선수</th>
      <th>미국 선수</th>
    </tr>
    <tr>
      <td>김철수</td>
      <td>오오다</td>
      <td>제임스</td>
    </tr>
  </table>
</body>

위 예제에서는 <table> 태그에 border 속성을 추가했습니다. 이 속성은 테두리의 두께를 입력하는 속성인데, border를 따로 지정하지 않을 경우 표는 테두리 없이 표시됩니다.
 
 
 

표에 제목(자막) 추가하기

위 예제의 표에는 따로 제목이 표기되지 않았습니다. 제목을 나타내는 <h> 태그를 사용해 표 요소의 위에 제목을 써 주어도 되겠지만, 코드 관리를 고려해 <caption> 태그나 <figure> 태그를 사용하는 방법도 추천할 만한 방법입니다.

제목(자막)을 추가하는 <caption>

<caption> 태그는 <table> 태그의 안 쪽에서 제목 또는 표에 대한 설명을 나타내는 역할을 할 수 있습니다. 이 태그의 콘텐츠는 표의 길이를 기준으로 가운데 정렬이 됩니다. <caption> 태그의 안에 다른 태그를 포함해 제목이나 설명글을 꾸밀 수도 있습니다. 다음 예는 앞서 살펴 본 예제에 <caption>을 추가한 예입니다.

<body>
  <table border="1">
    <caption>
      <strong>국가대표 선수 명단</strong>
      <br>
      남자 마라톤
    </caption>
    <tr>
      <th>한국 선수</th>
      <th>일본 선수</th>
      <th>미국 선수</th>
    </tr>
    <tr>
      <td>김철수</td>
      <td>오오다</td>
      <td>제임스</td>
    </tr>
  </table>
</body>

 
 

독립적인 콘텐츠를 나타내는 <figure>

04-2절에서 학습한 <figure> 태그는 독립적인 콘텐츠를 나타낼 때 사용하는 태그이며, 그 안에서 자막을 담당하는 <figcaption> 태그와 함께 사용할 수 있었습니다. 표를 나타낼 때도 두 태그를 함께 사용할 수 있는데, <caption>을 사용할 때와 달리 가운데 정렬이 되지 않습니다.

Copy<body>
  <figure>
    <figcaption>
      <strong>국가대표 선수 명단</strong>
    </figcaption>
    <table border="1">
      <tr>
        <th>한국 선수</th>
        <th>일본 선수</th>
        <th>미국 선수</th>
      </tr>
      <tr>
        <td>김철수</td>
        <td>오오다</td>
        <td>제임스</td>
      </tr>
    </table>
  </figure>
</body>

 
 

표의 구조를 나타내는 태그들

표 안에서 실제 콘텐츠를 표시하는 개별 영역을 '셀'이라고 합니다. 사용자는 셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 여러 개의 셀을 묶어서 관리할 수도 있는데, 이를 위해서는 다음과 같은 태그들을 사용할 수 있습니다.

  • <thead> : 표의 제목을 나타내는 영역
  • <tbody> : 표의 본문을 나타내는 영역
  • <tfoot> : 표의 요약 부분을 나타내는 영역

화면에 나타나는 결과만 놓고 봤을 때, 위 태그들을 사용했을 때와 하지 않았을 때의 차이는 존재하지 않습니다. 그러나 위 태그들을 사용하면 코드 상에서 표의 구조가 시각적으로 명확하게 드러나 코드 작성자의 코드 유지 및 보수가 편리해질수 있고, 더불어 웹 접근성을 향상시키는 데에도 도움이 됩니다.

'웹 접근성'이란 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있음을 의미하는 용어인데, HTML 코드의 구조가 명확할수록 시각 장애를 가진 사람이 음성 낭독기 등으로 웹 사이트를 이용할 때의 사용성이 향상됩니다.

Copy<body>
  <table border="1">
    <thead>
      <tr>
        <th>한국 선수</th>
        <th>일본 선수</th>
        <th>미국 선수</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>김철수</td>
        <td>오오다</td>
        <td>제임스</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>세계 랭킹 5위</td>
        <td>세계 랭킹 8위</td>
        <td>세계 랭킹 2위</td>
      </tr>
    </tfoot>
  </table>
</body>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

'실무 > web' 카테고리의 다른 글

[web] Router 설정을통한 페이지 트리구조  (0) 2025.02.04
[HTML] 속성 주석 태그 설명  (1) 2024.09.25

관련글

티스토리툴바