HTML (리스트 ) 기초 3편

2021. 4. 10. 02:10·개발/HTML

HTML로 리스트를 표현하고 싶으면 어떻게 해야 할까요?

단순히 - , 1. 2. 이렇게 글자로 표현하는게 맞을까요?

물론 이방법도 있지만 우리는 더 HTML 스럽게 표현 하도록 배워보도록 하겠습니다.

이렇게 표현되게 작성 되어있는 태그는 <li> </li> 입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<h1> HTML 기초배우기 </h1>
	<li>서울</li>
	<li>대전</li>
	<li>대구</li>
	<li>부산</li>
	
		

</body>
</html>

 

그리고 이번엔 리스트가 여러개가 붙어있는데 이리스트를 분류를 해보겠습니다.

만약 서울, 대전이랑 대구랑 부산을 분류를 하고싶을땐 어떻게 해야할까요

그건 <ul> </ul>태그입니다.  ul 태그안에 li 태그를 각각 분류해서 넣어보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<h1> HTML 기초배우기 </h1>
	<ul>
	<li>서울</li>
	<li>대전</li>
</ul>
<ul>
	<li>대구</li>
	<li>부산</li>
</ul>


</body>
</html>

 

 

 

이렇게 태그를 분리할수있습니다.

그러면 1. 2. 3. 4. 를 번호를 붙일수 있는 리스트는 어떻게 할까요

바로 <ol> </ol> 태그입니다 ul태그와 사용법이 같습니다. 대구 부산만 ol 태그를 묶어보도록하겠습니다.

이렇게 번호가 붙어있는걸 확인 할수있습니다. 

저작자표시 (새창열림)

'개발 > HTML' 카테고리의 다른 글

HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09
HTML( 제목, 단락) 기초 1편  (0) 2021.04.08
HTML 의 구조  (0) 2021.04.07
'개발/HTML' 카테고리의 다른 글
  • HTML (박스 모델) 기초 5-2편
  • HTML (박스 모델) 기초 5-1편
  • HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편
  • HTML( 제목, 단락) 기초 1편
ilhwa jeong
ilhwa jeong
  • ilhwa jeong
    경제적 자유를 이루고 싶은 개발자
    ilhwa jeong
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 하드웨어 펌웨어 개발
      • 개발
        • c
        • c++
        • WINDOW-TCP IP
        • c#
        • C# 데이터베이스
        • 데이터베이스
        • HTML
        • CSS
        • JavaScript
        • 개발서적
        • 개발지식
      • 책
        • 자기개발서(부자편)
      • IT소통
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    개발
    조엘온
    부의추월차선
    html list
    Cefsharp
    CSS
    r간단한문제
    기초
    C#
    크롭웹브라우저
    inputtag
    개발자
    BoxingUnBoxing
    html
    HTML단락
    웹개발자
    VisualStuio
    책
    소프트웨어
    html구조
    HTML 박스태그
    웹
    c#메모장
    엠제이드마코
    WebBrowser
    HTML제목
    메모장만들기
    개발서적
    선굵기
    HTML 입력갑
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
ilhwa jeong
HTML (리스트 ) 기초 3편
상단으로

티스토리툴바