이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
리스트(목록) 태그
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 링크 태그 (feat. 하이퍼텍스트) 이 포스팅은 PC로 작성되었습니다. 모바
gogogameboy.tistory.com
예전에 배웠던 리스트(목록) 태그를 CSS로 꾸며보겠습니다.
<ul>은 번호가 없는 리스트였고, <ol>은 번호가 매겨지는 리스트였죠.
기본 <ol> 태그
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
NASTYONA
아홉가지 기분 (2007)
- 아홉가지 기분
- 돌이킬 수 없는
- 바늘
- 어쩌면 처음부터 정해져 있던 이야기
- Empty
- 사라지지 않는, 밤
- Tete
- Judith
- 요단강
- To my grandfather
- 꿈속에서 (feat. Jood from Vivasoul)
- 잠들 때 까지
- 포옹
위와 같이 그냥 <ol> 태그를 이용하면 이렇게 번호가 매겨지지만,
list-style-type: decimal-leading-zero;
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
NASTYONA
아홉가지 기분 (2007)
- 아홉가지 기분
- 돌이킬 수 없는
- 바늘
- 어쩌면 처음부터 정해져 있던 이야기
- Empty
- 사라지지 않는, 밤
- Tete
- Judith
- 요단강
- To my grandfather
- 꿈속에서 (feat. Jood from Vivasoul)
- 잠들 때 까지
- 포옹
위와 같이 이렇게 선택자로 선택을 해준 뒤 list-style-type 속성으로 리스트의 디자인을 바꿔줄 수 있습니다.
list-style-type: decimal-leading-zero; 라고 하니 1부터 9까지의 숫자 앞에 0이 하나씩 붙은 디자인이 되었습니다.
NASTYONA
아홉가지 기분 (2007)
- 아홉가지 기분
- 돌이킬 수 없는
- 바늘
- 어쩌면 처음부터 정해져 있던 이야기
- Empty
- 사라지지 않는, 밤
- Tete
- Judith
- 요단강
- To my grandfather
- 꿈속에서 (feat. Jood from Vivasoul)
- 잠들 때 까지
- 포옹
list-style-type 속성의 값을 upper-alpha로 주면 이렇게 대문자 알파벳이 됩니다.
lower-alpha로 주면 소문자 알파벳이 됩니다.
NASTYONA
아홉가지 기분 (2007)
- 아홉가지 기분
- 돌이킬 수 없는
- 바늘
- 어쩌면 처음부터 정해져 있던 이야기
- Empty
- 사라지지 않는, 밤
- Tete
- Judith
- 요단강
- To my grandfather
- 꿈속에서 (feat. Jood from Vivasoul)
- 잠들 때 까지
- 포옹
list-style-type 속성의 값을 lower-roman으로 주면 이렇게 소문자 로마 숫자가 됩니다.
반대로 upper-roman은 역시 대문자 로마 숫자가 됩니다.
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 박스의 배경에 그라데이션 넣기 (0) | 2021.02.12 |
|---|---|
| CSS, 같은 페이지의 특정 위치로 링크시에 컬러 변화 (0) | 2021.02.10 |
| CSS 폰텔로 fontello 사용법 (0) | 2021.01.17 |
| CSS 전처리기 preprocessor (0) | 2021.01.17 |
| CSS 코드 경량화 minify (0) | 2021.01.15 |
댓글