CSS Display 속성 및 배경 이미지 속성 예시
CSS의 Display 속성과 배경 이미지 설정은 웹 페이지의 레이아웃과 디자인을 정의하는 데 중요한 역할을 합니다. 이번 글에서는 다양한 Display 속성과 배경 이미지 설정 예시에 대해 알아보겠습니다.
1. Display 속성
Display 속성은 HTML 요소가 어떻게 배치되고 표시될지를 정의합니다. 주로 사용되는 Display 속성에는 block, inline, inline-block, none 등이 있습니다.
block
block 요소는 항상 새 줄에서 시작하며, 가능한 모든 너비를 차지합니다. div, h1, p 등의 요소가 block 요소입니다.
예제:
.block-example {
display: block;
width: 100%;
background-color: lightblue;
}inline
inline 요소는 줄을 바꾸지 않고, 콘텐츠의 너비만큼 차지합니다. a, span, img 등의 요소가 inline 요소입니다.
예제:
.inline-example {
display: inline;
color: red;
}inline-block
inline-block 요소는 inline처럼 한 줄에 표시되지만, block처럼 너비와 높이를 지정할 수 있습니다.
예제:
.inline-block-example {
display: inline-block;
width: 150px;
height: 100px;
background-color: lightgreen;
}none
none 요소는 페이지에 표시되지 않습니다.
예제:
.none-example {
display: none;
}float
float 속성은 요소를 왼쪽이나 오른쪽으로 떠 있게 하고, 주변에 다른 요소들이 배치되도록 합니다.
예제:
.float-left {
float: left;
}
.float-right {
float: right;
}direction
direction 속성은 텍스트의 읽기 방향을 설정합니다.
예제:
.rtl {
direction: rtl;
}writing-mode
writing-mode 속성은 텍스트의 쓰기 방향을 설정합니다.
예제:
.vertical {
writing-mode: vertical-rl;
}2. 배경 이미지 속성 예시
배경 이미지를 설정할 때 다양한 속성을 사용하여 원하는 효과를 만들 수 있습니다. background-size 속성은 배경 이미지의 크기를 조절하는 데 사용됩니다.
HTML 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Size Example</title>
<style>
.example {
width: 300px;
height: 200px;
border: 1px solid #000;
background-image: url('example-image.jpg');
background-repeat: no-repeat;
background-position: center;
}
.size-auto {
background-size: auto;
}
.size-300-400 {
background-size: 300px 400px;
}
.size-80 {
background-size: 80%;
}
.size-cover {
background-size: cover;
}
.size-contain {
background-size: contain;
}
.size-100 {
background-size: 100%;
}
.size-100-100 {
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="example size-auto">background-size: auto;</div>
<div class="example size-300-400">background-size: 300px 400px;</div>
<div class="example size-80">background-size: 80%;</div>
<div class="example size-cover">background-size: cover;</div>
<div class="example size-contain">background-size: contain;</div>
<div class="example size-100">background-size: 100%;</div>
<div class="example size-100-100">background-size: 100% 100%;</div>
</body>
</html>background-size 속성의 다양한 값
auto: 이미지의 원래 크기를 유지합니다.300px 400px: 너비를 300px, 높이를 400px로 설정합니다.80%: 요소의 크기에 상대적으로 80% 크기로 설정합니다.cover: 요소를 완전히 덮도록 이미지를 확대하거나 축소합니다.contain: 요소 안에 이미지를 완전히 맞추도록 크기를 조절합니다.100%: 요소의 너비에 맞추어 100% 크기로 설정합니다.100% 100%: 요소의 너비와 높이에 맞추어 100% 크기로 설정합니다.
결론
CSS의 Display 속성과 배경 이미지 설정은 웹 페이지의 레이아웃과 디자인을 정의하는 데 중요한 역할을 합니다. 다양한 Display 속성을 사용하여 요소를 배치하고, 배경 이미지 속성을 활용하여 웹 페이지를 시각적으로 매력적으로 만들 수 있습니다. 이러한 속성을 잘 이해하고 활용하여, 더 나은 웹 페이지를 디자인해 보세요.
