[티스토리 블로그 꾸미기] 자주 쓰는 CSS 속성 총정리

안녕하세요! 지금까지 블로그 꾸미는 과정을 소개해드렸습니다. 이번에는 블로그 꾸밀 때 가장 많이 쓰는 CSS 속성 총정리에 대해 알려드리겠습니다.

이 글만 보더라도 웬만한 꾸미기는 다 하실 수 있을 것이라는 생각이 듭니다. (저도 이 글을 자주 볼 거예요!)

티스토리 '북클럽' 스킨에 CSS 속성들을 분석해서 자주 사용하는 것들을 최대한 뽑았습니다. 많이 활용하시길 바랍니다.

 

Padding: 내용과 테두리 사이의 빈 공간(여백)

 

padding: 10px; /* 모든 방향에 10픽셀 */
padding: 10px 5px; /* 위아래 10픽셀, 좌우 5픽셀 */
padding: 10px 0; /* 위아래 10픽셀, 좌우 0픽셀 */
padding: 0 0 10px 0; /* 아래쪽에 10픽셀 (나머지는 0) */
padding: 10px 11px 12px 13px; /* 위 10픽셀, 오른쪽 11픽셀, 아래 12픽셀, 왼쪽 13픽셀 */
padding-top: 10px; /* 위쪽에 10픽셀 */
padding-right: 10px; /* 오른쪽에 10픽셀 */
padding-bottom: 10px; /* 아래쪽에 10픽셀 */
padding-left: 10px; /* 왼쪽에 10픽셀 */

 

Margin: 요소와 요소 사이의 빈 공간(여백)

margin: 20px; /* 모든 방향에 20픽셀 */
margin: 20px 10px; /* 위아래 20픽셀, 좌우 10픽셀 */
margin: 20px 0; /* 위아래 20픽셀, 좌우 0픽셀 */
margin: 0 0 20px 0; /* 아래쪽에 20픽셀 (나머지는 0) */
margin: 20px 21px 22px 23px; /* 위 20픽셀, 오른쪽 21픽셀, 아래 22픽셀, 왼쪽 23픽셀 */
margin-top: 20px; /* 위쪽에 20픽셀 */
margin-right: 20px; /* 오른쪽에 20픽셀 */
margin-bottom: 20px; /* 아래쪽에 20픽셀 */
margin-left: 20px; /* 왼쪽에 20픽셀 */

 

Width: 요소 너비

width: 100px; /* 100픽셀 */
width: 50%; /* 부모 요소의 50% */
width: auto; /* 자동 조절 */
width: fit-content; /* 내용에 맞게 조절 */
width: max-content; /* 내용의 최대 크기 */
width: min-content; /* 내용의 최소 크기 */
width: 100vw; /* 뷰포트 너비의 100% */
width: calc(100% - 50px); /* 너비 계산식 사용 */

 

Max-width: 요소 최대 너비

max-width: 100%; /* 최대 100% */
max-width: 800px; /* 최대 800픽셀 */

 

Min-width: 요소 최소 너비

min-width: 100px; /* 최소 100픽셀 */
min-width: 50%; /* 최소 부모 요소의 50% */

 

Height: 요소 높이

height: 100px; /* 100픽셀 */
height: 50%; /* 부모 요소의 50% */
height: auto; /* 자동 조절 */
height: fit-content; /* 내용에 맞게 조절 */
height: max-content; /* 내용의 최대 크기 */
height: min-content; /* 내용의 최소 크기 */
height: 100vh; /* 뷰포트 높이의 100% */
height: calc(100% - 50px); /* 높이 계산식 사용 */

 

Max-height: 요소 최대 높이

max-height: 100%; /* 최대 100% */
max-height: 600px; /* 최대 600픽셀 */

 

Min-height: 요소 최소 높이

min-height: 100px; /* 최소 100픽셀 */
min-height: 50%; /* 최소 부모 요소의 50% */

 

Border: 요소의 경계

 

border: 1px solid #000; /* 두께 1픽셀, 실선, 검정색 테두리 */
border-width: 2px; /* 두께 2픽셀 */
border-top: 2px solid #000; /* 위쪽 테두리 두께 2픽셀, 실선, 검정색 */
border-right: 2px dashed #000; /* 오른쪽 테두리 두께 2픽셀, 긴 점선, 검정색 */
border-bottom: 2px dotted #000; /* 아래쪽 테두리 두께 2픽셀, 짧은 점선, 검정색 */
border-left: 2px double #000; /* 왼쪽 테두리 두께 2픽셀, 이중선, 검정색 */
border-color: red; /* 빨간색 테두리 */

 

