CSS - 박스의 정의

박스(box)란 이미지, 도형, 글자들 모두를 말합니다. p, table, ol, ul, img, input, textarea, select 와 object 등이 포함되며, 이러한 박스는 다음의 형태로 이루어져 있습니다.

안쪽 여백과 바깥쪽 여백, 테두리나 색상을 어떻게 설정하느냐에 따라 스타일이 많이 바뀌게 되며 박스의 마진, 패딩, 보더는 각 4방향 상하좌우로 나누어져 있어 스타일을 따로 지정할 수 있습니다.

테두리(border) 스타일은 다음 값으로 설정할 수 있으며 속성이 지정되지 않으면 테두리 선은 나타나지 않습니다.

<style>
p {
  /* 바깥쪽 여백 15px 띄움 */
  margin: 15px;

  /* 안쪽 여백을 15px 띄움 */
  padding: 15px;

  /* 테두리 두께는 10px, 색상은 검은색, 스타일은 도트 */
  border: 10px dotted #000000;

  /* 컨텐츠 영역 배경 색상은 노란색 */
  background-color: yellow; 

  /* 컨텐츠 영역 부분만 배경으로 채움. */
  background-clip: content-box;
}
</style>

<p>테두리 스타일</p>

테두리 스타일