2023-02-21(화) margin , padding

2023-02-21 (화)
<HTML+CSS5>
● margin
외부(요소사이) 간격
margin = 네방향 마진 모두 부여 → 12시부터 시계방향 순서로 적용
margin : 10px;
    10
10     10
    10

margin : 10px 20px;
    10
20     20
    10

margin : 10px  20px  30px;
    10
20     20
    30

margin : 10px 20px 30px 40px; 
    10
40     20
    30        
  
margin-bottom : 50px = 아랫간격 50px
margin-top : 50px = 윗간격 50px
margin-right : 150px = 오른쪽 간격 150px
margin-left : 150px = 왼쪽 간격 150px
*{ margin:0;
   padding:0; }  = div의 기본간격(마진)도 없앰 = 창에 딱붙게 ※ 맨위에 사용중
margin 음수사용가능
margin : 0 auto  = 중앙정렬 (auto가 왼쪽,오른쪽임  왼쪽 오른쪽을 균등하게 나눔으로 중앙정렬)

● padding
내부(요소내부) 간격
padding-top:50px;  =  윗내부 여백 50px 증가
padding-left:50px;  =  왼쪽내부 여백 50px 증가
padding-right:50px;  =  오른쪽내부 여백 50px 증가
padding-bottom:50p;  =  아래내부 여백 50px 증가
box-sizing : border-box;  = 패딩,경계선 크기를 내부(가로세로)크기에 포함시킨다.

● 기능사 문제
A1~4 , B1~4 복습
C1~4 연습