CSS Lists

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

html list 그리고 css list 속성

html 에는 2가지 종류의 list 타입이 존재한다.

unordered lists - 총알과 같은 마크 되어진 아이템 리스트

ordered lists 문자나 숫자로 마크되어진 아이템 리스트

 

css list 속성은 너에게 허용한다.

 

순서가 있는 리스트를 위해 다른 list item 마커를 설정한다?

순서가 없는 리스트를 위해 다른 리스트 아이템 마커를 설정한다.

list item 마커로서 이미지를 설정한다.

list 그리고 list items 들에게 배경색을 추가한다.

 

Different List Item Markers

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

 

다른 리스트 아이템 마커

 

list-style 속성은 아이템 마커의 종류를 명시한다.

다음의 예제는 리스트 아이템 마커의 몇가지 이용성을 보여준다?

 

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

 

 

list item 마커의 위치

 

list-style-position 의 속성은 list-item markers의 위치를 명시한다.

"list-style-position: outside;" 은 총알 모양의 점이 list item 바깥편에 있어야 함을 명시한다.

list item 의 각선의 시작은 수직적으로 배열된다.

이것은 기본설정이다.

 

"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

 

"list-style-position: inside;"  은 총알모앙의 점이 아이템 리스트의 안쪽에 위치함을 의미한다.

아이템 리스트의 한 부분으로서 이것은 텍스트의 한 부분이 될것이고, 텍스트의 시작을 밀어낼 것이다.

 

 

Remove Default Settings

The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:

 

기본 설정 지우기

 

list-style-type:none 속성은 마크나 총알 모양의 것을 지우기 위해 사용되어질수 있다.

리시트는 기본 마진이나 패딩을 가지고 있음을 주의하라.

이것을 지우기 위해선 margin:0과 패딩:0을 추가하라. 

 

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

 

List 짧은 속성

list-style 속성은 짧게 쓴 속성이다. 이것은 하나의 데코레이션 안의 모든 속성 리스트를 설정하기 위해 사용한다.

 

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property will be inserted, if any.

 

짧은 속성을 사용할떈, 속성의 값에는 순서이다.

 

 

 

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items:

 

색으로 스타일링 하기

우리는 또한 색으로 스타일링을 할수 있다. 그들을 좀더 흥미롭게 보이게 하기 위해

<ol> 이나 <ul> 태그에 추가된 어떤것은 전체 리스트의 영향을 준다.

반면, <li> tag에 추가된 속성은 각 개인의 아이템에만 영향을 준다.