본문 바로가기

분류 전체보기221

css 배경 제어 프로퍼티로 배경 제어하기 css 배경 제어 프로퍼티로 배경 제어하기 네 안녕하세요, 이번 포스팅에서는 css를 이용하여 배경을 제어해 보도록 하겠습니다. css제가 css 포스팅 첫 시간에 맛보기로 보여드린 예제 중에 배경도 같이 제어를 했었는데, 이번 시간에는 그걸 좀 더 자세히 알아보고, 배경을 제어하도록 도와주는 기능들이 어떤 것들이 있는 지 한 번 살펴보는 시간을 가지도록 하겠습니다. 그럼 지금부터 같이 보시죠. 1. 배경을 다룰 때 쓰는 프로퍼티들(background-color, bacground-image, bakcground-position, background-size, background-repeat, background-origin) 배경을 다루는 프로퍼티들은 크게 6가지 입니다. background-color.. 2023. 4. 2.
css border-image 프로퍼티로 이미지 테두리 만들기 css border-image 프로퍼티로 이미지 테두리 만들기 네 안녕하세요, 이번 포스팅에서는 테두리를 이미지로 한 번 만들어보는 시간을 가져보려 합니다. 우리가 흔히 보는 테두리가 그냥 선으로 이루어져 있는 것들도 있지만, 간혹 보면 테두리가 어떤 패턴 같은 걸로 이루어져 있는 것을 본 적이 있으실 겁니다. 그런 테두리들은 다 이미지 테두리를 적용을 한 사례입니다. 이러한 이미지 테두리는 테두리를 좀 더 다채롭게 보이게 하기 위해서 정말 많이 씁니다. 그럼 지금부터 함께 보시죠. 1. 이미지 테두리 프로퍼티 : border-image 사용 이미지 테두리를 적용시키기 위해서는 border-image라는 프로퍼티를 이용을 합니다. 이 프로퍼티를 구성하는 기본 형태는 이러합니다. border-image :.. 2023. 4. 2.
css border-radius 속성으로 각각의 테두리에 둥근 모서리 적용시키기 css border-radius 속성으로 각각의 테두리에 둥근 모서리 적용시키기 네 안녕하세요, 이번 포스팅에서는 각각의 테두리에 둥근 모서리를 적용시키는 방법에 대하여 알아보겠습니다. 이전 포스팅에서 쓴 모든 모서리를 둥글게 만드는 방벙에 이어서 작성하는 포스팅입니다. 모든 모서리를 둥글게 만드는 방법이 궁금하신 분들은 아래 포스트를 기재해 둘 테니, 그곳을 방문해 주시면 감사하겠습니다. 2023.03.19 - [html, css, 자바스크립트] - css border-radius 속성으로 모든 모서리 둥글게 만들기 css border-radius 속성으로 모든 모서리 둥글게 만들기 css border-radius 속성으로 모든 모서리 둥글게 만들기 네 안녕하세요, 이번 포스팅에서는 css에서 쓰는 고.. 2023. 3. 19.
css border-radius 속성으로 모든 모서리 둥글게 만들기 css border-radius 속성으로 모든 모서리 둥글게 만들기 네 안녕하세요, 이번 포스팅에서는 css에서 쓰는 고급 테두리 꾸미기 기능 중에서 테두리를 둥글게 만드는 방법에 대하여 알아보도록 하겠습니다. 가금 테두리를 꾸밀 때 각이 있는 테두리보다는 각이 없는 둥그스름한 테두리가 더 어울리는 경우가 있습니다. 그래서 css로 테두리를 꾸밀 수 있는 고급 기능 중에서는 둥근 테두리를 만들 수 있는 기능을 지원합니다. 그럼 지금부터 이를 어떻게 사용을 하는지 알아보도록 하겠습니다. 1. css로 둥근 모서리의 테두리 만들기(border-radius) css에서 둥근 모서리를 만드는 기능을 제공하는 프로퍼티의 이름은 border-radius입니다. 여기에서 사용되는 픽셀값은 모서리의 반지름 값입니다. .. 2023. 3. 19.

티스토리툴바