표준모드와 호환모드에 따른 엘리먼트 가로,세로 값

Web/CSS 2013.12.27 18:04

90일 컬리큘럼 수행중 다음 작업을 위해 잘 헤갈리는 것들 적어놓기~




브라우저가 렌더링 될때, 렌더링 모드에 따라

- 표준 모드 (standards) : W3C에서 정의한 웹표준 방식

- 호환 모드 (quirks) : 구브라우저를 위한 방식

이렇게 두가지로 렌더링 된다.


그런데 이 렌더링 모드에 따라 엘리먼트의 가로, 세로 사이즈를 지정할때 계산방식이 달라진다.

표준 모드 (standards)

: Box = Margin+Border+Padding+Width


호환 모드 (quirks)

: Box = Margin + Width(Border+Padding)


한마디로 Width 값을 계산할때 표준모드에서는 순수 컨텐츠 넓이 값(width/height에 padding, border 값을 포함하지 않는다)만 넣으면 되고

호환모드에서는 width 값을 줄때 보더와 패딩 값을 포함해서 줘야한다.


그럼??!! 

표준모드로 구현하는데 호환모드를 고려하고 싶을 땐?! 

Width 값에 좌우 padding값과 border값을 같이 선언하지 않고

Height 값 또한 상하 padding과 border값을 선언하지 않는 방식으로 구현하면 표준 모드와 동일한 레이아웃을 구현할수 있다.

라고 적혀있었다..


근데...이렇게 해주면 구현할때 제약이 많을 듯...

그냥 구브라우저를 포기하는게 여러모로 좋겠지만..


내 생각으로는..

box-sizing css 프로퍼티를 사용하면 

표준모드에서나 호환모드에서 동일하게 나오지 않을까 싶다..

(내 테스트 결과로는 그렇다;)

box-sizing은 ie8 이상부터만 사용할 수 있다는 점~

그러나 이 아이의 기능은 padding과 border 넓이를 줘도 지정한 넓이보다 늘어나지 않는다.

지정해준 width안에서 패딩과 보더값을 다 해결한다는 얘기~!


TEST

.text_box{		  
  width: 300px;
  margin: 10px;
  padding: 10px;
  border: 5px solid black;
}

<div class="text_box">         호환모드 or 표준모드 </div>

--결과--




box-sizing 주었을때


.box {width: 300px;margin: 10px;padding: 10px;
	border:5px solid #458B74;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
  }

<div class="box"> 호환모드 or 표준모드 </div>

--결과--






'Web > CSS' 카테고리의 다른 글

표준모드와 호환모드에 따른 엘리먼트 가로,세로 값  (0) 2013.12.27

설정

트랙백

댓글