본문 바로가기
이미지 가운데 정렬 CSS (자체 정리용) 이미지를 가운데 정렬할 때 사용할 수 있는 CSS img.center { display: block; margin: 0 auto; } parent 요소에 다음 CSS를 적용하는 것도 가능하다. text-align: center; 2018. 2. 5.
마우스를 올려놓을 때 이미지에 그림자 효과주기 (CSS) 크몽이라는 사이트에서 카테고리 이미지에 마우스를 올리면 그림자 효과가 생깁니다. 위의 그림과 같이 마우스를 올려놓을 때 그림자 효과를 주려면 다음과 같은 CSS 코드를 사용할 수 있습니다. #example:hover { box-shadow: 1px 1px 20px #ddd; } 기본적인 사항이지만 워드프레스 사용자모임에 이와 관련된 질문이 올라와서 여기에 공유해봅니다. 이런 간단한 효과를 위해 플러그인을 이용하는 것은 전혀 권장하지 않습니다. 플러그인 개수는 가능한 한 최소한으로 유지하는 것이 좋습니다. box-shadow에 대해서는 https://www.w3schools.com/cssref/css3_pr_box-shadow.asp 글을 참고해보세요. 워드프레스에서 CSS는 다양한 방식으로 추가할 수 있.. 2018. 1. 31.
워드프레스와 CSS 워드프레스에서는 Avada, Enfold, BE 테마 등 많은 유료 테마에서 페이지 빌더를 탑재하여 코딩 지식이 없어도 멋진 사이트를 만들 수 있습니다. 하지만 페이지 빌더 내의 옵션만으로는 부족할 때가 있습니다. 웹사이트를 만들 때 CSS에 대해 조금 알면 많은 도움이 됩니다. 저는 WordPress.com에서 가입형 워드프레스에 가입하고 CSS Custom(현재는 제공되지 않고, 유료 플랜에 포함됨)을 구입하여 CSS로 레이아웃을 조정하는 방법을 익혔습니다. (가입형 워드프레스는 개인적인 블로그나 심플한 회사 사이트를 운영하는 경우에 고려해볼 수 있을 것 같습니다.) CSS 책(지금도 책장에 꽂혀 있음)을 하나 구입하여 한 번 읽고, 이후에는 모르는 것이 있으면 워드프레스 포럼에 질문하면서 많은 것을.. 2018. 1. 4.
[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" 버튼을 아래 그림과 같이 이미지로 변경할 수 있습니다("워드프레스 '빠른 상담 신청' 컨택트 폼 작업" 참고). 2017. 12. 1.
HTML과 CSS로 심플한 메뉴를 추가했습니다 티스토리 스킨 중에서 기본 스킨 중 하나인 #1을 사용 중입니다. 레이아웃이 깔끔하여 마음에 드네요. 하지만 메뉴가 없습니다. "메뉴 관리"를 클릭하면 "지금 사용하시는 스킨은 메뉴를 지원하지 않습니다. 메뉴를 지원하는 스킨으로 변경후 사용하시기 바랍니다."라는 안내 문구가 뜨네요. 그래서 카테고리(분류) 드롭다운 메뉴를 없애고 대신 Home 메뉴와 몇 가지 카테고리 메뉴가 포함된 가로 메뉴(수평 메뉴)를 추가했습니다. 저는 Dynamicdrive라는 사이트에서 제공하는 HTML 코드와 CSS를 그대로 사용했습니다. Dynamicdrive 사이트로 이동한 다음 상단 메뉴에서 CSS CODES > Horizontal CSS Menus(가로 CSS 메뉴)를 클릭합니다. Horizontal CSS Menus .. 2017. 10. 16.