홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
UL LI OL 태그 속성
11년 전
  • 이건 동그란 점...
  • 이건 속빈 동그라미
  • 이것은 사각형..
  • 이건 다시 속빈 동그라미
  • 이건 동그란 점
<ul> <li type="disc">이건 동그란 점... <li type="circle">이건 속빈 동그라미 <li type="square">이것은 사각형.. <li type="circle">이건 다시 속빈 동그라미 <li type="disc">이건 동그란 점 </ul>
◈ 리스트 사용하기
 

불릿 리스트[순서없는목록] : 불릿 리스트는 가장 일반적인 형태의 리스트 형식으로, 리스트 항목에 불릿 문자가 포함됩니다. 리스트를 정의하는 태그는 지금까지의 다른 태그 형식과 달리 두 가지의 복합된 형태로 이루어집니다.

<UL></UL> : 목록을 시작하는 곳에 사용합니다. 그리고 각 목록에는 <LI>태그을 붙여야 합니다.
 

예제

<UL>
<LI>천리안
<LI>넷츠고
<LI>하이텔
<LI>나우누리
</UL>
  • 천리안
  • 넷츠고
  • 하이텔
  • 나우누리

 

HTML소스 결과
<ul>
    <li> 호박
    <li> 수박
    <li> 찬호박
</ul>
 
  • 호박
  • 수박
  • 찬호박
<ul>
  <li type=disc>호박
  <li type=circle>수박
  <li type=square>찬호박
</ul>
 
  • 호박
  • 수박
  • 찬호박
 

 

 

번호 리스트[순서있는목록] :번호 리스트는 리스트의 각 항목에 자동으로 번호 등을 매겨주는 리스트입니다. 불릿 리스트와 동일한 태그 구조를 사용하지만 <UL></UL> 태그 대신에 <OL></OL> 태그를 사용합니다.

<OL></OL> : 순서있는 목록을 시작할 곳에 사용합니다.
 

<OL>태그의 속성

Compact

중간여백을 최대한 줄이도록 만들 수 있습니다.

START

1이 아닌 다른 숫자로 목록 번호를 시작할 수 있습니다.

TYPE

숫자가 아닌 알파벳 등 다른 순번이 표시되게 할 수 있습니다.


<LI> :
<OL>태그 다음에 사용하고, 각 목록 앞에 써주어야 합니다.

<LI>태그의 속성
TYPE -A(알파벳 대문자), a(알파벳 소문자), I(로마숫자 대문자), i(로마숫자 소문자).
이 속성 값은 "순서있는 목록" 에서만 사용할 수 있습니다.
 

예제

<OL>
<LI>천리안
<LI>넷츠고
<LI>하이텔
<LI>나우누리
</OL>

<OL>
<LI TYPE=a>천리안
<LI TYPE=a>넷츠고
<LI TYPE=a>하이텔
<LI TYPE=a>나우누리
</OL>

<OL>
<LI TYPE=A>천리안
<LI TYPE=A>넷츠고
<LI TYPE=A>하이텔
<LI TYPE=A>나우누리
</OL>
  1. 천리안
  2. 넷츠고
  3. 하이텔
  4. 나우누리
  1. 천리안
  2. 넷츠고
  3. 하이텔
  4. 나우누리
  1. 천리안
  2. 넷츠고
  3. 하이텔
  4. 나우누리

 

▶ 정의 리스트 : 불릿 리스트와 번호 리스트가 매우 비슷한 형식과 구조를 가지고 있는 것과는 달리, 정의 리스트는 조금 독특한 구조를 가지고 있습니다.

<DL></DL> : 용어정의 목록을 시작하는 곳에 사용합니다.

<DT> : 용어의 이름을 쓰는 곳에 사용합니다.

<DD> : 용어에 대한 설명을 쓰는 곳에 사용합니다.

 

예제

<DL>
<DT>URL
<DD>인터넷상의 각종 자원의 위치를 나타내기 위해 사용되는 표준 주소
이다. 
<DT>HTML
<DD>HTML이란 Hyper Text Makeup Language의 약자로 하이퍼택스트 기능을 가진 문서를 만드는 언어입니다.
</DL>
URL
인터넷상의 각종 자원의 위치를 나타내기 위해 사용되는 표준 주소 이다.
HTML
HTML이란 Hyper Text Makeup Language의 약자로 하이퍼택스트 기능을 가진 문서를 만드는 언어입니다.

 

▶ 리스트의 중첩 : 위의 목록들을 모두 중첩될 수 있는 것입니다. "순서있는 목록" 안에 "순서없는 목록"을 넣을 수도 있고, 용어 정의 목록 안에 메뉴 목록을 넣을 수도 있습니다.
 

예제

<OL>
<LI>WWW와 HTML
<DL>
<DT>HTTP(Hyper Text Transmission Protocol)
<DD>HTTP는 WWW 서비스에서 클라이언트와 서버 사이에서 통신할 때 사용하는 통신 프로토콜(protocol) <DT>WWW 브라우저
<DD>브라우저는 클라이언트에 설치되어 서버로부터 제공받는 정보를 사
용자를 위해 재구성하는 역할을 하는 소프트웨어다.
</DL><P>
<LI>HTML의 기본적인 형식
<DL>
<DT>HTML의 Tag
<DD>태그는 HTML 문서의 모양과 행동 양식을 정해주는 하나의 명령 <DT>태그의 속성
<DD>태그의 속성은 택이 실제 문서를 표현할 때 필요한 여러 가지 환경들을 설정하게 된다.
</DL>
  1. WWW와 HTML
    HTTP(Hyper Text Transmission Protocol)
    HTTP는 WWW 서비스에서 클라이언트와 서버 사이에서 통신할 때 사용하는 통신 프로토콜(protocol)
    WWW 브라우저
    브라우저는 클라이언트에 설치되어 서버로부터 제공받는 정보를 사 용자를 위해 재구성하는 역할을 하는 소프트웨어다.
  2. HTML의 기본적인 형식
    HTML의 Tag
    태그는 HTML 문서의 모양과 행동 양식을 정해주는 하나의 명령
    태그의 속성
    태그의 속성은 택이 실제 문서를 표현할 때 필요한 여러 가지 환경들을 설정하게 된다.
추천추천 : 251 추천 목록
번호 제목
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
3,008
 윈도우10 시스템 파일 및 Dism 검사
3,007
 텍스트 줄바꿈, 글자자르기 CSS
3,006
 jQuery Mobile에서 유용한 코드 10가지.
3,005
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,004
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,003
 [jQuery] jQuery Quick API
3,002
 [ transition ] 링크 hover 색상 변화 속도 조절
3,001
 PHP 5.3.0 에서 사라진 함수들 대체
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.