Border-style: 테두리 스타일

border-style: solid; /* 실선 테두리 */
border-style: dashed; /* 긴 점선 테두리 */
border-style: dotted; /* 짧은 점선 테두리 */
border-style: double; /* 이중선 테두리 */

 

Color: 글자 색상

color: #333; /* 어두운 회색 */
color: rgb(51, 51, 51); /* 어두운 회색 (RGB) */
color: rgba(51, 51, 51, 0.8); /* 어두운 회색 (RGB) + 투명도 80% */
color: hsl(0, 0%, 20%); /* 어두운 회색 (HSL) */
color: hsla(0, 0%, 20%, 0.8); /* 어두운 회색 (HSL) + 투명도 80% */

 

Background: 배경

background-color: #f0f0f0; /* 배경 색상 밝은 회색 */
background-image: url('image.jpg'); /* 배경 이미지 */

 

Background-size: 배경 이미지 사이즈

background-size: cover; /* 배경 이미지가 요소를 완전히 덮음 */
background-size: contain; /* 배경 이미지가 요소에 맞게 조절 */
background-size: 50% 50%; /* 배경 이미지의 너비와 높이를 각각 50%로 조절 */
background-size: 100px 200px; /* 배경 이미지의 너비를 100픽셀, 높이를 200픽셀로 조절 */

 

Background-repeat: 배경 이미지 반복

background-repeat: no-repeat; /* 배경 이미지 반복 없음 */
background-repeat: repeat; /* 배경 반복 */
background-repeat: repeat-x; /* 배경 이미지 가로 반복 */
background-repeat: repeat-y; /* 배경 이미지 세로 반복 */

 

Background-position: 배경 이미지 정렬

background-position: top; /* 배경 이미지 위쪽 정렬 */
background-position: center; /* 배경 이미지 중앙 정렬 */
background-position: bottom; /* 배경 이미지 아래쪽 정렬 */
background-position: left; /* 배경 이미지 왼쪽 정렬 */
background-position: right; /* 배경 이미지 오른쪽 정렬 */

 

Font-family: 글꼴

font-family: Arial, sans-serif; /* 글꼴 패밀리 (글꼴 목록에서 순서대로 적용) */

 

Font-size: 글자 크기

font-size: 16px; /* 글자 크기 16픽셀 */
font-size: 1em; /* 글자 크기 부모 요소의 1배 */
font-size: 1.5rem; /* 글자 크기 루트 요소의 1.5배 */
font-size: 100%; /* 글자 크기 부모 요소의 100% */

 

Font-weight: 글자 굵기

font-weight: normal; /* 일반 굵기 */
font-weight: bold; /* 굵은 글씨 */
font-weight: bolder; /* 부모 요소보다 더 굵게 */
font-weight: lighter; /* 부모 요소보다 더 얇게 */
font-weight: 100; /* 숫자로 굵기 지정 (100부터 900까지) */

 

Font-style: 폰트 스타일

font-style: italic; /* 기울임꼴 */
font-style: normal; /* 일반 */
font-style: oblique; /* 기울임 */

 

Text-transform: 텍스트 변환

text-transform: none; /* 변환 없음 */
text-transform: capitalize; /* 첫 글자만 대문자 */
text-transform: uppercase; /* 모든 글자를 대문자로 */
text-transform: lowercase; /* 모든 글자를 소문자로 */

 

Text-align: 텍스트 정렬

text-align: left; /* 왼쪽 정렬 */
text-align: center; /* 가운데 정렬 */
text-align: right; /* 오른쪽 정렬 */
text-align: justify; /* 양쪽 정렬 */

 

Text-decoration: 텍스트 장식

text-decoration: none; /* 텍스트 장식 없음 */
text-decoration: underline; /* 텍스트 밑줄 */
text-decoration: overline; /* 텍스트 윗줄 */
text-decoration: line-through; /* 텍스트 취소선 */

 

Vertical-align: 수직 정렬

vertical-align: top; /* 상단 정렬 */
vertical-align: middle; /* 중간 정렬 */
vertical-align: bottom; /* 하단 정렬 */

 

Display: 요소의 표시 방법

 

display: block; /* 블록 요소 (한 줄 전체를 차지함) */
display: inline; /* 인라인 요소 (내용만큼 차지함) */
display: inline-block; /* 인라인 블록 요소 (내용만큼 차지하지만 블록 속성 포함) */
display: flex; /* 플렉스 컨테이너 (유연한 레이아웃) */
display: grid; /* 그리드 컨테이너 (격자 레이아웃) */
display: none; /* 표시하지 않음 */

 

