목록 태그

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

목록 태그 본문

Front-End (웹)/HTML

목록 태그

친절한개발초보자 2021. 7. 27. 22:06

728x90

목록 태그

특징
- 목록 태그도 display:block이기 때문에 div처럼 쓰면 된다.
ⅰ) 가로, 세로 값
ⅱ) 배경색 넣기
ⅲ) 아이디 및 클래스 사용
- 목록 태그는 그냥 사용하면 글자 왼쪽 동그라미 아이콘(불릿)이 생긴다.
→ 이것을 없애주는 css속성을 맨 처음에 사용한다.
→ li{list-style:none}
- 아무 때나 사용하는 게 아닌 목록이라고 부를 수 있는 존재들에만 사용한다.
(목록 기준 - 비슷한 내용을 가진 개체가 3개 이상 있으면 목록이라 생각하자)
순서 있는 목록을 만드는 <ol>, <li> 태그
→ 각 항목을 순서대로 나열한 것
- <ol> 태그의 type, start 속성

종류 설명

type = "1" 숫자(기본값)

type = "a" 영문 소문자

type = "A" 영문 대문자

type = "i" 로마 숫자 소문자

type= "I" 로마 숫자

- 순서 목록은 기본적으로 '1'부터 시작하지만 start 속성을 사용해서 시작 번호를 바꿀 수 있다.
순서 없는 목록을 만드는 <ul>, <li> 태그
→ 항목의 순서가 중요하지 않을 때 사용
- <ul> 태그
: 목록을 열어주는 명령어 같은 태그
- <li> 태그
: 목록 안에서 실질적으로 내용물들을 담아주는 태그
설명 목록을 만드는 <dl>, <dt>, <dd> 태그
→ 이름과 값 형태로 된 목록
- <dt> 태그
: 이름(단어명) 부분을 지정
- <dd> 태그
: 값(설명) 부분을 지정
- <dl>과 </dl> 태그 사이에는 한 쌍의 <dt> 태그와 <dd> 태그를 넣는다. (<dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수도 있다.)
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>float #1</title>
    <style>
        li{list-style:none}
    </style>
</head>
<body>
    <ul>
        <li>사과</li>
        <li>포도</li>
        <li>딸기</li>
        <li>아나나스</li>
    </ul>
</body>
</html>
```

목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type 속성

종류	설명
disc	채운 원 모양
circle	빈 원 모양
square	채운 사각형 모양
decimal	1부터 시작하는 10진수
decimal-leading-zero	앞에 0이 붙는 10진수
lower-roman	로마 숫자 소문자
upper-roman	로마 숫자 대문자
lower-alpha / lower-latin	알파벳 소문자
upper-alpha / upper-latin	알파벳 대문자
none	불릿이나 숫자를 없앤다.

불릿 대신 이미지를 사용하는 list-style-image 속성
- 불릿을 원하는 이미지로 바꿀 수 있다.
(이 경우 불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋다.)
```
list-style-image: <url(이미지 파일 경로)> ¦ none
```
목록을 들여 쓰는 list-style-position 속성
- 불릿이나 번호의 위치를 들여 쓸 수 있다.
```
list-style-position: inside ¦ outside;
```
종류 설명

inside 불릿이나 번호를 기본 위치보다 안으로 들여 쓴다.

outside 기본값
목록 속성을 한꺼번에 표시하는 list-style 속성
- list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있다.