border- – 테두리의 두께, 색 등을 설정합니다.
.paragraph { border-style: dotted; border-width: 1px; border-color: blue; }
background- – 배경 색상, 이미지 등을 설정합니다.
.paragraph { background-color: blue; background-image: url(이미지 경로); background-repeat: repeat-x; background-position: top; }
border-, background- 속성을 사용해, 앞서 다룬 .paragraph 클래스의 테두리와 배경도 설정해봅시다!
- 테두리는 실선(solid) 형태로, 두께는 2px, 색상은 빨간색으로 설정합니다.
- 배경색은 노란색으로, 배경 이미지는 엘리스 로고 그림으로, 이미지 반복 없이(no-repeat), 가운데(center) 정렬로 설정합니다.
- 이미지 파일명은 elice_logo.png 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 주요 속성 2</title>
<style>
.paragraph {
width: 500px;
height: 500px;
font-size; 50px;
font-weight: bold;
font-style: italic;
font-family: Arial, times, sans-serif;
border-style: solid; border-width: 2px; border-color:red;
background:yellow; background-image: url(elice_logo.png); background-repeat: no-repeat; background-position: center;
}
</style>
</head>
<body>
<h1 class="paragraph">Nice to meet you</h1>
</body>
</html>