전체 글221 css cursor 프로퍼티로 마우스 커서 제어하기 css cursor 프로퍼티로 마우스 커서 제어하기 네 안녕하세요, 이번 포스팅에서는 css로 마우스의 커서를 제어하는 방법에 대하여 알아보도록 하겠습니다. 우리가 마우스 커서를 올리면 마우스의 커서가 변합니다. 이 역시도 우리는 css로 제어가 가능합니다. 이러한 마우스 커서 제어를 할 수 있는 속성값은 정말 다양한데, 이번 포스팅에서는 그러한 마우스 커서를 제어할 수 있는 속성들이 어떤 것이 있는지 한 번 알아보도록 하겠습니다. 1. 마우스 커서 제어하기 : cursor 사용 css에서는 cursor라는 프로퍼티를 제공하며, 이를 통하여 마우스 커서를 제어를 할 수 있습니다. 마우스 커서 제어를 할 수 있는 속성값은 정말 많습니다. 제가 한 번 적어보겠습니다. alias : 통칭(별명) 커서 all-.. 2023. 4. 3. css box-shadow 속성 이용하여 박스에 그림자 넣기 css box-shadow 속성 이용하여 박스에 그림자 넣기 네 안녕하세요, 이번 포스팅에서는 이전 포스팅에 이어서 박스에 그림자를 넣는 방법에 대하여 알아보겠습니다. 텍스트에 음영을 줄 수 있는 것처럼, 박스에도 음영 효과를 줄 수 있습니다. 실제로 여러 가지 사이트들을 돌아다니다 보면 박스에 음영이 새겨져 있는 것을 종종 볼 수 있는데, 그러한 것들이 전부 css로 음영 효과를 입혀놓은 것들입니다. 그리고 텍스트에 음영을 넣는 방법이 궁금하신 분들은 아래에 링크를 걸어둘 테니 읽어주시면 감사하겠습니다. 2023.04.03 - [html, css, 자바스크립트] - css text-shadow 속성 이용하여 텍스트에 그림자 넣기 css text-shadow 속성 이용하여 텍스트에 그림자 넣기 css t.. 2023. 4. 3. css text-shadow 속성 이용하여 텍스트에 그림자 넣기 css text-shadow 속성 이용하여 텍스트에 그림자 넣기 네 안녕하세요, 이번 포스팅에서는 css를 이용하려 텍스트에 그림자를 넣는 방법에 대하여 알아보도록 하겠습니다. 보통 이렇게 웹이나 앱을 꾸미는 사람들을 퍼블리셔라고 부릅니다. 이 분들은 주로 이러한 기능을 넣기 위해서 포토샵이나 그 외 일러스트 관련 프로그램을 많이 쓰곤 하는데, 이러한 기능을 덧붙일수록 페이지의 로딩 속도는 점점 느려집니다. 그렇기 때문에 html에서는 그러한 기능을 어느 정도 제공을 해줍니다. 그래서 그들을 이용하면 좀 더 효율적으로 제작을 할 수 있습니다. 그럼 지금부터 알아보도록 하겠습니다. 1. 텍스트에 그림자 넣기 : text-shadow 사용 우리가 웹 페이지를 만들 때 제목을 많이 꾸미곤 합니다, 그럴 때 이.. 2023. 4. 3. css background 단축 프로퍼티 이용하여 배경 제어하기 css background 단축 프로퍼티 이용하여 배경 제어하기 네 안녕하세요, 이번 포스팅에서는 배경 제어 단축 프로퍼티로 배경을 제어해 보도록 하겠습니다. 저번 포스팅에서는 배경 제어 프로퍼티의 종류를 알아보았는데, 그걸 일일이 적용을 시키려면 효율이 떨어져서 단축 프로퍼티를 씁니다. 그래서 단축 프로퍼티를 어떻게 쓸 수 있는 지 한번 알아보도록 하겠습니다. 그리고 배경 제어 프로퍼티를 잘 모르시는 분들을 위해서 기본 개념에 대한 설명을 해 둔 포스트 링크를 아래에 기재를 해두도록 하겠습니다. 2023.04.02 - [html, css, 자바스크립트] - css 배경 제어 프로퍼티로 배경 제어하기 css 배경 제어 프로퍼티로 배경 제어하기 css 배경 제어 프로퍼티로 배경 제어하기 네 안녕하세요, 이.. 2023. 4. 2. 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. 이전 1 2 3 4 5 6 7 8 ··· 28 다음