CSS의 box model은 웹 페이지에서 각 요소가 그려지는 방식을 정의하는 CSS의 핵심 개념입니다. 콘텐츠 영역, 패딩(padding), 테두리(border) 및 여백(margin)의 네 부분으로 구성됩니다.
- 콘텐츠 영역은 텍스트, 이미지 및 기타 콘텐츠가 표시되는 요소 내의 공간입니다.
- 패딩은 콘텐츠와 테두리 사이의 공간으로 콘텐츠 주위에 공간을 만드는 데 사용됩니다.
- 테두리(border)는 패딩 및 콘텐츠 영역을 둘러싸는 선이며 요소의 시각적 경계를 정의하는 데 사용됩니다.
- 여백(margin)은 페이지에서 테두리(border)와 인접한 요소 사이의 공간으로 요소 사이의 공간을 만드는 데 사용됩니다.
다음은 box model을 적용하는 샘플 코드입니다.
<!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를 사용하여 속성을 정의합니다. 박스의 width와 height를 각각 200px와 100px로 설정했습니다. 또한 20px의 패딩을 추가하여 내용과 상자 테두리(border) 사이에 공간을 만듭니다. 그런 다음 상자 주위에 2px 단색 검정의 'border(테두리)'를 추가하여 시각적 경계를 정의합니다. 마지막으로 상자 주위에 50px의 여백(margin)을 추가하여 상자와 페이지의 다른 요소 사이에 공간을 만듭니다.
CSS outline과 border의 차이점
헷갈리기 쉬운 CSS의 outline과 border의 차이점에 대해 알아보겠습니다.
제일 큰 차이점은 border는 요소 주위에 직사각형 테두리를 만들고 outline은 요소 외부에 테두리를 만듭니다.
- 모양: border는 사각형 테두리를 만들고 outline은 원, 타원, 다각형 등 다양한 모양을 만들 수 있습니다.
- 레이아웃에 미치는 영향: border는 공간을 차지하여 요소의 레이아웃에 영향을 줄 수 있지만 outline은 레이아웃에 영향을 주지 않습니다.
- 스타일링 옵션: border는 border-style, border-color 및 border-width와 같은 속성으로 스타일을 지정할 수 있으며 outline은 outline-style과 같은 속성으로 스타일을 지정할 수 있습니다. dotted, dashed 등의 스타일을 지정할 수 있습니다.
- outline 의 활용: 'outline'은 키보드로 웹 브라우징할 때 현재 포커스된 요소를 표시하기 위한 목적으로 사용되기도 합니다.
요약하면 'border'는 요소 주위에 직사각형 테두리를 만드는 데 사용되며 레이아웃에 영향을 주는 반면 'outline'은 요소 외부에 직사각형이 아닌 테두리를 만드는 데 사용되며 레이아웃에는 영향을 주지 않습니다.
CSS에서 outline을 사용하여 원 그리기
CSS에서 outline을 사용하여 원을 그리려면 border-radius 속성을 사용하여 요소의 모서리를 둥글게 만든 다음 outline을 사용하여 요소 외부에 원형 테두리를 그립니다. 예를 들면 다음과 같습니다.
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
outline: 2px solid blue;
}
이 예제에서는 .circle이라는 클래스를 만들고 width 및 height 속성을 100px로 설정합니다. 그런 다음 border-radius 속성을 사용하여 50%로 설정하여 요소의 모서리를 둥글게 만듭니다. 즉, 요소가 완전한 원이 됩니다. 마지막으로 outline 속성을 사용하여 요소 주위에 2px 실선 파란색 테두리를 그립니다.
border-radius 및 outline 값을 조정하여 다양한 원 크기와 테두리 스타일을 얻을 수 있습니다.
원안에 텍스트를 중앙에 배치하기
위 코드를 응용하여 텍스트를 원의 중앙에 배치하는 코드는 다음과 같습니다.
<!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>
'HTML, CSS' 카테고리의 다른 글
| css float 속성 (0) | 2023.03.19 |
|---|---|
| css overflow 속성 (0) | 2023.03.19 |
| html에서 img를 화면 가로로 가운데에 배치하는 방법 (0) | 2023.03.18 |
| html에서 이미지 크기를 적당히 조정하는 방법 (0) | 2023.03.18 |
| CSS display property (0) | 2023.03.18 |
