CSS의 box model

by

CSS 상자 모델은 각 요소가 웹 페이지에 그려지는 방식을 정의하는 CSS의 핵심 개념입니다. 콘텐츠 영역, 패딩, 가장자리 및 테두리네 부분으로 구성되어 있습니다.

  • 콘텐츠 영역은 텍스트, 이미지 및 기타 콘텐츠를 표시하는 요소 내의 영역입니다.
  • 패딩은 콘텐츠와 테두리 사이의 거리콘텐츠 주위에 공간을 만드는 데 사용됩니다.
  • 테두리는 채우기 및 콘텐츠 영역을 둘러싸는 선이며 요소의 시각적 경계를 정의하는 데 사용됩니다.
  • 페이지의 여백 프레임과 인접 요소 사이의 거리요소 사이에 공간을 만드는 데 사용됩니다.

아래는 박스 모델을 적용한 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Box Model Example</title>
	<style>
		.box {
			width: 200px;
			height: 100px;
			padding: 20px;
			border: 2px solid black;
			margin: 50px;
		}
	</style>
</head>
<body>
	<div class="box">
		<p>This is an example of the CSS box model.</p>
	</div>
</body>
</html>

위의 예에서 “box” 클래스로 div 요소를 만들었습니다. 그런 다음 CSS로 속성을 정의합니다. 상자의 너비와 높이는 각각 200px와 100px로 설정했습니다. 또한 20픽셀의 패딩을 추가하여 콘텐츠와 상자 테두리 사이에 공간을 만듭니다. 그런 다음 상자 주위에 검은색으로 된 2픽셀의 “경계”를 추가하여 시각적 경계를 정의합니다. 마지막으로 상자 주위에 50px 테두리를 추가하여 상자와 페이지의 다른 요소 사이에 공간을 만듭니다.

CSS 개요와 테두리의 차이점

'추천 관련글,

혼동하기 쉬운 CSS의 Outline과 Border의 차이점을 살펴보겠습니다.

주요 차이점은 프레임이 요소 주위에 직사각형 프레임을 생성한다는 것입니다. 윤곽선이 요소 외부에 있습니다. 테두리를 만듭니다.

  1. 모양: 프레임은 사각형 프레임을 만들고 아웃라인은 원, 타원, 다각형 등 다양한 모양을 만들 수 있습니다.
  2. 레이아웃에 미치는 영향: 테두리는 공간을 차지하여 요소의 레이아웃에 영향을 줄 수 있지만 윤곽선은 레이아웃에 영향을 주지 않습니다.
  3. 스타일링 옵션: border-style, border-color, border-width와 같은 속성으로 테두리의 스타일을 지정할 수 있고 outline-style과 같은 속성으로 외곽선의 스타일을 지정할 수 있습니다. 점선, 점선 등으로 만들 수 있습니다.
  4. 아웃라인 사용: “아웃라인”은 키보드를 사용하여 웹을 탐색할 때 현재 포커스가 있는 요소를 표시하는 데에도 사용됩니다.

요약하면 “테두리”는 요소 주위에 직사각형 테두리를 만드는 데 사용되며 레이아웃에 영향을 주는 반면, “개요”는 요소 외부에 직사각형이 아닌 테두리를 만드는 데 사용되며 레이아웃에는 영향을 미치지 않습니다.

CSS에서 개요로 원을 그립니다.

CSS에서 외곽선으로 원을 그리는 방법 테두리 반경 속성그런 다음 요소의 모서리를 둥글게 만듭니다. 아웃라인을 사용하여 요소 외부에 원형 아웃라인을 그립니다. 예를 들어:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; 
  outline: 2px solid blue; 
}

이 예제에서는 .circle이라는 클래스를 만들고 너비 및 높이 속성을 100픽셀로 설정합니다. 그런 다음 border-radius 속성을 사용하고 50%로 설정하여 요소의 모서리를 둥글게 만듭니다. 즉, 요소가 완전한 원이 됩니다. 마지막으로 Outline 속성을 사용하여 요소 주위에 2px 너비의 파란색 테두리를 그립니다.

프레임 반경 및 윤곽선 값을 조정하여 다양한 원 크기와 프레임 스타일을 얻을 수 있습니다.

텍스트를 원으로 중앙에 배치

위의 코드를 적용하여 원의 중앙에 텍스트를 배치하는 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: auto;  
  padding: 20px;
  text-align: center;
}
.circle-outline {
  outline: 2px solid black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

.circle-outline p {
  text-align: center;
}
</style>
</head>
<body>

<div class="circle-outline">
  <p>Text</p>
</div>

</body>
</html>

출력 결과는 다음과 같습니다.