FastBoot 스킨 본문 글 목록(List-group: ul, ol) 스타일 조정

반응형

FastBoot 스킨 본문 글 목록(ul, ol : List-Group) 스타일 조정


블로그 글 작성시 내용별로 묶어 목록으로 작성하는 HTML 테그는 ul(순서 없는 글 목록) ol( 순서 있는 글 목록) 등이 있습니다.

FastBoot 글 목록 스타일 조절

 

 

티스토리 에디터에는 글 작성 메뉴에 글 목록 작성 항목이 있습니다. 적절히 사용하면 정리된 글을 쓰는데 유용합니다.

 

티스토리 에디터



여기서는 FastBoot 스킨 기본 css 스타일로 브라우저에 표시되는 글 목록 형태에 대해 언급하겠습니다.


 

순서 없는 글 목록(Unordered List : ul)


  • 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피
  • 홍차
  • 밀크


순서 있는 글 목록(Ordered List : ol)


  1. 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피
  2. 홍차
  3. 밀크


순서 없는 글 목록(ul) 에서는 글 목록 항목에 한 줄을 넘는 글이 있을 때 글 머리 기호와 텍스트가 구분되지 않고 표시됩니다.

순서있는 글 목록에서는(ol) 글 목록 항목에 한 줄을 넘는 글이 있을 때 글 머리 기호와 텍스트가 구분되고 텍스트들이 수직으로 정렬됩니다.



이러한 차이점은 css 스타일 상 글 머리 기호의 위치 설정의 차이입니다.



아래 내용은 FastBoot 스킨 글 목록의 기본 css 스타일입니다.


<ul> 순서 없는 글 목록 스타일

.article ul {

list-style-type:circle;
list-style-position: inside;

margin-top:15px;
margin-bottom:15px;
padding-left:5px;
display:block;
border-left:5px solid #eee;
}


<ol> 순서 있는 글 목록 스타일

.article ol {

list-style-type:decimal;
list-style-position: outside;

margin-top:10px;
margin-bottom:10px;
padding-left:20px;
display:block;
border-left:5px solid #4CA9D3;
}


list-style-position:속성은 글머리 기호의 위치를 지정합니다.

  • <ul>은 list-style-position: inside; 이고
  • <ol>은 list-style-position: outside;입니다.
  • inside는 글 머리 기호가 항목 텍스트에 포함되고 텍스트는 글 머리 기호 부터 시작합니다.
  • outside는 글 머리 기호가 항목 텍스트 외부에 표시되고 항목 텍스트에 포함되지 않습니다.


<ul> 글 목록에서 항목 텍스트를 세로로 정렬하기위해 <ul> 스타일에서 list-style-position: inside;를 list-style-position: outside;로 변경해보겠습니다.


  • 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피
  • 홍차
  • 밀크


변경된 ul 글 목록에서 글머리 기호가 사라지고 없습니다. css 스타일에서 보면


  • ul 스타일에서는 padding-left:5px;
  • ol 스타일에서는 padding-left:20px;입니다.


글 머리 기호가 위치할 공간이 부족함을 알 수 있습니다.
클래스 article에 overflow: hidden; 설정이 돼있어서 글머리 기호가 상위 요소 padding 영역에 표시되지 않는 것으로 보입니다. <ul>스타일에 padding: 20px를 설정하면
아래와 같이 글 머리 기호와 함께 표시됩니다.


  • 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피 커피
  • 홍차
  • 밀크



글 목록(ul, ol)의 스타일 주요 속성입니다.


  • list-style-type: 글 머리 기호 종류
  • list-style-position : 글머리 기호 위치, 위 예에서 언급됨
  • list-style-image:: 글머리 기호를 이미지로 표시
  • list-style: 위 세 속성을 모두 지정


<ul> list-style-type 속성


  • disc: •
    티스토리 에디터 기본
  • circle: ⚬
    FastBoot 기본 티스토리 에디터 아닌 다른 에디터에서 본 속성을 지정하지 않고 작성해서 티스토리로 불러오는 경우( 몇가지 방법이 있는 것으로 알고 있습니다)
  • square: ▪


<ol> list-style-type 속성


  • decimal: 1. 2. 3.
  • lower-alpha: a. b. c.
  • upper-alpha: A. B. C.
  • lower-roman: ⅰ. ⅱ. ⅲ.
  • upper-roman: Ⅰ. Ⅱ .Ⅲ.


list-style-type: none; 글 머리 기호 없음(공통 적용)

<ol type="1" start="50">: 순서가 50부터 시작


자세한 내용은 아래에 `w3cschool.com`의 해당 링크를 남깁니다.

요소별 속성별 w3cschool 링크


ps. 각자 선호하는 형태로 조정해서 쓸 수있습니다.

필자는 <ul>요소는 왼쪽바를 없애고(border-left: 0px;)(ul) <ul> <ol>공히 padding-left: 40px;를 지정해서 여백을 넓혀서 사용하고 있습니다.



★다른 글 보기

반응형
저작자표시
Trackback: Comment: 0

티스토리툴바