CSS / 오늘 사용한 디자인 속성 미니정리(font-family, line-height, padding, max-width, margin, border, display: grid, border-radius, box-shadow, transition, transform)

God_Win_Iron·2025년 8월 9일

CSS

목록 보기

1/1

font-family: 'Noto Sans KR', sans-serif;

한글 지원 'Noto Sans KR' 폰트를 우선 사용하며,
없으면 시스템 기본 sans-serif 계열 폰트가 적용됩니다.

p {
  line-height: 1.6; /* 글자 크기의 1.6배 줄 높이 */
}

텍스트 줄 간격 조절로 가독성 향상과
윗글과 아랫글 사이 간격을 조절합니다.

요소 내부의 글자 주변 여백을 주며,
주로 rem 단위를 사용해 문서 최상위 <html> 폰트 크기를 기준으로 합니다.

max-width: 400px;

요소가 지정한 최대 너비 이상으로 커지지 않도록 제한하며,
부모나 화면이 작으면 그보다 작아질 수 있습니다.

.box {
  margin: 20px; /* 상하좌우 20px 여백 */
}

요소와 주변 요소 사이에 공간(외부 여백)을 띄웁니다.

.box {
  border: 2px solid #333; /* 두께 2px, 실선, 진한 회색 */
}

요소 테두리의 굵기, 스타일, 색상을 설정합니다.

.card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

격자 형태 레이아웃으로 자식 요소들을 행과 열로 배치하며
반응형 디자인 구현에 용이합니다.

border-radius: 16px;

모서리를 둥글게 만들어 UI를 부드럽게 만듭니다.

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);

요소에 그림자를 주어 입체감과 깊이감을 더합니다.

transition: background-color 0.4s ease;

상태 변화(색상, 크기 등)를 부드럽게 애니메이션 효과로 처리합니다.

transform: translateY(-5px) rotate(15deg) scale(1.2);

이동, 회전, 크기 변경, 기울임 등 시각적 변형을 적용합니다.

그냥 개발자