CSS7 워드프레스 특성 이미지 수직 정렬 CSS transform, flex ( WordPress Featured Image Vertical Align) 워드프레스 특성 이미지 수직 정렬 CSS transform, flex ( WordPress Featured Image Vertical Align) 포스팅 페이지와 목록에서 완벽한 수직 정렬을 위한 CSS 작성법 WordPress의 Featured Image를 다루다보면 포스팅 페이지와 목록에서의 디자인 일관성을 유지하는 것이 중요합니다. 특히 이미지의 수직 정렬은 사용자 경험에 큰 영향을 미칩니다. 이에 따라 포스팅 페이지와 목록에서의 Featured Image에 대한 CSS 작성법에 대해 알아보겠습니다. CSS 포스팅 페이지의 Featured Image 처리 body:not(.home) .cm-posts > article > .cm-featured-image { /* 여기에 포스팅 페이지 Feature.. 2024. 2. 22. CSS로 네온 텍스트를 만드는 방법 CSS로 네온 텍스트를 만드는 방법 네온 텍스트는 웹사이트에 현대적이고 미래적인 느낌을 주는 멋진 방법입니다. 이 포스트에서는 CSS와 애니메이션을 활용하여 네온 텍스트를 어떻게 만들 수 있는지 알아보겠습니다. CSS로 텍스트에 글로우 효과 추가하기 가장 기본적인 네온 효과는 텍스트에 글로우(glow)를 추가하는 것입니다. text-shadow CSS 속성을 사용해 이를 구현할 수 있습니다. .neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; } CSS로 "깜박임" 효과 추가.. 2023. 10. 11. [Bootstrap] 부트스트랩 시작하기 부트스트랩: 웹 페이지 디자인의 혁신 부트스트랩(Bootstrap)은 웹 페이지 디자인과 개발을 더욱 쉽고 효율적으로 만들어주는 프레임워크입니다. 원래는 트위터에서 사용하는 레이아웃과 요소들을 표준화하기 위해 만들어졌으나, 지금은 다양한 웹 페이지에서 활용되고 있는 매우 유명한 라이브러리입니다. 이 글에서는 부트스트랩의 기본적인 개념과 사용 방법에 대해 알아보겠습니다. 부트스트랩의 탄생 배경과 현재 상태 부트스트랩은 원래 트위터에서 레이아웃, 버튼, 폼 등의 디자인을 일관되게 만들기 위한 목적으로 시작되었습니다. 현재까지도 계속 업데이트되고 있으며, 메이저 버전 5까지 출시되어 있습니다. 초기의 트위터 특성은 점점 사라지고, 다양한 웹 페이지 디자인에 활용되고 있습니다. 부트스트랩은 CSS 전처리기인 S.. 2023. 10. 10. CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기: steps()함수 CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기 웹사이트의 텍스트를 동적이고 흥미롭게 만드는 방법 중 하나는 타자기 효과(typewriter effect)를 사용하는 것입니다. 이 효과는 텍스트가 점차적으로 나타나는 것처럼 보이게 해서 사이트 방문자의 주목을 끌 수 있습니다. 이 글에서는 순수 CSS만을 이용해 타자기 효과를 만드는 방법을 알아보겠습니다. 타자기 효과는 쉽게 만들 수 있다 타자기 효과를 구현하는 것은 그다지 어렵지 않습니다. 이 튜토리얼을 이해하기 위해서는 기본적인 CSS와 CSS 애니메이션에 대한 지식만 있으면 충분합니다. 우리가 만들 타자기 효과는 CSS의 steps() 함수를 이용해 텍스트 요소의 너비를 0%에서 100%까지 점차 변경하면서 텍스트.. 2023. 10. 9. 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율 유지 및 가운데 정렬: CSS와 jQuery 활용법 웹 디자인에서 썸네일 이미지나 대표 이미지를 사용할 때, 다양한 이미지의 가로세로 비율이 다를 경우 이를 통일한 디자인으로 표현하고자 하는 경우가 많습니다. 이를 위해 이미지를 해당 비율에 맞춰 자르고, 가운데 정렬하는 방법에 대해 소개하겠습니다. 원본 이미지의 가로세로 비율이 다양함 특정 영역에 이미지를 꽉 차게 표현하면서, 넘치는 부분은 잘라내야 함 CSS만을 활용하여 원본 이미지를 수정하지 않고 원하는 디자인을 구현하고자 함 해결 방법 1. HTML 구조 이미지는 최소 2개의 wrapper에 감싸져야 합니다. 이렇게 감싸진 영역을 활용하여 이미지를 가운데 정렬하고, 넘치는 부분을 잘라냅니다. 2. CSS 스타일링 .featImg.. 2023. 10. 6. Button scss hover not working 원인과 예제 SASS SCSS :hover 예제와 동작하지 않는 사례 - 원인과 해법 서론 SASS(SCSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 함수 등을 사용하여 스타일시트 작성을 간편하고 효율적으로 만들어줍니다. 그리고 :hover는 웹 개발에서 자주 사용되는 유용한 CSS 의사 클래스 중 하나입니다. 하지만 때때로, SASS(SCSS)를 사용할 때 :hover가 원하는 대로 동작하지 않는 사례들이 있습니다. 이러한 문제들을 해결하는 방법과 함께, :hover를 SASS(SCSS)에서 사용하는 예제들을 살펴보겠습니다. :hover 사용 예제 먼저, 간단한 예제를 통해 :hover를 SASS(SCSS)에서 어떻게 사용하는지 살펴보겠습니다. // SCSS .button { background-color:.. 2023. 8. 9. CSS 텍스트 네온사인 만드는 방법 네온 텍스트는 웹 사이트에 독특하고 현대적인 느낌을 더할 수 있는 멋진 기능입니다. 저도 항상 네온사인의 매력에 빠져들었고, CSS를 사용하여 그 효과를 다시 만들어보고 싶었습니다. 그래서 이번에는 네온사인 효과를 텍스트에 추가하는 방법에 대해 몇 가지 유용한 팁을 공유해보고자 합니다. 또한 CSS와 키프레임을 활용하여 다양한 네온사인 효과를 구현하는 방법도 알아보겠습니다. 다음은 우리가 만들 CSS 텍스트 네온사인입니다. 텍스트에 글로우 효과 추가 글로우 효과를 텍스트에 추가해보겠습니다. 이를 위해 CSS의 text-shadow 속성을 사용할 수 있습니다. text-shadow 속성은 여러 그림자를 적용할 수 있는데, 각 그림자는 쉼표로 구분하여 지정합니다. .neonText { color: #fff;.. 2023. 6. 14. 이전 1 다음