Position: 요소 위치

position: static; /* 기본 배치 (다른 설정 없음) */
position: relative; /* 요소를 기준으로 상대적 배치 */
position: absolute; /* 요소의 부모 요소를 기준으로 절대적 배치 */
position: fixed; /* 화면을 기준으로 고정 배치 */
position: sticky; /* 스크롤 시 일정 위치에 고정 */
top: 10px; /* 위쪽에서 10픽셀 떨어짐 */
right: 10px; /* 오른쪽에서 10픽셀 떨어짐 */
bottom: 10px; /* 아래쪽에서 10픽셀 떨어짐 */
left: 10px; /* 왼쪽에서 10픽셀 떨어짐 */
z-index: 100; /* 쌓임 순서 (숫자가 클수록 위에 표시됨) */

 

Float: 요소를 좌우로 띄움

float: left; /* 왼쪽으로 띄움 */
float: right; /* 오른쪽으로 띄움 */
float: none; /* 띄우지 않음 */
clear: both; /* 양쪽 띄움 해제 (left: 왼쪽 띄움 해제, right: 오른쪽 띄움 해제) */

 

Overflow: 요소의 내용이 넘칠 때

overflow: visible; /* 넘치는 내용 보임 */
overflow: hidden; /* 넘치는 내용 숨김 */
overflow: scroll; /* 넘치는 내용 스크롤됨 */
overflow: auto; /* 넘치는 경우에만 스크롤 생성 */
overflow-x: hidden; /* 가로 방향 숨김 */
overflow-y: scroll; /* 세로 방향 스크롤 */

 

Opacity: 요소의 불투명도

opacity: 1; /* 완전히 보임 */
opacity: 0.5; /* 반투명 */
opacity: 0; /* 보이지 않음 */

 

Box-shadow: 박스 그림자

box-shadow: 10px 10px 5px #888; /* 가로 10px, 세로 10px, 흐림 정도 5px, 색상 #888 */
box-shadow: inset 0px 0px 10px #000; /* 내부 그림자 (inset) */

 

Text-shadow: 텍스트 그림자

text-shadow: 2px 2px 2px #aaa; /* 가로 2px, 세로 2px, 흐림 정도 2px, 색상 #aaa */

 

Transform: 요소 전환

transition: all 0.3s ease; /* 모든 속성에 0.3초 동안 전환 효과 (ease: 점진적 변화) */
transition-property: background-color; /* 배경색에만 전환 효과 */
transition-duration: 0.5s; /* 전환 효과 지속 시간 */
transition-timing-function: linear; /* 일정한 속도로 전환 */
transition-delay: 0.2s; /* 전환 효과 지연 시간 */

 

Animation: 애니메이션 효과

animation-name: example; /* 애니메이션 이름 */
animation-duration: 4s; /* 애니메이션 지속 시간 */
animation-timing-function: ease-in-out; /* 서서히 시작, 서서히 끝남 */
animation-delay: 1s; /* 애니메이션 지연 시간 */
animation-iteration-count: infinite; /* 반복 횟수 (무한 반복) */
animation-direction: alternate; /* 애니메이션 번갈아 가면서 */
animation-direction: reverse; /* 애니메이션 반대 방향 */

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

 

Filter: 이미지와 요소에 효과 적용

filter: blur(5px); /* 흐림 효과 */
filter: brightness(0.8); /* 밝기 조절 */
filter: contrast(150%); /* 대비 조절 */
filter: grayscale(100%); /* 흑백 효과 */
filter: sepia(50%); /* 세피아 효과 */
filter: hue-rotate(90deg); /* 색상 회전 */
filter: invert(100%); /* 색상 반전 */
filter: saturate(200%); /* 채도 조절 */

 

Cursor: 마우스 커서

cursor: pointer; /* 손가락 모양 */
cursor: default; /* 기본 모양 */
cursor: text; /* 텍스트 입력 모양 */
cursor: move; /* 이동 모양 */
cursor: not-allowed; /* 금지 모양 */
cursor: wait; /* 대기 모양 */

 

Visibility: 표시

visibility: visible; /* 요소가 보임 */
visibility: hidden; /* 요소가 숨김 (공간 차지) */

 

Box-sizing: 박스 크기

box-sizing: content-box; /* 기본 박스 모델 (padding과 border를 제외한 크기) */
box-sizing: border-box; /* padding과 border를 포함한 크기 */

 

Line-height: 줄 간격

line-height: 1.5; /* 텍스트 줄 간격 1.5배 */