[CSS] 테두리(Border), 여백(Margin)

목차

CSS로 테두리와 여백 꾸미기: 웹 페이지의 테두리부터 바깥 공간까지 🖼️🌌

안녕하세요, 디자인 애호가 여러분! 🌟 웹 페이지의 각 요소를 마치 작은 그림처럼 프레임으로 감싸거나, 그 요소들 사이에 얼마나 빈 공간을 줄 것인지 결정하는 것, 이것이 바로 오늘의 주제입니다. 오늘은 CSS에서 테두리(border)와 여백(margin)에 대해 함께 알아보도록 하겠습니다.

 

1. 테두리(Border) 꾸미기

테두리는 웹 요소의 바깥쪽을 둘러싸는 선입니다. 이 테두리는 선의 스타일, 색상, 두께 등을 지정할 수 있습니다.

• 스타일: border-style을 사용해 여러 스타일의 선을 선택할 수 있습니다. 예를 들면, solid, dashed, dotted 등이 있습니다.

.box {
    border-style: solid; /* 실선 테두리 */
}

• 색상: border-color로 테두리의 색상을 지정합니다.

.box {
    border-color: #3498db; /* 푸른색 테두리 */
}

• 두께: border-width로 테두리의 두께를 지정합니다.

.box {
    border-width: 2px; /* 2픽셀 두께의 테두리 */
}

 

2. 여백(Margin) 조절하기

여백은 웹 요소의 바깥 부분에 있는 공간을 의미합니다. 이를 통해 요소와 요소 사이의 간격을 조절할 수 있습니다.

• 전체 여백 지정: 한 번에 모든 방향의 여백을 지정할 수 있습니다.

.box {
    margin: 10px; /* 모든 방향에 10픽셀 여백 적용 */
}

• 특정 방향의 여백 지정: 상하좌우의 여백을 각각 다르게 설정할 수 있습니다.

.box {
    margin-top: 10px;    /* 위쪽 여백 */
    margin-right: 20px;  /* 오른쪽 여백 */
    margin-bottom: 10px; /* 아래쪽 여백 */
    margin-left: 20px;   /* 왼쪽 여백 */
}

 

마치며

테두리와 여백은 웹 페이지의 요소들을 깔끔하게 구분하고, 공간적인 미적 감각을 증진하는 데 중요한 역할을 합니다. 이를 통해 사용자의 눈길을 끄는 데 도움을 주며, 웹 페이지 전체의 퀄리티를 한 단계 끌어올릴 수 있습니다. 다음 포스트에서는 더 다양한 스타일링 기법에 대해 함께 알아보도록 하겠습니다. 여러분의 디자인 여정에 빛나는 별이 되길 바랍니다! ✨🖌️🚀