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

width, height

• 요소의 가로, 세로 길이를 지정하는 속성이다.
• 픽셀(px), 퍼센트(%) 등의 단위를 사용할 수 있다.
  • 퍼센트는 부모 요소의 크기에 따라서 달라짐
  • 픽셀은 절대적인 크기를 가짐

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

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

가로, 세로길이의 min, max

• min-width, max-width를 사용하여 최소 및 최대 가로길이를 지정할 수 있다.
• min-height, max-height를 사용하여 최소 및 최대 세로길이를 지정할 수 있다.

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

background-color

• 요소의 배경색을 지정할 수 있는 속성이다.
• 요소가 차지하고 있는 크기만큼 배경색이 지정된다.
• css 기본 색상명 혹은 hex, rgb 등의 색상 코드를 사용하여 지정할 수 있다.

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

.element1 {
	background-color: #000000;
}

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

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

border

• 요소의 경계선을 지정할 수 있는 속성이다.
• 관련 속성들

.element {
	border-width: 2px;
	border-style: solid;
	border-color: yellow;

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