CSS / list-style-position / 목록의 마커 위치 정하는 속성

개요

list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다.

  • 기본값 : outside
  • 상속 : Yes
  • 애니메이션 : No
  • 버전 : CSS Level 1

문법

list-style-position: inside | outside | initial | inherit
  • inside : 문단 안쪽에 놓습니다.
  • outside : 문단 바깥쪽에 놓습니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .os {
        list-style-position: outside;
      }
      .is {
        list-style-position: inside;
      }
    </style>
  </head>
  <body>
    <p>list-style-position: outside;</p>
    <ul class="os">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</li>
    </ul>
    <p>list-style-position: outside;</p>
    <ul class="is">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</li>
    </ul>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 4.0+
  • Opera : 3.5+
  • Safari : 1.0+

Related Posts

CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / text-align / 문단 정렬하는 속성

CSS / text-align / 문단 정렬하는 속성

text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬입니다. right : 오른쪽 정렬입니다. center : 가운데 정렬입니다. justify : 양쪽 정렬입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 맞추기 ...

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / 이미지 가운데 정렬하는 방법

CSS / 이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...

CSS / 기초 / !important

CSS / 기초 / !important

개요 CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. 문법 property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 ...

CSS / list-style-image / 목록의 마커로 이미지 사용하기

CSS / list-style-image / 목록의 마커로 이미지 사용하기

개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...

CSS / 구글 웹폰트 사용하는 방법

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다. + 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다. 아래에 있는 검은 색 바를 클릭합니다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

개요 word-wrap으로 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈합니다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. word-break 속성의 값이 keep-all이면 단어가, break-all이면 ...