CSS 박스 만들기 - 초보자를 위한 단계별 가이드

1. 박스 모델 소개

 

 

```html

CSS 박스 모델은 웹페이지에서 요소가 차지하는 공간을 설명하는 개념이야.

• 각 요소는 콘텐츠(content)영역을 감싸는 박스(box)로 구성돼.
• 박스는 콘텐츠(content)뿐만 아니라 패딩(padding), 테두리(border), 여백(margin)으로 이루어져 있어.
• 콘텐츠(content)는 요소 안에 들어가는 실제 내용을 말해.
• 패딩(padding)은 콘텐츠(content)와 테두리 사이의 여백을 말해.
• 테두리(border)는 요소 주위에 그려지는 선을 말해.
• 여백(margin)은 요소 주위의 공간을 말해. 요소 사이의 공간을 조절할 때 중요해.

```

 

 

2. 기본 박스 스타일링

 

 

• 배경색 설정: 박스에 배경색을 적용하려면 background-color 속성을 사용한다.
• 테두리 설정: 박스 주변에 테두리를 만들려면 border 속성을 활용한다.
• 테두리 모서리 둥글게 만들기: 테두리의 모서리를 둥글게 조절하려면 border-radius 속성을 사용한다.
• 그림자 효과 추가: 박스에 그림자 효과를 주기 위해서는 box-shadow 속성을 활용한다.
• 여백 설정: 박스 내부 요소와 테두리 사이의 여백을 조절하려면 padding 속성을 사용한다.
• 테두리와 내용 사이의 여백 설정: 테두리와 내용 사이의 여백을 지정하려면 margin 속성을 활용한다.

 

 

3. 테두리 및 그림자 추가

 

 

• 테두리 추가: 박스에 테두리를 추가하려면 border 속성을 사용합니다. border-width로 테두리의 두께를, border-style로 스타일을 설정할 수 있습니다. 예를 들어, border: 2px solid black;는 두께가 2px이고 검은색 실선 테두리를 나타냅니다.
• 그림자 추가: 박스에 그림자를 추가하려면 box-shadow 속성을 사용합니다. 그림자의 수평 거리, 수직 거리, 그림자의 흐림 정도 및 색상을 지정할 수 있습니다. 예를 들어, box-shadow: 5px 5px 5px grey;는 수평으로 5px, 수직으로 5px, 흐림 정도가 5px이고 회색 그림자를 나타냅니다.

 

 

4. 박스 배경 스타일링

 

 

• 반투명 배경: background-color 속성값에 rgba() 함수를 사용하여 색상과 투명도를 설정할 수 있습니다.
• 그라디언트 배경: background 속성의 값으로 linear-gradient 또는 radial-gradient를 사용하여 부드러운 그라디언트 효과를 줄 수 있습니다.
• 이미지 배경: background-image 속성을 사용하여 이미지를 설정하고 배경 크기, 반복 여부, 위치 등을 지정할 수 있습니다.

 

 

5. 박스 내부 정렬 방법

 

 

• 텍스트 정렬: 박스 안의 텍스트를 정렬하는 방법으로, text-align 속성을 사용한다. 값으로는 left, right, center, justify 등이 있다.
• 요소 수평 정렬: 박스 안 요소를 수평으로 정렬하기 위해서는 display: flex와 함께 justify-content 속성을 사용한다. 값으로는 flex-start, center, flex-end 등이 있다.
• 요소 수직 정렬: 요소를 수직으로 정렬하기 위해서는 display: flex와 함께 align-items 속성을 사용한다. 값으로는 flex-start, center, flex-end 등이 있다.