워드프레스에서 자신만의 개성 있는 블로그나 홈페이지를 만들 때 사용하면 좋을 만한 CSS를 여러 개 모아 보았습니다. 사실 이 블로그에서 사용된 많은 CSS는 여러 곳의 사이트를 참고하였으며, 특히 아래 codepen으로 만든 이유는 저처럼 코드 이용 시 많은 오류와 이행 착오를 겪지 말고 쓸만한 CSS만 복사하여 편리하게 사용할 수 있게 하려고 작성하였습니다.

CSS 설명에서 적절한 숫자 수정과 색상 수정은 개인마다 좋아하는 것이 있으니 그대로 사용하기보다는 여러 가지 상황을 적용해 보는 것을 추천해 드리며, 아직 배워가면서 적용하는 블로그 이기에 틀리거나 간편한 코드를 복잡하게 입력고 설명이 미비한 것도 있으니 참고 하시기를 바랍니다.

워드프레스 꾸미기

table box-shadow CSS

설명 : 테이블 그림자 효과

margin-left:auto; : 왼쪽 테이블 자동
margin-right:auto; : 오른쪽 테이블 자동
padding: 8px; : 안쪽 여백 크기
text-align: center; : 글자 중앙 정렬
border-top: 2px solid #000; : 테이블 상단 줄 두께와 색상
border-bottom: 2px solid #000; : 테이블 하단 줄 두께와 색상
color: #000; : 테이블 배경 색상
box-shadow: 0px 0px 20px black; : 테이블 그림자 크기와 색상
background-color: #bbdefb; : 테이블 td 영역 배경

margin-left, right는 테이블 정렬을 하기 위한 CSS이며 테이블의 왼쪽과 오른쪽 바깥 영역의 여백을 얼마만큼 설정하는가 입니다. auto는 왼쪽과 오른쪽 여백이 같게 설정되며, px(픽셀) 또는 %(비율)를 이용하여 크기를 조절할 수 있습니다.
예) margin-left:100px; margin-right:100%;

Img box-shadow CSS

설명 : 이미지 그림자 효과

img srt=”” : 이미지 외부 주소
html img = CSS img : html img 이름과 CSS img가 같아야함
box-shadow : 박스 효과 (적절한 숫자 입력하여 설정)
0px 4px 8px rgba(0, 0, 0, 0.6) : 적정한 값을 입력
– webkit, -moz : CSS가 다른 환경에 맞게 적용되도록 할 때 사용함

속성	설명
-webkit-	신버전 오페라, 크롬, 사파리, IOS
-moz-	파이어폭스
-ms-	마이크로소프트 익스플로러, 구번전 엣지
-o-	구버전 오페라

Box-shadow 꾸미기 CSS

설명 : 박스 그림자 효과

background-image: linear-gradient(88deg, rgba(89, 131, 252, 1) 15%, rgba(41, 53, 86, 1) 100%);
: 배경 화면 그라이언트 효과
: 88deg 0~360도 회전으로 적정한 위치 적용
: rgba 15% ~ rgb 100%는 좌 우측 색상 범위 지정
background-color: rgba(89, 131, 252, 1); : 배경 화면 색상 지정

box-shadow4 : 원형으로 만들기 위한 CSS
margin-left:auto;
margin-right:auto;
width: 60px;
height: 60px;
border-radius: 150px 150px 150px 150px;

box-shadow7 : 안쪽 원형 그라이언트 효과
background-image: radial-gradient(circle, rgba(89, 131, 252, 1) 41%, rgba(41, 53, 86, 1) 74%);
/* background-color: #ffc400; */ : 주석 처리한 이유는 색상이 radial-gradient에 영향을 받아 실행되어도 보이지 않음

text-shadow 꾸미기 CSS

설명 : 텍스트 그림자 효과

text-shadow: #ff1744 0px 4px 0px, #f57c00 0px 8px 0px, #ffff8d 0px 12px 0px; : 3가지 그림자 색상을 혼합하여 적용 (#ff1744, #f57c00, #ffff8d 를 적절히 조절하여 적용 , 콤마를 사용하여 더 추가 가능)
text-shadow4 text-shadow: 1px 1px 2px #18ffff; : 복잡하게 rgba를 적용하지 싫을 경우 간단하게 적용

코드를 복사해 사용할 곳에 적용 후 적절한 수정을 하면서 적용하시면 됩니다.