display

// 화면 표시 관련
div {
	display: none;           // 화면에서 노출하지 않습니다.
	display: block;          // 화면 가로 전체 영역을 차지합니다.
	display: inline;         // 컨텐트 영역 만큼을 차지합니다.
​
	/* 
		컨텐트 영역 만큼을 차지하면서 block에 적용할 수 있는 properties를 사용할 수 있습니다. 
		예) div {display: inline-block; width: 100px;}
	*/
	display: inline-block;
}

box model

div {
	width: 100%;                  // 선택자의 너비를 줍니다.
	height: 100%;                 // 선택자의 높이를 줍니다.
	min-width: 50%;               // 선택자의 최소 너비를 설정합니다.
	max-height: 300px;            // 선택자의 최대 높이를 설정합니다.
​
	padding: 10px 20px 30px 40px; // 박스 모델 내부 간격을 조정합니다.
	margin: 10px 20px 30px 40px;  // 박스 모델 외부 간격을 조정합니다.
​
	// 방향(direction)을 줘서 특정 방향에만 적용도 가능합니다.
	margin-top: 10px;             // 박스 모델 상단에 외부 간격이 발생합니다.
​
	// 축약형(shortcut)으로도 사용이 가능합니다.
	padding: 10px;                // 상하좌우 내부 padding 10px 적용합니다.
​
	overflow: visible;            // 선택자에서 넘치는 컨텐츠를 보여줍니다.
	overflow: hidden;             // 선택자에서 넘치는 컨텐츠를 숨깁니다.
}

float

div {
	float: left;                  // 해당 선택자를 좌측 공중으로 띄웁니다.
	clear: left;                  // floating된 선택자를 초기화합니다.
}

position

dis {
	position: static;             // position의 기본값입니다.
	position: relative;           // 자식들의 positioning을 위한 기준이 됩니다.
	position: absolute;           // 자기 자신을 공중에 띄웁니다. 이것 역시 relative와 마찬가지로 자식들의 posotioning을 위한 기준이 됩니다.
	position: fixed;              // 자기 자신을 공중에 띄우는데 뷰포트 기준으로 위치합니다. 이것 역시 relative와 마찬가지로 자식들의 posotioning을 위한 기준이 됩니다.
​
	// position과 함께 쓰이는 방향값입니다.
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

z-index

div {
	// z-index는 position을 함께 줘야 적용됩니다.
	position: relative;
​
	// z-index는 x축과 y축이 아닌 z축으로 선택자를 띄웁니다. 값이 높을수록 위쪽에 있습니다.
	z-index: 1;
}

Text

div {
	font-size: 20px;              // 폰트의 크기를 결정합니다.
	line-height: 30px;            // 폰트의 높이를 결정합니다.
	font-weight: 400;             // 폰트의 두께를 결정합니다. 400은 normal을 의미합니다.
	text-align: center;           // 선택자의 자식이 inline 요소에 대한 수평 정렬을 의미합니다.
	vertical-align: middle;       // 선택자의 수직 정렬을 의미합니다.
}

​

background

div {
	background-color: #ff0;       // 배경색을 정합니다.
	background-image: url('val'); // 배경 이미지를 넣습니다.
	background-size: 100%;        // 배경 이미지의 크기를 조정합니다.
	background-position: center;  // 배경 이미지의 위치를 조정합니다.
	background-repeat: no-repeat; // 배경 이미지의 반복 유무를 결정합니다.        
}