[CSS] 박스 모델, 선

박스 모델

• HTML의 기본적인 모양을 만드는 속성
• 가로 너비, 세로 너비, 외부 / 내부 여백으로 HTML을 제어

 

요소의 가로, 세로 너비

• 가로 : width
• 세로 : height
• 기본값: auto
• 단위 : px 등 정확한 크기를 명시하고 싶으면 단위를 이용해 가로 / 세로 사이즈를 명시

selector {
	width: 0px;
	heught: 0px;
}

 

요소의 최대 너비

• max-width, max-height
• 기본값 : none (최대 너비의 제한이 없다.)
• 단위 : px 등

selector{
	max-width: 400px;
	max-height: 100px;
	background-color: beige;
}

 

요소의 최소 너비

• min-width, min-height
• 기본값 : 0
• 단위 : px 등

selector {
	min-width: 0px;
	min-height: 0px;
}

 

 

---

선

border를 작성하면 요소의 크기가 늘어난다.

 

※ border: 두께 선종류 선색상

 

작성 방법

selector {
	border: 선 두께, 선 종류, 선 색상;
}

/* border-width, border-style, border-color로 각각 설정 가능 */

 

실선과 파선

selector {
  border: 2px solid red; /* 실선 */
}

selector {
  border: 2px dashed red; /* 파선 */
}

 

모서리를 둥글게

div {
  border-radius: 20px;
}

div {
  border-radius: 10px 30px 10px 20px; /* 특정 모서리만 둥글게 */
}