[CSS-3] 박스모델 (Box-model)

1. 박스 각 영역의 크기를 조정하는 속성

출처. youtube 유노코딩

1-1. 기본 속성 

• 콘텐츠 영역 : width, height
• 안쪽 여백 : padding
• 바깥쪽 여백 : margin
• 테두리 : border-width

div {
    width: 100px;
    height: 100px;
    padding: 100px;
    margin: 100px;
    border-width: 100px;
}

 

1-2. 하위 속성 정의하기 

 

상 하 좌 우 각각 설정가능하다

div {
    padding-bottom: 100px;
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 100px; 
}

 

1-3. 한꺼번에 정의하기

div {   
   margin: 100px 90px;   
}
=> 상 100px,  하 90px 

div {   
   margin: 100px 90px 80px;  
}
=> 상 100px, 좌-우 90px , 하 80px
 
div {   
   margin: 100px 90px 80px 70px;   
}
=> 상 100px, 우 90px, 하 80px, 좌 70px

 

2. 박스 background

 

1.기본 종류

• background-color : 배경 색을 정의
• background-image : 배경 이미지를 정의
• background-position : 배경 이미지의 초기 위치를 정의
• background-size : 배경 이미지의 크기를 정의
• background-repeat : 배경 이미지의 반복 방법을 정의

div {
    background-color: blue;
    background-image: url("이미지주소");
    
    background-position: center; 
    background-position: right top; 
    
    background-size: 100px;  
    background-size: cover;  
    
    background-repeat: no-repeat;
}