웹 디자인의 핵심을 이루는 CSS 박스 모델은 내용(content), 패딩(padding), 보더(border), 마진(margin)로 구성됩니다.
보더 스타일링
기본 문법
다음 예시에서는 요소에 단순한 테두리를 추가하는 방법을 보여줍니다.
.item {
border: 2px dashed blue; /* 두께 스타일 색상 */
}
- 세 가지 속성은 순서에 상관없이 공백으로 구분됩니다.
- 각 변에 다른 스타일을 적용하려면
border-top,border-right,border-bottom,border-left를 사용합니다.
| 스타일 | 값 |
|---|---|
| 점선 | dotted |
| 파선 | dashed |
| 실선 | solid |
특정 변에만 스타일을 다르게 적용할 수도 있습니다. 다음 코드는 위쪽 테두리만 강조합니다.
.item {
border: 1px solid gray;
border-top: 3px solid orange;
}
둥근 모서리
테두리를 부드럽게 만들기 위해 border-radius 속성을 사용할 수 있습니다.
.item {
border-radius: 15px;
border-radius: 50%; /* 원형 또는 타원형 생성 */
}
이 속성은 픽셀 값이나 백분율을 받으며, 여러 값을 조합하여 각 모서리를 독립적으로 설정할 수 있습니다.
.item {
border-radius: 10px 20px 30px 40px; /* 시계 방향: 왼쪽 위부터 */
}
패딩 설정
패딩은 내용과 테두리 사이의 공간을 조절합니다.
.item {
padding: 20px; /* 모든 방향 동일 */
}
여러 값을 줄 경우 순서는 위 → 오른쪽 → 아래 → 왼쪽입니다.
.item {
padding: 10px 20px 30px 40px; /* 위, 오른쪽, 아래, 왼쪽 */
}
마진 설정
마진은 요소 간의 공간을 조정합니다.
.item {
margin: 15px; /* 모든 방향 동일 */
}
마진은 요소의 정렬에도 영향을 미칩니다. 수평 중앙 정렬을 위해서는 다음과 같이 작성합니다.
.item {
margin: 0 auto; /* 좌우 자동 설정 */
}
마진 병합
두 인접한 블록 요소에서 상하 마진이 충돌하면 더 큰 값이 우선 적용됩니다.
마진 붕괴
부모와 자식 요소 간의 상하 마진이 서로 영향을 미치는 현상을 말합니다. 이를 방지하기 위한 해결책은 다음과 같습니다.
- 부모 요소에
padding-top추가 - 부모 요소에
border-top추가 overflow: hidden지정
크기 계산
박스의 실제 크기는 width/height + padding + border의 합입니다.
box-sizing 속성을 사용하면 이러한 계산 방식을 변경할 수 있습니다.
.item {
box-sizing: border-box; /* 전체 크기 고정 */
width: 200px;
padding: 10px;
border: 5px solid black;
}
위 코드에서 내용 영역의 너비는 170px가 됩니다.
배경 스타일
배경 색상 및 이미지
요소의 배경을 커스터마이징할 수 있습니다.
.item {
background-color: teal;
background-image: url('image.jpg');
}
이미지 반복 및 위치
배경 이미지를 반복하거나 특정 위치에 배치할 수 있습니다.
.item {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
background-size는 이미지의 비율을 유지하면서 컨테이너에 맞추거나 포함시킬 수 있습니다.
.item {
background: url('image.jpg') no-repeat center/contain;
}
배경 스크롤 효과
배경이 고정되거나 스크롤과 함께 움직일 수 있습니다.
.item {
background-attachment: fixed;
}
배경 단축 속성
배경 관련 속성을 한 번에 설정할 수 있습니다.
.item {
background: teal url('image.jpg') no-repeat center/cover;
}
그라데이션 효과
선형 또는 원형 그라데이션을 만들 수 있습니다.
.item {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
텍스트 그라데이션도 가능합니다.
.item {
background: linear-gradient(90deg, #ff7e5f, #feb47b);
-webkit-background-clip: text;
color: transparent;
}
그림자 효과
요소에 입체감을 주기 위해 그림자를 추가할 수 있습니다.
.item {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
상태 전환
호버 상태에서 부드러운 변화를 제공합니다.
.item {
width: 100px;
height: 100px;
background-color: teal;
transition: all 0.5s ease;
}
.item:hover {
background-color: darkteal;
}