크몽이라는 사이트에서 카테고리 이미지에 마우스를 올리면 그림자 효과가 생깁니다. 위의 그림과 같이 마우스를 올려놓을 때 그림자 효과를 주려면 다음과 같은 CSS 코드를 사용할 수 있습니다. #example:hover { box-shadow: 1px 1px 20px #ddd; } 기본적인 사항이지만 워드프레스 사용자모임에 이와 관련된 질문이 올라와서 여기에 공유해봅니다. 이런 간단한 효과를 위해 플러그인을 이용하는 것은 전혀 권장하지 않습니다. 플러그인 개수는 가능한 한 최소한으로 유지하는 것이 좋습니다. box-shadow에 대해서는 https://www.w3schools.com/cssref/css3_pr_box-shadow.asp 글을 참고해보세요. 워드프레스에서 CSS는 다양한 방식으로 추가할 수 있..

텍스트 입력 상자(textarea)에서 스크롤바를 없애는 방법 텍스트 입력 상자(textarea)에서 스크롤바 없애려면 다음과 같이 overflow: hidden이나 resize:none을 추가하면 됩니다. - 또는 - 보통은 다음과 같이 설정하는 것이 최선 같습니다. CSS를 사용하여 숨기는 방법도 있습니다. HTML: CSS: .scroll::-webkit-scrollbar { display: none; } 이 방식으로 하면 파이어폭스(Firefox)에서는 작동하지 않을 수 있습니다만, 파이어폭스 점유율이 워낙 낮아서 무시해도 될 것 같습니다. jQuery 방식도 가능합니다. 다음과 같은 코드를 사용하면 스크롤바가 제거되고 높이가 자동으로 조정된다고 합니다. $('textarea').each(func..

워드프레스에서는 Avada, Enfold, BE 테마 등 많은 유료 테마에서 페이지 빌더를 탑재하여 코딩 지식이 없어도 멋진 사이트를 만들 수 있습니다. 하지만 페이지 빌더 내의 옵션만으로는 부족할 때가 있습니다. 웹사이트를 만들 때 CSS에 대해 조금 알면 많은 도움이 됩니다. 저는 WordPress.com에서 가입형 워드프레스에 가입하고 CSS Custom(현재는 제공되지 않고, 유료 플랜에 포함됨)을 구입하여 CSS로 레이아웃을 조정하는 방법을 익혔습니다. (가입형 워드프레스는 개인적인 블로그나 심플한 회사 사이트를 운영하는 경우에 고려해볼 수 있을 것 같습니다.) CSS 책(지금도 책장에 꽂혀 있음)을 하나 구입하여 한 번 읽고, 이후에는 모르는 것이 있으면 워드프레스 포럼에 질문하면서 많은 것을..

가령 컨택트 폼에서 '제출' 혹은 '보내기' 버튼을 이미지로 변경하고 싶은 경우가 있습니다. 이 경우에 이용할 수 있는 CSS 코드입니다. html 소스: CSS 코드:input#search { background:url(../search-icon.png); background-repeat: no-repeat; width:40px; height:40px; border: 0; } (출처: stackoverflow) 가령 Contact Form 7의 "Send" 버튼을 아래 그림과 같이 이미지로 변경할 수 있습니다("워드프레스 '빠른 상담 신청' 컨택트 폼 작업" 참고).