반응형 박스 모델3 [css] width 속성 [css] width 속성 width와 height 속성은 너무 기본이라 모두들 알고 있을 것으로 생각돼 따로 다루지 않았는데 박스 모델을 설명하다 보니 꼭 필요한 부분 같아 오늘 정리해 보았습니다. 우선 박스 모델부터 살펴 볼게요. 요소의 박스는 content, padding, border, margin 으로 이루어져 있습니다. content - 내용 영역 padding - 내용과 border 사이의 여백 border - 선 margin -border 와 바깥과의 여백 width 속성 요소의 너비를 설정할 때 width 속성을 쓰는데 이때 width는 content 영역만을 의미합니다. (padding, border, margin을 포함하지 않음) ※ width 속성은 inline 요소, table r.. 2014. 12. 9. [css3] box-sizing 속성 [css3] box-sizing 속성 box-sizing 속성은 박스 모델과 관계가 있습니다. 박스 모델 이해하기 박스는 content, padding, border, margin로 이루어져 있습니다. content-내용 영역 padding-내용과 border 사이 여백 border- 선 margin-선과 바깥 과의 여백 [표준 브라우저의 너비, 높이 계산법] 요소의 너비와 높이를 계산할 때 width 와 height 속성을 쓰는데 width, height는 content 영역만의 너비와 높이 입니다. 이것이 표준 브라우저의 계산법입니다. 예} 아래와 같은 div가 있을 경우 div{ width:300px; padding: 10px; margin: 0px; border: 5px solid black; }.. 2014. 11. 25. [html/css] 박스 모델 이해하기 [html/css] 박스 모델 이해하기 부제: margin, padding, border 차이 박스 모델(box model) 역시 초반에 다루었어야할 주제인데, 어렵게 느껴지는 부분이 있어ㅠ.ㅠ 차일피일 미루다 아주 단순하게 설명해 보기로 했어요. HTML 요소는 박스로 이루어져 있습니다. div나 표 뿐만 아니라, 글자나 이미지 등 모든 요소가 보이지 않는 박스로 이루어져 있습니다. 각 박스는 내용 영역이 있고(content area) 내용 영역 주위로, padding, border, margin 이 감싸고 있는 형태입니다. 그림 출처: http://www.w3.org/TR/css3-box/#block-level0 용어 설명 content: 내용을 담는 공간 padding: 내용과 테두리 (border.. 2014. 6. 30. 이전 1 다음 반응형
