워드프레스에서 블로그를 하면 이미지 삽입이나 링크를 많이 사용하게 되고, 가끔 이미지에 테두리를 추가하거나 버튼 형식의 링크를 만들고 싶은 경우가 있습니다. 이럴 때 플러그인 없이 미리 CSS에 클래스를 등록해 놓으면 매우 편리합니다. 이 글에서는 워드프레스에서 플러그인 없이 이미지 테두리와 버튼 스타일 링크를 적용하는 방법을 알아보겠습니다.
플러그인 없이 워드프레스에서 이미지 테두리와 버튼 스타일 링크를 적용하는 방법
저는 워드프레스에서 블로그를 운영하면서 사용자 정의 CSS에 버튼 스타일 링크와 이미지 테두리를 추가하는 클래스를 만들어 놓고 필요할 때마다 활용하고 있습니다. 이번 글에서 플러그인 없이 워드프레스에서 이미지 테두리와 버튼 스타일 링크를 적용하는 방법을 자세히 알려드리겠습니다.
1. 사용 예제
먼저, 아래는 오늘 소개해 드릴 방법을 적용한 결과입니다. 첫 번째 예제처럼 이미지에 테두리가 있고 없고에 따라 큰 차이가 있는 것은 아니지만, 이미지에 테두리가 있을 경우 구분이 확실히 되어 보기 편할 때가 있습니다. 두 번째 버튼 스타일의 링크도 일반 링크보다 눈에 잘 띄는 효과가 있습니다.
① 이미지 테두리
[테두리 없는 이미지]
[테두리 있는 이미지]
② 버튼 스타일 링크
2. 이미지 테두리와 버튼 스타일 CSS 코드 만들기
① 이미지 테두리 CSS 코드 만들기
이미지에 테두리를 추가해 주는 클래스 코드는 아래와 같습니다. 클래스명은 ‘border’이고, 테두리 굵기는 1px, 테두리 색상은 연한 회색입니다.
테두리 색상을 변경하고 싶다면 아래 사이트에서 원하는 색상의 HEX 코드를 복사하여 #ccc 에 붙여넣기 하면 됩니다.
.border img {
border: 1px solid #ccc;
}
② 버튼 스타일 CSS 코드 만들기
버튼 스타일 CSS는 아래 사이트에서 쉽게 만들 수 있습니다.
버튼 CSS 사이트(Best Button Generator)에는 이미 여러가지 버튼 스타일이 만들어져 있어, 원하는 스타일을 선택하여 바로 사용할 수도 있고 수정해서 사용할 수도 있습니다.
아래 화면의 ①번에서 마음에 드는 버튼 스타일을 클릭하고 ②에서 스타일을 원하는 데로 수정합니다. 수정이 완료되면 ③에 원하는 클래스명을 입력하고 ④ ‘Get Code’를 클릭하면 ⑤번과 같이 CSS 코드가 생성됩니다. 생성된 코드 중 하이라이트 된 부분을 모두 복사합니다 (<a> ~ </a> 부분은 제외합니다)
.button1 {
box-shadow: 0px 10px 14px -7px #276873;
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color:#599bb3;
border-radius:8px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:20px;
font-weight:bold;
padding:13px 32px;
text-decoration:none;
text-shadow:0px 1px 0px #3d768a;
}
.button1:hover {
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
background-color:#408c99;
}
.button1:active {
position:relative;
top:1px;
}
3. 사용자 정의 CSS 코드 추가하기
다음으로 준비한 이미지 테두리 추가용 CSS와 버튼 스타일 링크 CSS 코드를 워드프레스 사용자 정의 CSS에 추가해 보겠습니다.
필요한 클래스를 추가하기 위해, 먼저 워드프레스 관리자 화면에서 ‘디자인’ → 사용자 정의하기’ → ‘추가 CSS’ 를 순서대로 클릭합니다.
그리고 아래 화면과 같이 앞서 작성한 CSS 코드를 붙여넣기 한 후 ‘저장’을 클릭하여 적용합니다.
4. 추가한 클래스 사용하기
이미지 테두리 추가 클래스와 버튼 스타일 링크 클래스의 CSS 코드 작성 및 등록까지 모든 준비가 완료되었습니다. 이제 등록된 클래스를 사용하기만 하면 됩니다.
먼저 이미지에 테두리 클래스를 적용하는 방법은 다음과 같습니다.
마우스로 테두리를 추가할 이미지 선택 → ② 설정을 클릭 → ③ 블록을 클릭 → 고급 클릭 → ‘추가 CSS 클래스’ 에 위에서 등록한 ‘border’ 입력
링크에 버튼 스타일 클래스를 추가하는 방법도 동일합니다. 아래와 같이 링크를 마우스로 선택한 후 ‘추가 CSS 클래스’에 위에서 등록한 ‘botton1’ 클래스를 입력하면 됩니다.
아래 화면은 ‘border’, ‘button1’ 클래스를 적용한 결과입니다. 등록한 클래스를 사용하면 쉽게 이미지에 테두리를 추가하고 버튼 스타일의 링크를 만들 수 있습니다.
오늘은 플러그인 없이 워드프레스에서 이미지 테두리와 버튼 스타일 링크를 적용하는 방법을 알아보았습니다. 자주 사용하는 CSS 코드를 클래스로 미리 등록해 두면 필요할 때마다 손쉽게 적용할 수 있습니다. 이 글을 참고하여 오늘 등록한 클래스 외에도 여러분이 자주 활용하는 CSS 스타일들을 클래스로 등록한 후 사용해 보시기 바랍니다.