[CSS] 이미지에 그림자 효과 넣기

이미지에 그림자 효과를 적용하면 시각적으로 깊이감을 주고, 디자인을 보다 돋보이게 할 수 있습니다. CSS의 box-shadow 속성을 사용하면 다양한 그림자 스타일을 적용할 수 있습니다. 이번 글에서는 box-shadow의 기본 사용법과 다양한 응용 예제를 소개합니다.  box-shadow 기본 사용법box-shadow 속성은 요소에 그림자를 추가하는 속성입니다.See the Pen box-shadow 기본 사용법 by saladent (@saladent) on CodePen.위 코드에서는 이미지에 x축 5px, y축 5px으로 그림자를 설정했으며, 블러 반경은 10px로 흐림 효과를 주었습니다. rgba(0, 0, 0, 0.5)는 반투명한 검은색을 의미합니다.  다양한 box-shadow 설정그림자..

• format_list_bulleted CSS
• · 2025. 1. 9.
• textsms

[CSS] 이미지 테두리 둥글게 만들기

이미지의 모서리를 둥글게 만들면 부드러운 디자인을 연출할 수 있습니다. CSS에서는 border-radius 속성을 사용하여 모서리의 둥글기 정도를 쉽게 조절할 수 있습니다. 이번 글에서는 다양한 border-radius 설정 방법과 응용 예제를 소개합니다.  border-radius 기본 사용법border-radius 속성은 요소의 각 모서리를 둥글게 만드는 데 사용됩니다.아래 예제에서는 이미지의 모든 모서리를 10픽셀 반경으로 둥글게 설정했습니다.See the Pen Untitled by saladent (@saladent) on CodePen.  특정 모서리만 둥글게 만들기각 모서리를 개별적으로 조정하려면 border-radius 속성에 네 가지 값을 지정할 수 있습니다.아래 설정에서는 이미지의 ..

• format_list_bulleted CSS
• · 2025. 1. 8.
• textsms

[CSS] #과 .의 차이점

CSS에서 #과 .은 각각 아이디(id)와 클래스(class)를 나타내는 선택자입니다. 이 두 선택자는 웹 페이지의 요소에 스타일을 적용하는 데 사용됩니다. 그러나 각각의 선택자는 다음과 같이 서로 다른 용도와 사용법을 가지고 있습니다.  # 선택자# 선택자는 요소의 고유한 아이디를 나타내며, 해당 아이디를 가진 요소를 선택합니다. 아이디는 문서 내에서 유일해야 합니다. 즉, 동일한 아이디 를 가진 두 개 이상의 요소는 없어야 합니다.#header { background-color: #333; color: #fff;}위 예제는 아이디가 'header'인 요소에 배경색과 텍스트 색상을 지정하는 CSS입니다.  . 선택자. 선택자는 class를 나타내며, 해당 class를 가진 모든 요소를 선택합니다. ..

• format_list_bulleted CSS
• · 2024. 5. 7.
• textsms

[CSS] 이미지 회전하기

웹 디자인에서 이미지를 회전하는 것은 종종 필요한 작업입니다. 이미지를 회전하면 디자인에 다양한 효과를 줄 수 있으며, 사용자의 시선을 끌거나 콘텐츠를 강조할 수 있습니다. CSS를 사용하여 이미지를 회전하는 방법을 알아보겠습니다.  transform 속성 사용하기가장 간단한 방법은 CSS의 transform 속성을 사용하여 이미지를 회전하는 것입니다. transform 속성은 요소를 변형할 때 사용되며, rotate() 함수를 사용하여 요소를 회전시킬 수 있습니다.See the Pen 이미지 회전 -1 by saladent (@saladent) on CodePen.rotate() 함수에 전달되는 값은 회전할 각도를 나타냅니다. 양수 값은 시계 방향으로, 음수 값은 반시계 방향으로 회전합니다. 따라서 ..

• format_list_bulleted CSS
• · 2024. 5. 6.
• textsms

[CSS] 텍스트에 짧은 밑줄(라인) 만들기

텍스트에 밑줄 만들기 텍스트 밑에 짧은 밑줄을 만드는 방법입니다. 밑줄은 border 속성을 이용해 만들 수 있으며 width값을 조절하면 긴 밑줄도 만들 수 있습니다. See the Pen css - underline by saladent (@saladent) on CodePen.

• format_list_bulleted CSS
• · 2022. 3. 8.
• textsms

[CSS] display 속성 none, inline, block, inline-block 개념과 차이

display 속성 display 속성은 요소를 어떻게 보여줄지를 결정합니다. none, inline, block, inline-block 총 4가지 속성값이 있습니다. 아래 예시를 통하여 4가지 속성값의 개념과 차이를 알아보겠습니다. BOX 1 BOX 2 BOX 3 none 요소를 숨김처리 합니다. visibility 속성을 hidden으로 설정한 것과 달리 공간을 차지 않고 숨김처리합니다. See the Pen css - display : none by saladent (@saladent) on CodePen. inline 새 라인에서 시작하지 않고 내용만큼 너비를 차지합니다. 너비와 높이를 설정하려고 해도 효과가 없습니다. See the Pen css - display : inline by sala..

• format_list_bulleted CSS
• · 2022. 3. 6.
• textsms