728x90
반응형
SMALL
위치 (Position)
CSS에서 위치 지정은 웹 페이지의 요소들을 원하는 위치에 배치하는 데 사용되는 기능이다. position 속성을 사용하여 위치를 지정할 수 있으며, static, relative, absolute, fixed, sticky와 같은 값을 가질 수 있다. 또한 top, bottom, left, right 속성을 사용하여 위치를 더 정확하게 조절할 수 있다.
배경 (Background)
배경 스타일은 웹 페이지의 요소에 배경 색상, 이미지, 반복, 위치 등을 적용하는 데 사용되는 CSS 기능이다. background-color, background-image, background-repeat, background-position 등의 속성을 사 용하여 배경 스타일을 정의할 수 있다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<link rel="stylesheet" href="default.css">
</head>
<body>
<h1>CSS</h1>
<div class="wrapper">
<div class="inside"></div>
</div>
</body>
</html>
css
h1 {
color: red;
}
.wrapper {
border: #000 1px solid;
width: 600px;
height: 400px;
position: relative;
left: 50px;
top: 100px;
}
.inside {
border: #ff0000 1px solid;
width: 200px;
height: 100px;
position: absolute;
top: 20px;
left: 50px;
}
"wrapper" <div>는 상대 위치 지정을 사용하고 있으며, "inside" <div>는 절대 위치 지정을 사용하고 있다. 절대 위치 지정된 요소는 가장 가까운 상위 요소에 기반하여 위치가 결정되므로, 여기서 "inside" <div>는 상위 "wrapper" <div>에 기반하여 위치가 결정된다.
728x90
반응형
LIST
'Programming > Website' 카테고리의 다른 글
| [Website] 그레디언트 (Gradients) (0) | 2023.05.26 |
|---|---|
| [Website] 가상 클래스 (Pseudo Classes) (0) | 2023.05.26 |
| [Website] CSS (Cascading Style Sheets) (2) (0) | 2023.05.26 |
| [Website] CSS (Cascading Style Sheets) (1) (0) | 2023.05.25 |
| [Website] HTML 태그 (3) (0) | 2023.05.25 |
