CSS 박스 모델

CSS box model
박스 모델
CSS 박스 모델모듈 레벨 3
Boxmodell-detail.png
CSS 박스 모델
네이티브 네임
CSS 박스 모델모듈 레벨 3
상황W3C 후보 추천 스냅샷
최신 버전레벨 3
2020년 12월 22일(2020-12-22)[1]
조직월드 와이드 웹 컨소시엄
위원회.CSS 작업 그룹
에디터
  • 엘리카 J. 에테마드[1]
  • 버트[2] 보스
  • 안톤[2] 프로즈
기본 규격CSS
도메인CSS
웹 사이트www.w3.org/TR/css-box-3/
캐스케이드 스타일 시트
개념
철학
도구들
비교

웹 개발에서 CSS 박스 모델은 브라우저 엔진에서 HTML 요소가 모델링되는 방법과 이러한 HTML 요소의 치수가 CSS 속성에서 어떻게 파생되는지를 나타냅니다.HTML [3]웹 페이지 구성의 기본 개념입니다.박스 모델의 가이드라인은 웹 표준 World Wide Web Consortium(W3C), 특히 CSS Working Group에 의해 기술되어 있습니다.1990년대 후반과 2000년대 초반에는 주류 브라우저에서 박스 모델의 비표준 준거 구현이 있었다.1998년 CSS2의 등장으로, 이 제품은box-sizing문제는 대부분 해결되었습니다.

사양

Cascading Style Sheets(CSS; 캐스케이드스타일시트) 사양은 웹 페이지 요소가 그래픽브라우저에 의해 표시되는 방법을 설명합니다.CSS1 사양 섹션4에서는 다음과 같은 블록 수준의 요소를 제공하는 '포맷 모델'을 정의하고 있습니다.p그리고.blockquote: 폭과 높이 및 그 주위에 있는 상자의 3가지 레벨(패딩, 테두리,[4] 여백).사양에서는 "박스 모델"이라는 용어를 명시적으로 사용하지 않지만 웹 개발자 및 웹 브라우저 벤더에 의해 널리 사용되고 있습니다.

모든 HTML 요소는 다음과 같은 "상자"로 간주할 수 있습니다.div태그,p태그 또는a각 상자의 치수는 5가지입니다.

  • 그height그리고.width상자의 실제 내용물의 치수를 설명합니다(텍스트, 이미지 등).
  • 그padding에, 이 내용과 상자의 테두리 사이의 간격을 나타냅니다.
  • 그border(있는 경우) 박스 주위에 있는 모든 종류의 선(실선, 점선, 점선...)입니다.
  • 그margin국경 주변의 공간입니다.

1996년에 W3C에 의해 발표되어 1999년에 개정된 CSS1 규격에 따르면 블록 레벨 요소에 대해 폭 또는 높이가 명시적으로 지정되어 있는 경우,[4][5] 패딩, 테두리 및 여백이 나중에 적용된 상태에서 가시 요소의 폭 또는 높이만 결정해야 한다.CSS3 이전에는 이 박스모델은 W3C 박스모델로 알려져 있었습니다.CSS3에서는 이 박스모델은content-box.

따라서 상자의 총 너비는 다음과 같습니다.left-margin+left-border+left-padding+width+right-padding+right-border+right-margin마찬가지로 상자의 총 높이는 다음과 같습니다.top-margin+top-border+top-padding+height+bottom-padding+bottom-border+bottom-margin.

예를 들어 다음 CSS 코드

.myClass {   폭: 200px;   높이: 100px;   패딩: 10px;   경계: 단단한 10px 블랙입니다.;   여백: 10px; }

는 'myClass'에 속하는 각 블록의 상자 치수를 지정합니다.또한 이러한 각 상자의 총 높이는 160px, 폭은 260px입니다.

CSS3는 Internet Explorer 박스 모델을 표준으로 도입했습니다.border-box를 클릭합니다.[6]

역사

W3C와 Internet Explorer 박스 모델 간의 폭 해석 방법 차이

