3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .main-background{ width:100%; height:500px; background-image: url(../html:css/shoes.jpeg) , url();/*겹치기*/ background-size: cover;/* background 조정하기, default 반복됨* cover잘려도 알아서 채워라 contain 배경아 잘리지 마라*/ background-repeat: no-repeat; background-position: center; /*배경위치 조정*/ /* filter:brightness(80%); */ /* 이게 있으면 margin collapse 해제 */ padding:1px; } .main-title{ color:white; font-size: 40px; margin-top: 100px; text-align: center; } .main-background>p{ font-size: 40px; text-align: center; color: aliceblue; } .main-button{ padding:15px; font-size:20px; background-color: white; border:none; border-radius: 5px; position: static; /* static:좌표이동x, fixed 화면고정 현재화면을 기준으로 고정되는 요소가 필요할때 사용. absolute position:relative 가진 부모가 기준 */ } .explain-box{ width:80%; /* content 영역 */ max-width: 800px; /* min-width: */ height:300px; background-color: #eee; text-align: center; padding:20px; margin: 0 auto; position:relative; margin-top:-100px; box-sizing: border-box; /* padding, border 포함 */ }</style> </head> <body style="margin:0px"> <div class="main-background"> <h4 class="main-title">Buy Our Excellent Shoes!</h4> <p class="main-content">우아아 우아앙 우아앙 우아앙 우아앙 우아앙</p> <button class ="main-button">구매하기</button> </div> <div class="explain-box"> <p> asdfasdfasdfasdfsdfasdfasdfasdfasdf sdfasdfasdfasdfasdfsdfasdfasdfasdfasdfsdf asdfasdfasdfasdfsdfasdfasdfasdfasdfsdfasdf asdfasdfasdfsdfasdfasdfasdfasdfsdf </p> </div> <br> <div class="explain-box" style="padding:50px"> <p> asdfasdfasdfasdfsdfasdfasdfasdfasdf sdfasdfasdfasdfasdfsdfasdfasdfasdfasdfsdf asdfasdfasdfasdfsdfasdfasdfasdfasdfsdfasdf asdfasdfasdfsdfasdfasdfasdfasdfsdf </p> </div> </body> </html>
스타일 시트하고 같이 올립니다. 1. 왜 br태그를 넣어도 회색 칸이 서로 벌어지지 않을까요? 2.버튼의 경우도 (강의명:position과 좌표레이아웃)부분에서 강의에선 button class를 넣으시자 마자 바로 가운데 정렬됐지만 저는 왼쪽 구석에 박혀 있었습니다. 혹시 제가 빼먹은 부분이 있을까요?
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.