CSS를 이용하면 웹사이트의 디자인과 레이아웃을 자유롭게 조정할 수 있습니다. 이번 글에서는 CSS에서 div 박스 안에 아래 이미지와 같은 배경을 설정하는 방법에 대해 자세히 알아보도록 하겠습니다.
클래스 선택자: .cross
CSS에서 클래스 선택자는 웹사이트의 특정 요소를 선택하는 데 사용됩니다. .cross는 클래스 선택자로, HTML에서 class 속성이 “cross”인 요소를 선택합니다.
HTML에서 .cross 클래스를 가진 요소를 만들려면 다음과 같이 작성할 수 있습니다.
[HTML]
<div class="cross">
</div>
[CSS]
.cross {
border: 2px solid #3f6db3;
background-image: url("../Images/cross.png");
background-size: 150px;
border-radius: 7px;
padding: 1em;
}
스타일링 방법: border, border-radius, padding
. border 속성은 요소의 테두리를 설정하는 데 사용됩니다. “2px solid #3f6db3″는 테두리의 두께를 2픽셀로, 스타일을 실선으로, 색상을 #3f6db3(파란색)으로 설정합니다.
.border-radius 속성은 요소의 테두리 모서리를 둥글게 만드는 데 사용됩니다. “7px”는 테두리 모서리의 둥근 정도를 7픽셀로 설정합니다.
.padding 속성은 요소의 안쪽 여백을 설정하는 데 사용됩니다. “1em”은 요소의 안쪽 여백을 요소의 글자 크기와 동일하게 설정합니다.
배경 설정 방법: background-image, background-size
.background-image 속성은 요소의 배경 이미지를 설정하는 데 사용됩니다. “url(“../Images/cross.png”)”는 배경 이미지를 “cross.png” 파일로 설정합니다.
.background-size 속성은 배경 이미지의 크기를 설정하는 데 사용됩니다. “150px”는 배경 이미지의 너비를 150픽셀로 설정합니다.
결론
.cross 클래스를 지정해 div box에 배경을 넣는 스타일링 방법에 대해 자세히 알아보았는데 잘 활용하면 전자책(EPUB) 및 웹사이트의 접근성을 향상시킬 수 있습니다. 도움이 되었기를 바랍니다.