CSS 테두리(Border), 여백(Margin), 패딩(Padding)
테두리 스타일 (Border Styles)
역사적 배경 (Historical Background)
CSS의 테두리(Border) 속성은 초기 CSS1 사양부터 존재하여 요소의 경계를 꾸미는 데 사용되었습니다. 시간이 지나면서 CSS3에서는 테두리의 모양과 스타일을 더욱 다양하게 설정할 수 있는 기능들이 추가되었습니다.
개념 및 원리 (Concept and Principles)
테두리(Border)는 HTML 요소의 가장자리를 둘러싸는 선으로, 스타일, 너비, 색상을 지정할 수 있습니다.
border-style
테두리의 스타일을 지정합니다. 가능한 값으로는 none, solid, dashed, dotted, double, groove, ridge, inset, outset 등이 있습니다.
div {
border-style: solid;
}
border-width
테두리의 너비를 지정합니다. 값은 픽셀(px) 또는 다른 단위로 지정할 수 있습니다.
div {
border-width: 2px;
}
border-color
테두리의 색상을 지정합니다.
div {
border-color: red;
}
종합 예제
div {
border-style: solid;
border-width: 2px;
border-color: red;
}
이 코드는 요소의 테두리를 빨간색 실선으로, 너비는 2px로 설정합니다.
여백(Margin)과 패딩(Padding)의 차이점
역사적 배경 (Historical Background)
여백(Margin)과 패딩(Padding)은 초기 CSS1부터 존재하는 중요한 레이아웃 구성 요소입니다. 이들은 요소의 배치와 간격을 조절하는 데 사용되며, 웹 페이지 디자인의 기본적인 부분을 차지합니다.
개념 및 원리 (Concept and Principles)
여백과 패딩 모두 요소 주위의 간격을 조절하지만, 서로 다른 역할을 합니다.
여백 (Margin)
여백은 요소의 경계 바깥에 위치하며, 요소와 이웃 요소 사이의 간격을 설정합니다.
div {
margin: 20px;
}
패딩 (Padding)
패딩은 요소의 경계 안쪽에 위치하며, 요소의 내용과 경계 사이의 간격을 설정합니다.
div {
padding: 20px;
}
여백과 패딩의 설정 방법
개념 및 원리 (Concept and Principles)
여백과 패딩은 단축 속성을 사용하여 한 번에 설정할 수 있습니다. 각 측면(상, 하, 좌, 우)에 대해 개별적으로 설정할 수도 있습니다.
margin
여백을 단축 속성으로 설정할 수 있습니다.
div {
margin: 10px 20px 30px 40px; /* 상, 우, 하, 좌 */
}
또는 개별적으로 설정할 수 있습니다.
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
padding
패딩을 단축 속성으로 설정할 수 있습니다.
div {
padding: 10px 20px 30px 40px; /* 상, 우, 하, 좌 */
}
또는 개별적으로 설정할 수 있습니다.
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
원형 테두리 (Border Radius)
역사적 배경 (Historical Background)
CSS3에서는 테두리의 모서리를 둥글게 만들 수 있는 border-radius 속성이 도입되었습니다. 이는 모던한 웹 디자인에서 많이 사용되며, 다양한 형태의 버튼, 카드 등을 만드는 데 유용합니다.
개념 및 원리 (Concept and Principles)
border-radius는 요소의 테두리 모서리를 둥글게 만듭니다. 값은 픽셀(px) 또는 퍼센트(%)로 지정할 수 있습니다.
div {
border: 2px solid black;
border-radius: 10px;
}
이 코드는 테두리의 모서리를 10px 만큼 둥글게 만듭니다.
상자 그림자 (Box Shadow)
역사적 배경 (Historical Background)
상자 그림자(Box Shadow) 속성은 CSS3에서 도입되어, 요소에 그림자 효과를 추가할 수 있게 되었습니다. 이는 요소의 깊이와 입체감을 더해주는 시각적 효과로, 모던 웹 디자인에서 많이 사용됩니다.
개념 및 원리 (Concept and Principles)
box-shadow 속성은 요소에 그림자를 추가합니다. 값은 오프셋 X, 오프셋 Y, 흐림 반경, 확산 반경, 색상 순으로 지정됩니다.
div {
box-shadow: 10px 10px 5px grey;
}
이 코드는 요소에 오른쪽 아래로 10px씩 오프셋된 5px 흐린 회색 그림자를 추가합니다.
종합 예제 (Comprehensive Example)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 테두리, 여백, 패딩 예제</title>
<style>
.box {
width: 200px;
height: 150px;
border: 2px solid black;
border-radius: 15px;
padding: 20px;
margin: 30px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
이 상자는 다양한 CSS 속성을 사용하여 스타일링되었습니다.
</div>
</body>
</html>
이 예제는 다양한 CSS 속성(테두리, 여백, 패딩, 원형 테두리, 상자 그림자)을 사용하여 요소를 스타일링하는 방법을 보여줍니다. 이 코드는 실용적인 사용 예시를 통해 CSS 테두리, 여백, 패딩의 다양한 기능을 설명합니다.