분류 전체보기221 css list-style-image 프로퍼티로 이미지 마커 만들기 css list-style-image 프로퍼티로 이미지 마커 만들기 네 안녕하세요, 이번 포스팅에서는 이미지 마커를 만드는 방법에 대하여 알아보도록 하겠습니다. 이전 포스팅에서도 마커의 종류를 다양하게 쓸 수 있다는 것을 보여드렸는데, 그 마커들 외에도 우리가 사용하고 싶은 이미지를 마커로 이용할 수도 있습니다. 그때 사용하는 프로퍼티입니다. 그럼 이제 이를 어떻게 사용하는지 알아보도록 하겠습니다. 1. list-style-image 사용하여 이미지 마커 만들기 이 마커를 사용하게 되면 우리가 원하는 이미지를 마커로 사용할 수 있게 됩니다. 사용 방법은 아래와 같습니다. ul { list-style-image : url("media/marker.png") } 이런 식으로 해당 이미지의 주소를 적어서 나타.. 2023. 4. 24. css list-style-type 프로퍼티 이용하여 마커의 종류 지정하기 css list-style-type 프로퍼티 이용하여 마커의 종류 지정하기 네 안녕하세요, 이번 포스팅에서는 마커의 종류를 지정하는 방법에 대하여 알아보도록 하겠습니다. 우리가 기본적으로 제공이 되는 마커를 쓰게 되면 아무래도 조금은 밋밋해 보이는 경우가 존재를 하며, 때로는 형식이 있는 마커를 써야 할 때가 생깁니다. 그럴 때 쓰는 프로퍼티이며, 이를 어떤 식으로 사용하는지 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. list-style-type 프로퍼티로 마커 종류 지정하기 마커의 종류도 여러가지가 있습니다. 종류는 아래와 같습니다. list-style-type : disc /* 점 모양(기본값) */ list-style-type : circle /* 원 모양 */ list-st.. 2023. 4. 24. css list-style-position 프로퍼티로 마커 위치 조정하기 css list-style-position 프로퍼티로 마커 위치 조정하기 네 안녕하세요, 이번 포스팅에서는 마커의 위치를 조정하는 방법에 대하여 알아보도록 하겠습니다. 우리가 리스트를 작성을 하게 되면 리스트를 어디로 띄울지 결정을 하게 됩니다. 그럴 때 쓰는 프로퍼티인데, 이를 어떻게 쓰는지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. list-style-position : inside|outside 사용하여 마커 위치 조정하기 리스트에서 마커란 리스트를 표시하는 작은 원 또는 숫자 등을 이야기합니다. 그래서 마커가 어디에 위치하느냐에 따라서 리스트의 시작 위치가 달라집니다. 사용 방법은 아래와 같습니다. ul { background : goldenrod; padding :.. 2023. 4. 24. css background 프로퍼티로 리스트와 아이템에 배경 지정하기 css background 프로퍼티로 리스트와 아이템에 배경 지정하기 네 안녕하세요, 이번 포스팅에서는 리스트 또는 리스트 내에 있는 아이템에 배경을 지정하는 것을 해보겠습니다. background 프로퍼티가 이전에 제가 작성했던 포스팅에서 배경색을 지정하는 프로퍼티라고 했었죠? 리스트와 리스트에 있는 아이템에도 배경색을 지정할 수 있습니다. 그럼 이걸 어떻게 하는지 한 번 직접 해보도록 하겠습니다. 그리고 background 프로퍼티에 대하여 잘 모르시겠다면 제가 아래에 제 포스트 링크를 걸어두도록 하겠습니다. 2023.04.02 - [html, css, 자바스크립트] - css background 단축 프로퍼티 이용하여 배경 제어하기 css background 단축 프로퍼티 이용하여 배경 제어하기 c.. 2023. 4. 24. 이전 1 2 3 4 5 6 7 8 ··· 56 다음