본문 바로가기

Language/HTML

<HTML 기초> 04. 태그 : 리스트

 

이번에 알아볼 내용은 리스트 태그이다.

리스트는 크게 ul(Unordered List), ol(Ordered List), dl(Description List)가 있다.

 

* 목록 리스트

 먼저 ul태그와 ol 태그를 알아보자.

<h1>
    비식별 기술
</h1>

<ul>
    <li>비식별 기술</li>
    <li>데이터 마스킹</li>
    <li>가명 처리</li>
    <li>총계 처리</li>
    <li>데이터값 삭제</li>
    <li>데이터 범주화</li>
</ul>

 

 - <ul>태그는 열고 닫는 태그이며 자식태그로 오직 <li>태그만 가질 수 있다.

 - <li>태그는 각각의 목록을 나타낸다.

 

따라서 다음과 같이 표현된다.

 

  - 순서가 별도로 없는 목록이 보여짐을 알 수 있다.

 

다음은 <ol> 태그의 예시이다.

 

<h1>
    빅데이터 분석 방법론
</h1>

<ol>
    <li>분석 기획</li>
    <li>데이터 준비</li>
    <li>데이터 분석</li>
    <li>시스템 구현</li>
    <li>평가 및 전개</li>
</ol>

 - <ol>태그도 열고 닫으며 반드시 자식태그는 <li>태그만을 가진다.

 

 

 - 위와 같이 <ol>태그는 순서가 표시된다. 

 - 숫자는 자동으로 입력되지만 우리는 컴퓨터에게 순서가 중요하다는 것을 인지만 시켜준것이다. 숫자를 '1단계', '2단계' 와 같이 바꾸려면 후에 CSS로 수정하기만 하면 된다. 

 - 참고로 <li>는 직계자손이기만 하면 되므로 <li>태그안에 <a>태그와 같이 다른 태그가 존재가능하다.

 

* 정의리스트

<h1>데이터의 유형</h1>
<dl>
    <dt>정성적 데이터</dt>
        <dd>언어와 문자등의 형태로 된 데이터를 의미한다. 주로 비정형 데이터이며, 주관적 내용이다. 따라서 통계분석이 어려워 많은 비용이 소모된다. (ex. A사 매출이 증가하였습니다.)</dd>    
    <dt>정량적 데이터</dt>
        <dd>수치적인 데이터부터 도형과 기호까지 포함한다. 주로 정형 데이터이며, 객관적 내용이 주를 이룬다. 따라서 통계분석이 용이하다. (ex.주가)</dd>
</dl>

 

 - <dl> 태그는 주로 정의를 나타내기 위해 사용하는 태그이다.

 - 자식으로 <dt>와 <dd>를 가진다. 더 나아가 더 강조하고 싶을때는 <dfn>까지 가진다. 모두 열고 닫는다.

 - 문법적으로 순서가 중요하다. <dl>은 직계로 <dt>를 가지며 <dt>는 <dd>를 가져야한다.

 - 같은 <dt>끼리나 <dd>끼리는 연속해서 중복사용은 가능하다.

   O  dt dt dd    

   X  dt dd dt    

 

 

 

 


 

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎

edu.goorm.io