2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2023년 7월 4일 14:55 #89515
이마린참가자1. 게시판 메뉴는 어디에 있는지요? 옛날 게시판에 남겼던 글 알람을 찾아 들어왔는데, 사이트 어디에도 게시판 메뉴가 보이지 않습니다.. ㅠㅠ 2. form 태그 숙제중에 질문이 생겼습니다. 하기와 같이 작성하였는데, 가운데 how we upgrade our coding이란 회색박스 (class명:main-box) 밑으로 form-background form-white가 숨어버립니다. 무엇이 문제일까요.. ㅠㅠ
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/main.css"> </head> <body style="margin:0px"> <div class="main-background"> <h4 class="main-title">Do it yourself</h4> <p class="main-content">this is practice for my coding skill uprade. so it makes me up up up skilller.</p> <button class="main-button">Click Here</button> <div class="main-box"> <h5 box-title style="font-size:20px; margin:0px;">How we upgrade our coding</h5> <p box-content style="font-size:18px;">The way is to practice again and again. it means 'reapeatedily'.<br> If you don't upgrade, you do it 100times.</p> <button class="box-button">UPGARDE</button> </div> </div> <form class="forming"> <input type="text" placeholder="잘 작성해보시오"> <input type="password"> <input type="email"> </form>
<div class="form-background"> <div class="form-white"> <form action="">
</form> </div> </div>
</body> </html>
/* layout2 */ .main-background{ width: 100%; height: 500px; background-image: url(../img/shoes.jpg); background-size:cover; background-repeat: no-repeat; filter: brightness(100%); padding: 1px; text-align: center; position: relative;} .main-title{ color: #fff; font-size: 50px; margin-top: 100px; } .main-content{ color: #fff; font-size: 18px; }.main-button{ width:200px; height:60px; padding: 15px; font-size: 20px; background-color: white; border: 2px black solid; border-radius: 5px; position: absolute; left:0; right:0; margin:auto; bottom: 120px; }.main-box{ width: 80%; max-width: 1000px; height: 250px; background-color: #eee; position: absolute; color: #191919; left: 0; right: 0; margin: auto; bottom:-200px; padding: 40px; box-sizing: border-box; clear: both; }.box-button{ width:160px; height: 40px; padding:10px; margin: 10px; }.forming{ position: relative; top: 250px; width: 100%; margin: 0 auto; text-align: center; }.form-background{ background-color: #191919; padding: 30px; } .form-white{ background-color: white; padding: 30px; width: 80%; max-width: 600px; margin: auto; }2023년 7월 4일 23:34 #89628
codingapple키 마스터https://codingapple.com/forums/ 전체 게시판입니다 position absolute 주면 공중에 떠서 밑에 있는 박스에 위쪽 마진을 더 주거나 해야합니다
-
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.