1)background
- image: 경로설정
- repeat: 반복할지 안할지
- repeat/no-repeat
- attachment : 어디에 붙어있는지
- 기본값 scroll : 내리면 이미지는 안내려온다
- fixed : 이미지도 같이 내려온다
- position : 위치
- background-position: 0 50%;을 준 모습 (x축y축)
2)position
tip> 포지션 top left지정안해주면 부모를 relative로 안했을 경우 원래 흐름에 있음
- transform:translate()
- fixed, sticky
https://shadesign.tistory.com/40 참고
| translate (x, y) 함수는 요소를 왼쪽에서부터 x거리, 위에서부터 x 거리만큼 상대적으로 위치를 정하거나, 이동 및 재배치를 지정.Y 방향의 거리는 생략할 수 있지만, 이 경우의 Y방향의 거리는 "0" |
- z-index 숫자가 크면 위로
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
margin: 0;
padding: 0;
}
#space {
width: 200px;
height: 200px;
background-color: rgb(252, 14, 192);
}
#relative {
/* position: relative; */
width: 200px;
height: 200px;
background-color: skyblue;
}
div.x {
position: absolute;
width: 100px;
height: 100px;
background-color: #000000;
/* top: 0px; */
}
div.y {
width: 100px;
height: 100px;
background-color: #7f19d2;
}
div.z {
width: 100px;
height: 100px;
background-color: #a1480d;
}
#image {
width: 100vw;
height: 500px;
background-image: url("../images/zz.PNG");
background-color: aqua;
/* 반복x */
background-repeat : no-repeat;
/* 기본값 scroll */
/* background-attachment : fixed; */
background-position: center;
/* x축 y축 */
background-position: 0 50%;
}
</style>
</head>
<body>
<div id="image">
</div>
<div id="space">
</div>
<div id="relative">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
<hr>
</body>
</html>
3)overflow
- hidden, visible, scroll, auto(자동 넘치면 scroll)
'Html > 이론' 카테고리의 다른 글
| Flex (0) | 2023.05.26 |
|---|---|
| grid (0) | 2023.05.24 |
| 대소문자/ 들여쓰기/선으로 텍스트꾸미기/ 글자 단어 사이간격/border (0) | 2023.05.22 |
| :active/:hover/:visited/ nth-child (0) | 2023.05.22 |
| 시맨틱태그 (0) | 2023.05.22 |
