시각적 기초, Styling

Box Styling

배경, 테두리, 그림자 등 요소 박스 자체를 꾸미는 속성이다.

① background-color

배경 색상을 지정한다.


.box {
  background-color: #f5f5f5;
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
}

② background-image

배경 이미지를 지정한다.


.box {
  background-image: url('/images/bg.png');
 
  /* 배경 반복 */
  background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */
 
  /* 배경 위치 */
  background-position: center center;
 
  /* 배경 크기 */
  background-size: cover;   /* 비율 유지, 영역 꽉 채움 */
  background-size: contain; /* 비율 유지, 영역 안에 맞춤 */
}

③ gradient

background-image로 그라디언트를 표현한다.


.box {
  /* 선형 그라디언트 */
  background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);
 
  /* 각도 지정 */
  background-image: linear-gradient(135deg, #667eea, #764ba2);
 
  /* 원형 그라디언트 */
  background-image: radial-gradient(circle, #ff6b6b, #4ecdc4);
}

④ background 단축 속성

여러 background 속성을 한 줄로 작성할 수 있다.


.box {
  background: url('/images/bg.png') no-repeat center center / cover;
}

⑤ border

요소를 감싸는 테두리이다. 굵기 스타일 색상 순서로 작성한다.


.box {
  border: 1px solid #ccc;
 
  /* 개별 지정 */
  border-top: 2px dashed red;
  border-bottom: none;
 
  /* 속성별 지정 */
  border-width: 1px;
  border-style: solid; /* solid | dashed | dotted | none */
  border-color: #333;
}

⑥ border-radius

요소의 모서리를 둥글게 만든다.


.box {
  border-radius: 8px;    /* 모든 모서리 동일 */
  border-radius: 50%;    /* 원형 */
  border-radius: 4px 8px 4px 8px; /* 상좌 상우 하우 하좌 */
}

⑦ box-shadow

요소에 그림자를 추가한다.
x축 y축 흐림 퍼짐 색상 순서로 작성한다.


.box {
  /* 기본 그림자 */
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
 
  /* inset — 안쪽 그림자 */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 
  /* 여러 그림자 — 쉼표로 구분 */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.05);
}

값	설명
x축	양수면 오른쪽, 음수면 왼쪽
y축	양수면 아래쪽, 음수면 위쪽
흐림(blur)	값이 클수록 흐려짐
퍼짐(spread)	값이 클수록 그림자 크기 확대
`inset`	바깥 그림자 → 안쪽 그림자

⑧ opacity

요소 전체의 투명도를 지정한다. 0이 완전 투명, 1이 완전 불투명이다.


.box {
  opacity: 0;    /* 완전 투명 (자식 요소까지 모두 투명) */
  opacity: 0.5;  /* 반투명 */
  opacity: 1;    /* 완전 불투명 — 기본값 */
}

opacity는 자식 요소에도 영향을 준다.
배경만 투명하게 하고 싶다면 background: rgba(0, 0, 0, 0.5) 를 사용한다.

⑨ cursor

마우스 커서 모양을 지정한다.


.button {
  cursor: pointer;  /* 손가락 모양 — 클릭 가능한 요소에 사용 */
  cursor: default;  /* 기본 화살표 */
  cursor: not-allowed; /* 금지 표시 — 비활성화 상태에 사용 */
  cursor: grab;     /* 잡기 손 모양 — 드래그 가능한 요소에 사용 */
}

body {
  background: #0f172a;
  margin: 0;
  padding: 40px;
  font-family: system-ui, sans-serif;
}
.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.box {
  width: 240px;
  padding: 16px;
  text-align: center;
  color: #e2e8f0;
  font-size: 0.875rem;
  box-sizing: border-box;
}
 
/* ① background-color */
.box-bg-color {
  background-color: #3b82f6;
  border-radius: 8px;
}
 
