컨텐츠(content) : 박스의 내용물, 텍스트와 이미지가 나타나는 부분이다. 패딩 (padding) : 콘텐츠 주위의 영역, 패딩은 투명 하다 경계(border) : 패딩과 내용물을 감싸는 경계, 경계는 박스의 경계색에 의하여 영향을 받는다. 마진(margin) : 경계 주위의 영역, 마진은 투명 하다.
경계선 스타일 border-style 상 하 좌 우 선택 가능 none dotted dashed solid double groove ridge inset outset
경계선의 폭 border-width 상 하 좌 우 선택 가능 thin medium thick
경계선 컬러 border-color 색상(green) rgb(0, 255, 0) "#00ff00"
margin 속성을 이용한 수평 정렬 어떤 HTML 요소를 화면의 중앙에 위치시키고자 하면, align='center' 로 하면 되었다. html5 에서 align 속성을 삭제 하였다. css만을 사용하여 어떤 요소를 중앙 정렬하려면 어떻게 해야 하는가?
- 인라인요소 테스트나 <em>과 같은 인라인 요소를 컨테이너의 중앙에 놓으려면 컨테이너의 text-align 속성을 사용하면 된다. 그렇게 하면 블록 수준의 컨테이너 안에서 인라인 요소가 중앙 정렬된다. 예를 들어 <em> 요소를 <p> 안에서 중앙 정렬 해보자. ex) p, em, strong, div { border: dotted 3px red; } style="text-align : center"