HTML 4 및 CSS 이전에는 테두리와 패딩을 모두 지원하는 HTML 요소가 거의 없었기 때문에 요소의 폭과 높이의 정의는 그다지 논란이 되지 않았습니다.그러나, 그것은 요소에 따라 달랐다.테이블의 HTML 너비 속성은 테두리를 [7]포함한 테이블의 너비를 정의합니다.한편, 이미지의 HTML 폭 속성은 이미지 자체의 폭(경계선 내부)[8]을 정의합니다.초기 패딩을 지원하는 유일한 요소는 테이블 셀이었습니다.셀의 너비는 "셀 [9]패딩을 제외한 픽셀 단위의 셀 콘텐츠에 대해 제안된 너비"로 정의되었습니다.

1996년 CSS는[10] 더 많은 요소를 위해 여백, 테두리 및 패딩을 도입했습니다.표 [11]셀과 유사한 내용, 테두리, 여백 및 패딩과 관련된 정의 폭을 채택했다.이것은 그 후 W3C 박스 모델로 알려지게 되었습니다.

당시 W3C 박스 모델을 완전히 구현한 브라우저 벤더는 거의 없었습니다.Netscape 4.0과 Internet Explorer 4.0이라는 당시 두 개의 주요 브라우저는 너비와 높이를 모두 경계에서 [12]경계까지의 거리로 정의했습니다.이것은[13] 기존 모델 또는 Internet Explorer 박스 [14]모델이라고 불립니다.

"quirks 모드"의 Internet Explorer에는 지정된 폭 또는 높이 내에 내용, 패딩 및 테두리가 포함됩니다.이것에 의해, 표준의 동작에 [15]따르는 것보다 박스의 렌더링이 좁거나 짧아집니다.

이전 버전의 Internet Explorer가 웹 페이지에서 박스 모델 또는 요소의 크기를 처리하는 방식이 Cascading Style Sheets [16][17]언어에 대해 W3C에서 권장하는 표준 방법과는 다르기 때문에 Internet Explorer 박스 모델의 동작은 종종 버그로 간주되었습니다.Internet Explorer 6에서 브라우저는 대체 렌더링 모드('표준 준수 모드'라고 함)를 지원하므로 이 불일치를 해결할 수 있습니다.단, 하위 호환성을 위해 모든 버전은 기본적으로 일반 비표준 방식으로 작동합니다(quirks 모드 참조).Mac용 Internet Explorer는 이 비표준 동작의 영향을 받지 않습니다.

회피책

Internet Explorer 버전6 이후는 페이지에 특정 HTML 문서 유형 선언이 포함되어 있는 경우 이 오류의 영향을 받지 않습니다.이러한 버전은 하위 [18]호환성을 위해 쿼크 모드일 때 버그가 발생하는 동작을 유지합니다.예를 들어 다음과 같이 쿼리 모드가 트리거됩니다.

  • 문서 유형 선언이 없거나 불완전한 경우
  • HTML 3 이전 문서가 발견된 경우
  • HTML 4.0 Transitional 또는 Frameset 문서 유형 선언이 사용되며 시스템 식별자(URI)가 존재하지 않는 경우
  • 문서 유형 선언 앞에 SGML 주석 또는 기타 인식할 수 없는 내용이 나타나는 경우
  • 또한 Internet Explorer 6은 문서 유형 [19]선언 전에 XML 선언이 있는 경우에도 쿼크 모드를 사용합니다.

