본문 바로가기

CSS60

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 배경 제어 프로퍼티로 배경 제어하기 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.

티스토리툴바