레이아웃 스타일2

요소의 영역(여백) 관련 속성

    HTML 요쇼는 총 4가지 영역으로 구성되어 있다.

    1. content 영역
        - 요소의 내용이 작성 되어지는 영역
        (시작태그와 종료 태그 사이에 작성되는 내용을 생각하면 됨)
        
    2. padding 영역
        - content 영역과 border 영역 사이

    3. border 영역
        - 요쇼의 테두리가 지정되는 영역
        - content 보다 바깥쪽에서 content를 감싸고 있음
    
    4. margin 영역
        - 다른 요소와의 간격을 나타내는 영역
        
      

padding, border, margin의 방향성

    padding, border, margin은 방향에 따라 크기를 지정할 수 있다. 

    OOO-top
    OOO-bottom
    OOO-left
    OOO-right         
    
    
    
    

box-sizing

요소의 영역 중 실제로 화면상에 보여지는 부분인
content, padding, border는 각각 크기를 지정할 수 있음.
-> 이 때, 각각의 크기를 따로 지정하다 보니
전체적인 크기를 한 눈에 파악하고, 설정하기 힘들다.
그래서 박스사이징이 나왔다.