Internet Explorer 버전 5 이전에서는 W3C 박스 모델을 사용하여 웹 페이지를 표시하도록 강제하기 위한 다양한 회피책이 고안되었습니다.이러한 회피책에서는 일반적으로 Internet Explorer의 CSS 셀렉터 처리와 관련된 버그를 이용하여 특정 규칙을 브라우저로부터 숨깁니다.이러한 회피책 중 가장 잘 알려진 것은 매킨토시용 Internet Explorer에서 작업하면서 이 아이디어를 개발한 마이크로소프트 전 직원 Tantek ç릭이 개발한 "박스 모델 해킹"입니다.여기에는 Internet Explorer for Windows의 폭 선언을 지정한 후 CSS 준거 브라우저의 다른 폭 선언으로 덮어씁니다.이 두 번째 선언은 CSS 규칙을 해석하는 방법으로 다른 버그를 악용하여 Windows용 Internet Explorer에서 숨겨집니다.이러한 CSS "핵"의 실장은 Internet Explorer 7의 공개 릴리스에 의해 더욱 복잡해졌습니다.이 릴리스에서는 일부 문제가 수정되었지만 다른 문제는 수정되지 않았기 때문에 이러한 [18]핵을 사용하는 페이지에서 바람직하지 않은 결과가 발생하고 있습니다.

박스 모델핵은 브라우저의 CSS 지원 버그에 의존하기 때문에 신뢰성이 낮은 것으로 판명되었습니다.이러한 버그는 이후 버전에서 수정될 수 있습니다.이러한 이유로 일부 웹 개발자들은 대신 동일한 요소에 너비와 패딩을 지정하는 것을 피하거나 이전 [14][20]버전의 Internet Explorer에서 박스 모델 버그를 피하기 위해 조건부 주석 및/또는 CSS 필터를 사용할 것을 권장합니다.

Internet Explorer 박스 모델 지원

웹 디자이너 Doug Bowman은 오리지널 Internet Explorer 박스 모델이 더 좋고 논리적인 접근 [21]방식을 나타낸다고 말했습니다.Peter-Paul Koch는 물리 박스의 예를 제시합니다.물리 박스의 치수는 항상 박스 자체를 참조합니다.여기에는 잠재적인 패딩이 포함되지만 [13]내용물은 포함되지 않습니다.그는 이 박스 모델이 그래픽 디자이너에게 더 유용하다고 말합니다.그래픽 디자이너는 상자의 [22]너비보다 눈에 보이는 너비를 바탕으로 디자인을 만듭니다.Bernie Zimmermann은 Internet Explorer 박스 모델이 HTML 테이블 [23]모델에서 사용되는 셀 치수와 패딩의 정의에 가깝다고 말합니다.

W3C는 CSS3에 '박스사이징' 속성을 포함하고 있습니다.언제box-sizing: border-box; 는 요소에 대해 지정되며 요소의 패딩 또는 테두리는 "기존 HTML 사용자 [24]에이전트에 의해 일반적으로 구현된" 지정된 폭과 높이 안에 그려집니다.Internet Explorer 8, Apple Safari 5.1+ 및 Google Chrome 등의 WebKit 브라우저, Mozilla Firefox 29.0 이후, Opera 7.0 이후 및 Konqueror 3.3.2 이후는 CSS3 박스사이징 속성을 지원합니다.29.0 이전 버전의 Gecko 브라우저는 브라우저 고유의 기능을 사용하여 동일한 기능을 지원합니다.-moz-box-sizing속성.[25] border-box는 부트스트랩 프레임워크에서 사용되는 기본 박스 모델입니다.

