[CSS]레이아웃 스타일 2 (요소의 영역(여백) 관련 스타일)

1. 요소의 영역(여백) 관련 스타일

 

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

 1. content(내용) 영역

      - 요소의 내용이 작성 되어지는 영역

      (시작태그와 종료태그 사이에 작성되는 내용을 생각하면 된다)

 

 2. padding

      - content와 border 사이의 공간

 3. border(테두리) 영역

      - 요소의 테두리가 지정되는 영역

      - content 보다 바깥쪽에서 content를 감싸고 있음

   

4. margin(여백, 간격)

      - 다른 요소와의 간격을 나타내는 영역

 

2. box-sizing 이란?

 

- width/height 크기 조정 속성의 범위를 지정하는 css 속성

1) content-box

     - width/height 지정 시 content 영역의 크기만 조정

        (기본값)

 

2) border-box

     - width/height 지정 시   content + padding + border의 크기를 합산한 결과가

      작성된 width/height와 같아지도록 content 영역의 크기를 자동으로 조정

 

아래의 예시 모두 "box-sizing : border-box;" 적용 

 [box-sizing: border-box;]

 

width/height 값이 content + (padding*2) + (border*2) 값이 되도록 

 

content 값을 자동으로 계산해 반영하는 설정

 

-> 개발자가 생각하는대로 요소 크기를 설정할 수 있게함

 

<기준>

 

[HTML]

 

[CSS]

#결과

 

<border(테두리) 영역>

 

[HTML]

 

[CSS]

#결과

 

<content(내용) 영역>

 

[HTML]

[CSS]

#결과

 

<padding(채우기) 영역>

 

[HTML]

[CSS]

#결과

 

<margin(여백, 다른 요소와의 간격) 영역>

 

* margin 영역은 다른 요소의  margin과 겹칠 수 있다.

-> 이 때, 더 큰 값을 가진 margin이 적용된다.

 

[HTML]

[CSS]

#결과

padding, border, margin의 방향성

•     OOO-top    : 크기     -> 위쪽   방향 크기 지정
•     OOO-bottom : 크기     -> 아랫쪽 방향 크기 지정
•     OOO-left   : 크기     -> 왼쪽   방향 크기 지정
•     OOO-right  : 크기     -> 오른쪽 방향 크기 지정

  단, OOO이 border인 경우 [크기 모양 색상] 형식으로 값을 작성

[HTML]

[CSS]

solid     : 실선

dotted : . 점선

dashed : - 점선

double : 이중 실선

#결과

 

 

크기 한 번에 지정하기

  padding | border-width | margin : 크기 속성 값;

    ( | : 또는)

•     크기 속성 값 1개 : 상하좌우 모두    적용
•     크기 속성 값 2개 : 상하 / 좌우      적용
•     크기 속성 값 3개 : 상 / 좌우 / 하   적용 (위, 가운데, 아래)
•     크기 속성 값 4개 : 상 / 우/ 하 / 좌 적용 (시계방향)

[HTML]

 

[CSS]

#결과

 

margin : auto;

 다른 요소와의 간격을 자동으로 지정하여 가운데 정렬하게 만드는 속성 값

   - 기본적으로 좌우 간격만 자동으로 지정

    (보통의 경우 위/아래는 적용X)

   - 해당 옵션이 지정되는 대상은

      display가 inline-block 이여서는 안된다!!

     -> inline, inline-block은 글자로 취급 되기 때문에 글자 정렬 속성인 text-align 을 이용해야 한다!!

 

[HTML]

[CSS]

#결과