전체 글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. css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기 css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기 네 안녕하세요, 이번 포스팅에서는 리스트를 꾸미는 방법애 대하여 알아보도록 할 건데, 그중에서 리스트를 꾸밀 때 스는 기본 프로퍼티에 대하여 간략히 알아보는 시간을 가져보려 합니다. 우리가 그냥 html 태그를 이용해서 리스트를 만들면 다소 밋밋해 보일 수 있습니다. 그래서 그럴 때 사용을 합니다. 그러면 그러한 프로퍼티가 어떤 것들이 있는지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 리스트 꾸미기 프로퍼티 알아보기 일단 리스트를 꾸미지 않은 html 태그와, 그걸 작성해서 열어 본 웹을 보여드리도록 하겠습니다. 커피 메뉴 Espresso Cappuccino Cafe Latte 기본적으로 이런 식으로 짭니다. 그럼 결.. 2023. 4. 24. css overflow 프로퍼티로 콘텐츠 자르기 css overflow 프로퍼티로 콘텐츠 자르기 네 안녕하세요, 이번 포스팅에서는 콘텐츠를 자르는 방법에 대하여 알아보도록 하겠습니다. 우리가 html 문서를 작성을 하다 보면 불가피하게 글을 잘라야 하는 경우가 생깁니다. 그럴 때 쓰는 방법이며, 이걸 어떤 식으로 사용을 하는 지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. overflow : visible|hidden|scroll|auto 사용하여 콘텐츠 절삭 여부 결정하기 우리가 html 태그 내에서 사용하는 컨텐츠 자르기 여부를 결정짓는 프로퍼티는 overflow입니다. overflow 프로퍼티의 각각의 값들은 이러한 기능을 가집니다. overflow : visible /* 컨텐츠가 잘리지 않고 태그 영역을 넘어서 출력.. 2023. 4. 24. css visibility 프로퍼티로 태그 숨기거나 공개하기 css visibility 프로퍼티로 태그 숨기거나 공개하기 네 안녕하세요, 이번 포스팅에서는 html 태그를 숨기거나 공개하는 방법에 대하여 알아보도록 하겠습니다. 우리가 웹 페이지를 작성할 때 태그를 숨기거나 공개를 할 수도 있습니다. 예를 들어 괄호 채우기 문제를 만든다고 한다면, 이런 걸 적용해서 쓸 수 있습니다. 그래서 이번 포스팅에서는 그러한 방법을 한 번 보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. visibility : visible|hidden으로 태그 공개하거나 숨기기 기본적으로 html 태그는 공개가 되어있습니다. 그것이 html 태그의 기본 세팅이기도 합니다. 하지만 필요에 따라서 그 기능을 숨김으로 바꿔야 할 때가 있습니다. 앞서 제가 말씀드렸던 괄호나 빈칸 채우.. 2023. 4. 24. css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기 css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기 네 안녕하세요, 이번 포스팅에서는 html 태그를 수직으로 겹겹이 쌓는 방법에 대하여 알아보도록 하겠습니다. 이 방법은 사실 많이 쓰이는 방법은 아니지만, html 태그를 이용하여 간단한 웹 게임을 만들 때 쓰곤 합니다. 그래서 웹의 종류는 다양하며, 일반적인 웹 사이트의 한 종류를 만드실 분들도 계시겠지만, 웹 게임 등을 만드실 분들도 계시리라 생각합니다. 그래서 그런 분들을 위해 어떻게 사용을 하는지 보여드리려 합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. z-index 사용해보기 z-index를 사용할 때는 보통 블록 태그를 이용하여 많이 씁니다. 그중에 가장 대표적인 사례가 바로 div 태그입니다. 사용 방식은 아래와 같습니.. 2023. 4. 24. 이전 1 2 3 4 5 6 ··· 28 다음