여기에서 말하는 영역 요소란, HTML의 UI 구역을 나눌때 사용되는 태그들(div, section) 등등에서 자주 사용되는 CSS 스타일들을 모아놓은 것이다.

width, height

.element {
	width: 100px;
	height: 200px;
}

.element2 {
	width: 100%;
	height: 500px;
}

가로, 세로길이의 min, max

.container {
	/*
		가로 길이를 꽉 차도록 하되, 최대 길이를 800px 이상으로 설정
		요소 길이가 800px 미만일때는 max-width가 없는것과 동일한 특징을 가짐
	*/
	width: 100%;
	max-width: 800px;
}

background-color

.element {
	width: 100px;
	background-color: blue;
}

.element1 {
	background-color: #000000;
}

.element2 {
	background-color: rgba(0, 0, 0, 0.5);
}

위 속성들 가지고 예제만들기

border

속성
border-width 경계선의 두께
border-style 경계선의 모양
border-color 경계선의 색상
border 위 속성들을 함축
.element {
	border-width: 2px;
	border-style: solid;
	border-color: yellow;

	/* 위 속성들을 지정한 것과 동일한 함축 표현 */
	border: 2px solid yellow;
}