2024.11.19 CSS3 공부

박스 모델

 

- 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용

- 웹 문서의 전체 레이아웃을 정의

- 각종 요소들을 원하는 위치에 배치

박스 모델 이미지

 

박스의 속성

 

- content : 실제 내용이 표현되는 곳

- padding : 콘텐츠와 테두리 사이의 여백

- border : 박스의 테두리 두께

- margin : 테두리와 박스의 최종 경계 사이의 여백

 

content

 

- 실제 내용이 표현되는 곳

- 속성: width(너비 지정), height(높이 지정)

속성	설명
value	실제로 측정한 데이터 값이다.
min, max	데이터가 인식하는 최솟값과 최댓값이다. 기본값은 0~1이다.
low, high	허용되는 범위의 최솟값과 최댓값이다. low~high 값은 항상 min~max 값 범위 내에 있다.

 

 

padding, margin

 

- padding : 박스의 안쪽 여백 설정

- margin : 박스의 바깥쪽 여백 설정

속성값	설명
수치	여백을 픽셀(px), 포인트(pt), 센티미터(cm) 같은 수치 단위로 지정한다.
백분율	여백을 부모 요소를 기준으로 하여 백분율을 지정한다.
auto	여백을 웹 브라우저가 자동으로 지정한다. 기본값이다.

 

 

네 방향 여백 크기 설정

형식	설명
padding-top: 속성값;	위쪽 패딩
padding-bottom: 속성값;	아래쪽 패딩
padding-right: 속성값;	오른쪽 패딩
padding-left: 속성값;	왼쪽 패딩
margin-top: 속성값;	위쪽 마진
margin-bottom: 속성값;	아래쪽 마진
margin-right: 속성값;	오른쪽 마진
margin-left: 속성값;	왼쪽 마진

 

속성값의 개수에 따라 적용되는 위치

 

h1 { margin: 5px 10px 5px 10px; } (4개 일때)

= 위쪽, 오른쪽, 아래쪽, 왼쪽의 마진값을 나타낸다.(시계방향)

 

h1 { margin: 5px 10px 5px; } (3개 일때)

= 위쪽, 오른쪽&왼쪽, 아래쪽의 마진값을 나타낸다.

 

h1 { margin: 5px 10px; } (2개 일때)

= 위쪽&아래쪽, 오른쪽&왼쪽 마진값을 나타낸다.

 

h1 { margin: 5px; } (1개 일때)

= 모든 방향의 마진값을 나타낸다.

 

테두리 속성

 

border-width

 

- 테두리 두께 설정

- top, bottom, left, right를 이용하여 네 방향으로 설정 가능

 

속성값	설명
수치	테두리 두께를 픽셀(px), 포인트(pt), 센티미터(cm) 같은 수치 단위로 지정한다.
thin	얇은(1px) 두께의 테두리를 지정한다.
medium	중간(3px) 두께의 테두리를 지정한다.
thick	굵은(5px) 두께의 테두리를 지정한다.

 

border-color

 

- 테두리 색상 지정

- 색상 이름(blue)이나 16진수 값(#0000FF), 10진수 값(0. 0. 255)으로 나타낼수 있다.

 

border-style

 

- 테두리 스타일 설정

 

속성값	설명	속성값	설명
none	테두리가 나타나지 않는다. 기본값이다.	double	테두리를 이중선으로 지정한다.
hidden	테두리를 감춘다.(none과 다름)	groove	테두리를 오목한 선으로 지정한다.
dotted	테두리를 점선으로 지정한다.	ridge	테두리를 볼록한 선으로 지정한다.
dashed	테두리를 파선으로 지정한다.	inset	테두리의 안쪽이 오목한 선으로 지정한다.
solid	테두리를 실선으로 지정한다.	outset	테두리의 안쪽이 볼록한 선으로 지정한다.

 

박스 속성

 

border-radius

- 테두리의 모서리를 둥글게 설정

 

형식	설명
border-radius: 속성값;	네 개의 모서리 모두 둥글게 한다.
border-top-left-radius: 속성값;	상단 왼쪽 모서리를 둥글게 한다.
border-top-right-radius: 속성값;	상단 오른쪽 모서리를 둥글게 한다.
border-bottom-right-radius: 속성값;	하단 오른쪽 모서리를 둥글게 한다.
border-bottom-left-radius: 속성값;	하단 왼쪽 모서리를 둥글게 한다.

 

box-shadow

 

- 박스에 그림자 효과 적용

{ box-shadow : 수평 그림자(필수) | 수직 그림자(필수) | 그림자 흐림 | 그림자 번짐 | 그림자 색상 | 삽입 효과; }

- 수평 그림자(h-shadow) : 그림자의 수평 거리 지정

- 수직 그림자(v-shadow) : 그림자의 수직 거리 지정

- 그림자 흐림(blur) : 그림자의 흐림 정도 지정

-그림자 번짐(spread) : 그림자의 번짐 정도 지정

- 그림자 색상(color) : 그림자의 색상 지정

- 삽입 효과(inset) : 박스 외부로 표현되는 그림자를 박스 안쪽으로 표현하는 효과

 

참고하면 좋은 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

box-shadow - CSS: Cascading Style Sheets | MDN