영어공부

CSS Lists

2020. 1. 11. 13:48
목차
  1. HTML Lists and CSS List Properties
  2. Different List Item Markers
  3. Position The List Item Markers
  4. Remove Default Settings
  5. List - Shorthand property
  6. Styling List With Colors

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에 추가된 속성은 각 개인의 아이템에만 영향을 준다.

'영어공부' 카테고리의 다른 글

CSS Layout - The display Property  (0) 2020.01.14
CSS Tables  (0) 2020.01.14
CSS Links  (0) 2020.01.11
How To Add Icons  (0) 2020.01.09
CSS Fonts  (0) 2020.01.09
  1. HTML Lists and CSS List Properties
  2. Different List Item Markers
  3. Position The List Item Markers
  4. Remove Default Settings
  5. List - Shorthand property
  6. Styling List With Colors
'영어공부' 카테고리의 다른 글
  • CSS Layout - The display Property
  • CSS Tables
  • CSS Links
  • How To Add Icons
jeongsu
jeongsu
박정수가 공부한 자료를 남기기 위한 블로그
jeongsu
Park_jeong_su
jeongsu
전체
오늘
어제
  • 분류 전체보기 (254)
    • 제조산업 (11)
      • MES (8)
      • 반송 (0)
      • ERP (1)
    • dev (92)
      • 스프링 (2)
      • 데이터베이스 (20)
      • 프로그래밍 (5)
      • 알고리즘 (3)
      • Network (2)
      • trouble shooting (5)
      • 개인 프로젝트 (9)
      • 기타 (46)
    • 박정수 (85)
      • 자기소개 (2)
      • diary & 일상생활 (76)
      • 해외생활 - 중국편 (2)
      • 회고 (4)
    • 영어공부 (51)
    • 유용한 사이트 모음집 (13)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • MES 개발자
  • MES의 어려움
  • ERP
  • coffee-bytes
  • MES 전망
  • Gin
  • 배움의 목적
  • mes
  • MES 개발자를 하면 안되는 이유
  • tutorial
  • 협업프로그램
  • 에임시스템
  • java
  • MES 개발
  • recipe management system
  • MES 란
  • JPA
  • vscode
  • RMS란
  • MES 도망쳐
  • 본질이 존재할까?
  • oracle
  • spring
  • 어차피 뒤짐
  • w3cSchool
  • 회고
  • MES란
  • mermaid js
  • 스마트팩토리 전망
  • 비트코인

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.1.4
jeongsu
CSS Lists
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.