카테고리 없음

8-4-5. CSS 속성 : Content의 너비(width) {width: auto / px / em / %;}

김종원 2021. 8. 31. 18:15

8-4-5. CSS 속성 : Content의 너비(width)

 

 가. width 속성

 

  - Content 영역의 가로 크기인 너비를 지정하는 속성

  - '인라인 레벨 요소'를 제외한 모든 요소(블록레벨)에 적용

  - 기본값 : 0

 

 나. width 속성값의 종류

  

  ▣ 고정값 단위 형태의 속성값 : px / em ...

 

  ▣ 상대값 단위 형태의 속성값 : % 

 

   - 부모요소 content 영역의 width 기준값에 대한 상대적인 너비를 적용

   - 그러나, 만약 width 속성값이 %로 선언된 자식요소의 부모요소가 인라인레벨 요소이면,

     그 부모요소를 제외하고 그 자식요소로부터 가장 가까운 블록레벨의 조상요소의 width값을 기준으로 함

   - 이때 기준이 되는 부모요소의 width 값은 순수 content 영역의 width 값임(아래 다. 참조)

   - 만일 최상단까지 블록레벨 요소가 없다면, <body>를 기준으로 계산하여 너비가 적용됨

 

  ▣ auto

 

   - 브라우저에 의해 자동으로 계산한 너비를 적용

 

 다. 요소영역의 너비 계산 방법

 

  - width 속성값을 auto가 아닌 값을 특정하면, 요소 영역의 너비는 박스모델의 content, padding, border

    영역의 너비로부터 영향을 받음 

  - 즉, 요소영역의 너비 = content width값 + (padding width값 * 2) + (border width값 * 2)

 

 [코드예시]

 1  .parent{width: 300px; border: 20px;}
 2  .child{width: 50%; padding: 20px; border: 10px;}

 

 

[위 코드 중 2번 child 요소의 총 너비는?]

※ 210px=(부모width 300px * 자식width 50%)+(자식padding 20px * 2)+(자식border 10px * 2) 

   padding과 border의 값에 각 2씩 곱한것은, padding과 border는 content를 감싸기 때문에 그 너비
   가 좌, 우로 총 2번 적용되기 때문이고, 위와 같이 자식요소의 width 값이 %로 지정될 때, 그 부모요소의
   width 기준 값은 width 와 padding 및 border를 더한 전체 크기가 아닌, content 영역 자체의 순수
   width 값이 기준이 됨