IT & 기타/CSS 27

CSS로 배경 이미지를 높이에 맞게 자동으로 설정하는 방법 (자체 정리용)

배경 이미지를 설정하는 경우 브라우저 폭에 맞게 너비를 100%, 높이를 auto로 맞추어 추가하는 방법..bg_banner_image { background-size: 100% auto; background-position: center top; background-repeat: no-repeat; } .bg_banner_image::after { content: ''; display:block; padding: 15%; } // 출처: https://stackoverflow.com/questions/40520604/set-background-image-width-100-height-auto 또 다른 방법.#sample-id { background: url(../images/sample.jpg) #20..

IT & 기타/CSS 2018.09.07

당구장 기호 참조 마크 HTML / CSS 코드

글을 작성할 때 간혹 당구장 표시 기호(※)를 사용하고 싶을 때가 있습니다. 당구장 기호가 일본과 우리나라 외에는 사용되지 않는 매우 비효율적인 기호이므로 사용하지 말라는 글도 있습니다. 당구장 기호를 추가하려는 경우 다음 코드를 사용하면 됩니다.UNICODEU +0203B HEX CODE ※ HTML CODE ※ CSS CODE \203B 영어로는 Reference Mark(참조 마크)라고 하네요. https://www.toptal.com/designers/htmlarrows/punctuation/reference-mark/를 참고해보세요. 거의 사용하지 않지만 간혹 필요할 때가 있어서 필요할 때 찾을 수 있도록 글로 남겨봅니다.

IT & 기타/CSS 2018.04.25

이미지 가운데 정렬 CSS (자체 정리용)

이미지 가운데 정렬 CSS 이미지를 가운데 정렬할 때 사용할 수 있는 CSS img.center { display: block; margin: 0 auto; } parent 요소에 다음 CSS를 적용하는 것도 가능하다. text-align: center; 유용한 가운데 정렬 방법 Div 내의 Div를 가운데 정렬시키고 싶은 경우 다음 글을 참고해보세요. div 내의 div를 중앙에 정렬하려면 (CSS) - 워드프레스 정보꾸러미 어떤 글에서 박스를 가운데에 정렬되게 하고 싶은 경우가 많을 것입니다. div는 align 속성을 가지고 제어가 잘 되지 않습니다. 이런 경우 다음과 같이 두 개의 div를 중첩하여 사용하여 쉽게 중앙 www.thewordcracker.com 상황에 따라 위의 글에 제시된 방법을 ..

IT & 기타/CSS 2018.02.05

마우스를 올려놓을 때 이미지에 그림자 효과주기 (CSS)

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

IT & 기타/CSS 2018.01.31

워드프레스와 CSS

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

IT & 기타/CSS 2018.01.04

[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" 버튼을 아래 그림과 같이 이미지로 변경할 수 있습니다("워드프레스 '빠른 상담 신청' 컨택트 폼 작업" 참고).

IT & 기타/CSS 2017.12.01

HTML과 CSS로 심플한 메뉴를 추가했습니다

티스토리 스킨 중에서 기본 스킨 중 하나인 #1을 사용 중입니다. 레이아웃이 깔끔하여 마음에 드네요. 하지만 메뉴가 없습니다. "메뉴 관리"를 클릭하면 "지금 사용하시는 스킨은 메뉴를 지원하지 않습니다. 메뉴를 지원하는 스킨으로 변경후 사용하시기 바랍니다."라는 안내 문구가 뜨네요. 그래서 카테고리(분류) 드롭다운 메뉴를 없애고 대신 Home 메뉴와 몇 가지 카테고리 메뉴가 포함된 가로 메뉴(수평 메뉴)를 추가했습니다. 저는 Dynamicdrive라는 사이트에서 제공하는 HTML 코드와 CSS를 그대로 사용했습니다. Dynamicdrive 사이트로 이동한 다음 상단 메뉴에서 CSS CODES > Horizontal CSS Menus(가로 CSS 메뉴)를 클릭합니다. Horizontal CSS Menus ..

IT & 기타/CSS 2017.10.16