/* ③ gradient */
.box-gradient {
  background-image: linear-gradient(135deg, #f59e0b, #ef4444);
  border-radius: 8px;
}
 
/* ⑤ border */
.box-border {
  border: 2px dashed #94a3b8;
  color: #94a3b8;
}
 
/* ⑥ border-radius */
.box-radius {
  background: #1e293b;
  border: 2px solid #475569;
  border-radius: 50px;
}
 
/* ⑦ box-shadow */
.box-shadow {
  background: #1e293b;
  border-radius: 8px;
  box-shadow:
    0 4px 14px rgba(99, 102, 241, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
 
/* ⑧ opacity */
.box-opacity {
  background: #3b82f6;
  border-radius: 8px;
  opacity: 0.4;
}
 
/* ⑨ cursor */
.box-cursor {
  background: #1e293b;
  border: 2px solid #475569;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.box-cursor:hover {
  background: #334155;
}

Open Sandbox

Font Styling

글자의 크기, 굵기, 색상 등 텍스트와 관련된 속성이다.

① font-size

글자 크기를 지정한다.


p {
  font-size: 16px;   /* 고정값 */
  font-size: 1rem;   /* 루트 요소(html) 기준 상대값 — 실무에서 권장 */
  font-size: 1em;    /* 부모 요소 기준 상대값 */
}

② font-weight

글자 굵기를 지정한다.


p {
  font-weight: normal;  /* 400 */
  font-weight: bold;    /* 700 */
  font-weight: 100;     /* 100 ~ 900 사이 숫자로 지정 */
}

③ font-family

글꼴을 지정한다. 앞에서부터 순서대로 적용하며, 없으면 다음 글꼴로 넘어간다.
마지막에는 반드시 sans-serif, serif 같은 계열 이름을 fallback으로 작성한다.


body {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
}

④ line-height

줄 간격을 지정한다. 단위 없는 숫자로 작성하는 것이 권장된다.


p {
  line-height: 1.6;    /* font-size의 1.6배 — 권장 */
  line-height: 24px;   /* 고정값 */
}

⑤ letter-spacing

글자 간격(자간)을 지정한다.


p {
  letter-spacing: -0.02em;  /* 자간 좁힘 — 한국어에서 자주 사용 */
  letter-spacing: 0.1em;    /* 자간 넓힘 */
}

⑥ color

글자 색상을 지정한다.


p {
  color: red;                   /* 키워드 */
  color: #ff0000;               /* HEX */
  color: rgb(255, 0, 0);        /* RGB */
  color: rgba(255, 0, 0, 0.5);  /* RGBA — 투명도 포함 */
  color: hsl(0, 100%, 50%);     /* HSL */
}

⑦ text-align

텍스트 정렬을 지정한다.


p {
  text-align: left;    /* 기본값 */
  text-align: center;
  text-align: right;
  text-align: justify; /* 양쪽 정렬 */
}

⑧ text-decoration

텍스트 꾸밈을 지정한다.


a {
  text-decoration: none;         /* 밑줄 제거 */
  text-decoration: underline;    /* 밑줄 */
  text-decoration: line-through; /* 취소선 */
}

⑨ text-shadow

텍스트에 그림자를 추가한다.
x축 y축 흐림 색상 순서로 작성한다. (퍼짐 없음)


h1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
 
  /* 여러 그림자 */
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 4px rgba(0, 0, 0, 0.2);
}

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="app" class="container">
      <p class="ex-size">① font-size: 2rem</p>
      <p class="ex-weight">② font-weight: 800</p>
      <p class="ex-family">③ font-family: Georgia, serif</p>
      <p class="ex-line-height">④ line-height: 2<br/>두 번째 줄<br/>세 번째 줄</p>
      <p class="ex-letter-spacing">⑤ letter-spacing: 0.2em</p>
      <p class="ex-color">⑥ color: #f59e0b</p>
      <p class="ex-align">⑦ text-align: center</p>
      <p class="ex-decoration">⑧ text-decoration: line-through</p>
      <p class="ex-shadow">⑨ text-shadow</p>
    </div>
  </body>
</html>

Open Sandbox