레퍼런스

  1. ^ a b Etemad, Elika J., ed. (22 December 2020). "CSS Box Model Module Level 3". W3C. Level 3. CSS Working Group. Retrieved 9 April 2021.
  2. ^ a b Bos, Bert; Prowse, Anton, eds. (6 July 2018). "CSS Basic Box Model Level 3". W3C. 31 July 2018. CSS Working Group. Retrieved 9 April 2021.
  3. ^ "CSS". MDN Web Docs. 23 March 2019. Retrieved 30 March 2019.
  4. ^ a b Wium Lie, Håkon; Bos, Bert (11 January 1999). "Cascading Style Sheets, level 1 § Formatting model". World Wide Web Consortium. Retrieved 26 October 2017.
  5. ^ Håkon Wium Lie; Bert Bos (17 December 1996). "Cascading Style Sheets, level 1". World Wide Web Consortium. Retrieved 9 December 2006.
  6. ^ Peter-Paul Koch (2013). "CSS - box-sizing". quirksmode.org. Retrieved 30 March 2019.
  7. ^ Raggett, Dave (23 January 1996). "The HTML3 Table Model". World Wide Web Consortium. Retrieved 26 October 2017."RFC 1942 HTML Tables". IETF. The default table width is the space between the current left and right margins.
  8. ^ Raggett, Dave; Le Hors, Arnaud; Jacobs, Ian (24 December 1999). "13 Objects, Images, and Applets § Width and height". World Wide Web Consortium. Retrieved 26 October 2017.
  9. ^ Raggett, Dave (14 January 1997). "HTML 3.2 Reference Specification". World Wide Web Consortium. Retrieved 26 October 2017.
  10. ^ Wium Lie, Håkon; Bos, Bert (17 December 1996). "Cascading Style Sheets, level 1". World Wide Web Consortium. Retrieved 26 October 2017.
  11. ^ Wium Lie, Håkon; Bos, Bert (17 December 1996). "Cascading Style Sheets, level 1". World Wide Web Consortium. Retrieved 26 October 2017.
  12. ^ Koch, Peter-Paul. "Box model tweaking". XS4ALL. Retrieved 26 October 2017.
  13. ^ a b Koch, Peter-Paul. "CSS - box-sizing". QuirksMode. Retrieved 26 October 2017.
  14. ^ a b Johansson, Roger (21 December 2006). "Internet Explorer and the CSS box model". 456 Berea Street. Retrieved 26 October 2017.
  15. ^ Lance Silver (March 2001). "CSS Enhancements in Internet Explorer 6". Microsoft Developer Network. Microsoft. Retrieved 24 June 2007.
  16. ^ Shafer, Dan (2005). HTML Utopia: Designing Without Tables Using CSS. Melbourne: Sitepoint. pp. 124 & Appendix C. ISBN 0-9579218-2-9.
  17. ^ Shea, David; Molly E. Holzschlag (2005). The Zen of CSS Design. Berkeley: Peachpit Press. ISBN 0-321-30347-4.
  18. ^ a b Markus Mielke (26 September 2006). "Cascading Style Sheet Compatibility in Internet Explorer 7". Microsoft Developer Network. Microsoft. Retrieved 24 June 2007. 「비 엄밀한 모드(quirks)로 작성된 페이지는, IE7 의 동작을 변경하지 않고, CSS 필터의 파손에 의해서도 영향을 받지 않습니다.엄격하지 않은 모드(또는 "quirks 모드")로 작성된 페이지는 IE7에서 동작을 변경하지 않습니다.
  19. ^ "!DOCTYPE". Microsoft Developer Network. Microsoft. Retrieved 13 January 2007. 「다음의 예는, 사용 방법을 나타내고 있습니다.문서가 준수하는 DTD를 지정하고 Internet Explorer 6 이상을 표준 준수 모드로 전환하기 위한 DOSCTYPE 선언."
  20. ^ Arve Bersvendsen (February 2004). "Hack-free CSS for IE". Arve Bersvendsen's weblog. Archived from the original on 15 January 2007. Retrieved 16 January 2007.
  21. ^ "Vorsprung durch Webstandards Douglas Bowman declares his love to CSS". Vorsprungdurchwebstandards.de. Archived from the original on 14 June 2010. Retrieved 7 July 2010.
  22. ^ "Vorsprung durch Webstandards Peter-Paul Koch declares his love to CSS". Vorsprungdurchwebstandards.de. Archived from the original on 27 February 2010. Retrieved 7 July 2010.
  23. ^ "Box Model Enlightenment, Bernie Zimmermann". Bernzilla.com. 4 April 2003. Archived from the original on 27 December 2010. Retrieved 7 July 2010.
  24. ^ "CSS3 Basic User Interface Module". World Wide Web Consortium.
  25. ^ "-moz-box-sizing". Mozilla Developer Center. Mozilla. 11 April 2009. Retrieved 11 April 2009. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

외부 링크