12. CSS - 레이아웃 - 요소의 영역(여백) 관련 속성

모든 html 요소는 content, padding, border, margin 총 4가지의 영역으로 구성되어 있다.

 

웹 페이지에서 마우스 오른쪽을 누르기 - 검사를 눌러서 확인한 티스토리 요소 화면(가운데 파란 부분이 content 부분)

 

 

• content
  • 요소의 내용이 작성되어지는 영역
  • 시작, 종료 태그 사이에 작성되는 내용이 출력되는 영역

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면 - content 영역의 사이즈를 키워서 출력된 화면 크기도 커짐

 

 

• padding
  • content와 border 사이의 영역

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

border, padding, margin은 상 하 좌 우 각각의 방향에 따라 별도의 스타일 지정이 가능하다.

ex) padding을 별도의 스타일로 지정하고 싶다면
    padding-top : CSS 코드 작성;
    padding-right : CSS 코드 작성;
    padding-bottom : CSS 코드 작성;
    padding-left : CSS 코드 작성;

** padding(또는 margin) 속성 사용 방법 2 **
    padding : 값1; -> 상 우 하 좌(시계방향) 모든 방향을 값1만큼 크기 지정
    padding : 값1 값2 ; -> 상하 좌우 방향을 값1, 값2 만큼 크기 지정
    padding : 값1 값2 값3; -> 상 좌우 하 방향을 값1, 값2, 값3 만큼 크기 지정
    padding : 값1 값2 값3 값4; -> 상 우 하 좌 방향을 값1, 값2, 값3 값4 만큼 크기 지정

 

 

 

•  border
  • 요소의 테두리가 지정되는 영역
  • content보다 바깥쪽에서 감싸고 있음

HTML 작성 화면
CSS 작성 화면 - border의 상 하 좌 우 각각의 값들을 지정해줌.
웹에서 출력된 화면

 

 

• margin(여유)
  • 다른 요소와의 간격을 지정하는 영역

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면   - margin의 첫 번째 상자는 화면에 정 가운데에 오도록 설정이 되어있다. - margin의 두 번째 상자는 100px로 설정이 되어 100px 만큼 떨어지게 출력되었다.

margin: auto; - 자동으로 다른 요소와의 간격을 조정 (화면 크기 조절을 해도 가운데에 위치함)
                      - 보통 가로 축 정렬 시 사용한다.

margin의 크기를 0으로 지정해도 화면의 왼쪽으로 딱 붙지 않는다
  - > body태그가 존재하고 body 태그에도 margin이 존재해서 

 

 

• box-sizing
  • width / height 속성이 적용되는 범위를 지정
  • content-box (기본값) : width / height 적용 범위를 content로 한정
  • border-box : width / height 적용 범위를 border + padding + content 의 크기 합산과 동일하도록 계산해 content의 크기를 자동으로 지정

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면