반응형 border2 박스 모델 /border / padding / margin / float대용 margin병합? / table 선 없애기 박스모델 박스는 총 4가지의 세분된 영역으로 구성. 영역마다 다양한 스타일을 적용 Content 영역 : 요소의 실제 내용을 포함하는 영역. 따라서 크기는 내용의 너비 및 높이. 너비는 width가 선언하고 너비는 height가 선언. Padding 영역 : content 영역과 테두리 사이의 여백을 padding content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향 이에 따라 padding을 content의 연장으로 볼 수도 있다. Border 영역 : content 영역을 감싸는 테두리 선 Margin 영역 : border 바깥쪽의 영역 border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역 즉, 주변 요소와의 여백(간격) 지정 전체 박스 사이징의 값은 width + he.. 2019. 7. 24. [FC] CSS 스타일 / 박스모델 / margin / border / padding 박스모델이란 파란색은 컨텐츠영역 초록(padding)은 컨텐츠와 테두리 영역 간의 간격 노랑(border)은 테두리 영역 주황(margin)은 다른 태그(엘리먼트)들간의 간격 border영역이란? 블록요소인 p 태그는 자동 줄바꿈 이뤄짐 인라인 요소인 strong 태그는 옆에 붙음 이제 border영역을 나타내보자 블록요소인 p태그의 border영역은 페이지 영역 너비 전체를 차지하고 인라인요소인 strong태그의 border영역은 컨텐츠 영역 너비까지만 차지한다. padding 영역추가 margin 요소 추가 개발자 도구를 통해 값 살펴보기 입력한 box값들이 나온다. 특정방향에만 간격을 주고 싶을 때 특정방향(상,하,좌,우)의 간격만 바꿀 수 있다. 예시. padding, margin은 왼쪽에만 간격.. 2019. 6. 8. 이전 1 다음 반응형
