본문 바로가기

html, css, 자바스크립트97

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.
css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기 css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기 네 안녕하세요, 이번 포스팅에서는 리스트를 꾸미는 방법애 대하여 알아보도록 할 건데, 그중에서 리스트를 꾸밀 때 스는 기본 프로퍼티에 대하여 간략히 알아보는 시간을 가져보려 합니다. 우리가 그냥 html 태그를 이용해서 리스트를 만들면 다소 밋밋해 보일 수 있습니다. 그래서 그럴 때 사용을 합니다. 그러면 그러한 프로퍼티가 어떤 것들이 있는지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 리스트 꾸미기 프로퍼티 알아보기 일단 리스트를 꾸미지 않은 html 태그와, 그걸 작성해서 열어 본 웹을 보여드리도록 하겠습니다. 커피 메뉴 Espresso Cappuccino Cafe Latte 기본적으로 이런 식으로 짭니다. 그럼 결.. 2023. 4. 24.