반응형
목록을 구분 짓고 꾸미는 방법에는 list-style-type과 list-style-image이 있어요.
list-style-image는 말 그대로 이미지를 이용해서 목록 앞에 나타내는 것이고,
list-style-type은 속성을 이용해서 나타내는 것이예요.
훨씬 예쁘게 꾸미는것이 목적이라면 list-style-image를 사용하는게 더 좋겠어요.
list-style-type은 여러가지 속성이 있어요. 두루두루 유용하게 쓰입니다.
문서를 쓰다보면 1, 2, 3... 또는 a, b, c...등으로 순서를 열거해야 할 일이 있는데, 그때 list-style-type을 사용해주시면 돼요.
번호부터 알파벳 소문자/대문자, 로마자 소문자/대문자 등 다양한 속성으로 li를 꾸밀 수 있어요.
<ul style="list-style-type:decimal;">
<li>list-style-type</li>
<li>으로</li>
<li>목록 꾸미기</li>
</ul>
결과는 아래처럼 나와요.
list-style-type의 많은 속성 중에 자주 사용하는 것만 적어볼게요.
disc : 검은원
circle : 하얀원
square 사각형
decimal : 숫자
lower-alpha : 알파벳 소문자
lower-roman : 로마자 소문자
upper-alpha : 알파벳 대문자
upper-roman : 로마자 대문자
cjk-ideographic : 한자 숫자
반응형
'공부' 카테고리의 다른 글
사이트맵, RSS 제출하기-티스토리 (0) | 2022.01.11 |
---|---|
티스토리 - 네이버 웹마스터 도구 연결 (0) | 2022.01.10 |
티스토리-구글서치콘솔 (Google Search Console) 연결 (0) | 2022.01.09 |
썸네일 크기 줄이고 본문 영역 넓게 쓰기-티스토리 오디세이 Odyssey 스킨 (0) | 2022.01.02 |
목록태그 li (2) | 2020.11.12 |