💾 Editor: VSCode
이미지가 이렇게 여백이 있을 시에는 body 태그에 style="margin:0px;" 을 줌
<body style="margin:0px;">
<div class="main-background">
<h4 class="main-title">Fly me to the moon</h4>
<h2 class="question">Do you want to go?</h2>
<button class="button">click this button</button>
</div>
</body>그럼 여백 없이 꽉 채워짐
👉 position (좌표 이동 가능, 공중에 붕 뜸)
https://developer.mozilla.org/ko/docs/Web/CSS/position
- relative: 기준점을 기준으로 이동 (내 위치 기준)
- static: 좌표이동 X
- fixed: 현재 화면이 기준 (ex- 고정된 메뉴)
- absolute: 내 부모 태그 중에 relative 가진 부모 기준
💡 오른쪽 아래 정렬
/* 부모 태그 */
.main-background {
width: 100%;
height: 500px;
background-image: url(../img/moon.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
filter: brightness(70%);
padding: 1px;
color: white;
text-align: center;
position: relative; 💡💡💡
}
/* 자식 태그 */
.main-button {
padding: 15px;
font-size: 20px;
background: white;
border: none;
border-radius: 5px;
position: absolute; 💡💡💡
bottom: 20px;
right: 20px;
}- 부모 태그 position: relative
- 자식 태그 postion: absolute
💡 가운데 정렬
/* 부모 태그 position: realative 인 상태 */
.main-button {
padding: 15px;
font-size: 20px;
background: white;
border: none;
border-radius: 5px;
position: absolute; 💡
left: 0px; 💡
right: 0px; 💡
margin: auto; 💡
width: 150px; 💡
}
👉 실습
layout2.html
<div class="bottom-box">
<p class="bottom-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse molestiae dolore sed, est soluta earum.
Temporibus cupiditate, tempora doloribus aliquid quo ipsum maxime, architecto iste rerum maiores consequatur
quas corrupti?
</p>
</div>
style.css
.bottom-box {
background-color: #eee;
width: 500px;
margin: auto;
padding: 20px;
text-align: center;
position: relative;
top: -50px;
}position이 붕 뜬다는 건 알겠는데, 막상 적용하려니 쉽지 않다.
그래도 relative와 absolute의 관계는 이해했다.
기준점이 중요.
300x250
'LEARN > HTML | CSS' 카테고리의 다른 글
| [HTML] form input (1) | 2023.01.06 |
|---|---|
| [CSS] width & max-width & box-sizing (0) | 2023.01.05 |
| [CSS] 배경 넣기 & margin collapse (0) | 2023.01.03 |
| [CSS] selector 문법으로 css 코드 양 줄임 (0) | 2023.01.01 |
| [CSS] layout 레이아웃 2 - display : inline-block (0) | 2022.12.31 |
