ul : 순서 없는 목록 태그

li: 리스트 요소 등록

   <ol>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
  • HTML5
  • CSS3
  • JavaScript
  • jQuery

ol : 순서 있는 목록태그

li: 리스트 요소 등록

 <ol>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
  1. HTML5
  2. CSS3
  3. JavaScript
  4. jQuery

 

영문 소문자 a. b. c. d. 로 표기

<ol type="a">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

영문 대문자 A. B. C. D로 표기

  
    <ol type="A">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

로마 숫자 소문자 ⅰⅱ ⅲ ⅳ 로 표기

   <ol type="i">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

로마 숫자 대문자 I II III IV 로 표기

 <ol type="I">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

시작 숫자 변경

 <ol type="1" start="5">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

5.HTML5

6.CSS3

7.JavaScripT

8.jQuery

 

역순으로 항목 표시

   <ol reversed="reversed">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

4.HTML5

3.CSS3

2.JavaScripT

1.jQuery

 

-> 리스트 태그를 중복으로 사용할 수 있다.

 

<dl> 정의 목록 태그 : 어떠한 개념에 대한 설명을 목록으로 쓸 수 있다.

<dl>

    <dt> 목록의 제목 </dt>

     <dd> 목록에 설명 </dd>

<dl>

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 (새창열림)

'LECTURE > HTML5' 카테고리의 다른 글

HTML5 - 글자 관련 태그  (0) 2023.02.02

 

<!DOCTYPE html>
<!-- HTML5 문서 형식 선언 -->
<html lang="ko">
<!-- <html> : html 문서의 내용을 정의 -->
<!-- lang 속성 : 페이지가 어떤 언어로 되어 있나를 표시 (검색 엔진 참조) -->    
    <head>
    <!-- <head> : 문서 제목과 스크립트, 스타일 시트의 링크 또는 선언을 포함하는 
        문서의 일반적인 정보(메타데이터)를 정의 -->
        <title>1_글자관련태그</title>
        <!-- <title> : 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목 정의 -->
        <meta charset="UTF-8">
        <!-- 문자 인코딩 선언 -->
    </head>

 

&lt;  :  <

&gt;  : >

h1이 가장 크고 h6이 가장 작다.

<body>
    <!-- <body> : html 문서의 내용(content)을 정의 -->
        <h3>&lt;hn&gt; : 제목을 입력할 때 사용하는 태그</h3>
        <h1>h1 태그입니다.</h1>

 

<hr/>  :  줄 바꾸면서 수평선 넣는 태그

<br/>  : 줄 바꿈 태그

<p> </p> :  단락을 구분하는 태그, 하나의 공백만 표시하며 줄 바꿈 입력을 별도의 태그로 지정해야 한다.

<pre> </pre> : 여러칸 띄우기, 혹은 줄 바꿈 등을 포함하여 입력한 내용 그대로 표현하는 태그

 

<b></b> : 글자 굵게 표시하는 태그

<strong></strong> : 글자 굵게 표시하는 태그 -> 웹 접근성 - 스크린 리더 실행 시 강조된다.

<i></i> : 글자를 기울이는 태그

<em></em> :글자를 기울이는 태그 -> 웹 접근성

 

<mark></mark> : 형광펜 효과를 나타내는 태그

<u></u> : 글자에 밑줄을 긋는 태그

<small></small> : 글자를 작게 표시하는 태그

<sub></sub> : 아래 첨자

<sup></sup> : 위 첨자

<s></s> : 글자에 취소선을 넣는 태그

 

<blockquote cite="https://www.naver.com"></blockquote>

blockquote : 인용 문구를 나타내는 문구

cite 속성 : 인용된 사이트 주소를 작성, 직접 표시되지는 않지마나 검색 엔진에는 노출된다.

<q></q> : 인용 문구를 나타내는 태그

<cite>웹주소</cite> : 참고한 웹 문서를 이텔릭체로 나타내는 태그

<abbr title="Internet of Things">IoT</abbr>  : IoT에 마우스 오버하면 툴팁이라는 공간에 title 정보가 나타난다.

저작자표시 비영리 (새창열림)

'LECTURE > HTML5' 카테고리의 다른 글

HTML5 - 목록 관련 태그  (0) 2023.02.03

+ Recent posts

티스토리툴바