생활
html 레이아웃을 한 프레임에 맞추려면 어떻게 고쳐야 하나요ㅠㅜ!?
첨부한 사진에 나와있는 것처럼 제가 오렌지 색으로 내용을 모자이크 처리한 하나의 웹 페이지를 html로 제작했는데요. 제가 퍼센트로 content와 banner(회원정보 및 아래 또다른 내용이 들어있는 박스)로 html의 레이아웃을 작성했습니다. 그런데 이게 모바일로 볼 때 혹은 노트북으로 볼 때 분면 70%, 27.9%로 width를 나누었는데 content와 banner 사이에 아래 첨부한 사진(모바일로 확인한 웹페이지)을 보았을 때 banner 박스가 content 박스 밑에 있게 됩니다. 이를 똑같은 수평에 맞추어 왼쪽 70%는 content 박스, 그리고 오른쪽 27.8%에는 banner 박스로 아래 첨부한 사진(두 번째 사진)과 같이 레이아웃을 구성하기 위해서는 저의 html 코드 중 어느 부분을 수정해야 할까요?! 도와주세요ㅠㅠ
[html 코드]
#con{ / 전체를 중앙 정렬하기 때문에 전제 화면을 감싸주어야 한다. /
margin: 0 auto;
width: 100%;
border: 1px solid red;
}
#wrap{
margin: 10px;
border: 1px solid blue;
overflow: hidden;
}
#wrap #content {
background-image: url('https://i.pinimg.com/564x/7f/fb/a7/7ffba7e98a1af58686f471120f6800ca.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 70% height: 400px;
border: 1px solid rgb(207, 76, 207);
float: left;
box-sizing: border-box;
margin: 10px;
}
#wrap #content h3 {
font-family: 'GmarketSansBold';
color: white;
font-size: 2.0em;
text-align: center;
line-height: 20px;
}
#wrap #content #part1 {
width: 70% height: 50px;
border: 1px solid pink;
margin: 10px;
}
#wrap #banner { / wrap이 감싸고 있는 <div> 태그이기 때문에 wrap 안에 있는 태그라는 것을 알 수 있게 #wrap #content로 작성한다. /
width: 27.9% height: 400px;
border: 1px solid gray;
margin: 10px;
float: right;
box-sizing: border-box;
}
#wrap #banner h3 {
font-size: 2.0em;
text-align: center;
line-height: 100px;
}
#wrap #banner #part2 {
width: 70% height: 50px;
border: 1px solid purple;
margin: 10px;
}
<body>
<div id="con">
<div id="wrap">
<div id="content">
<h3>CONTENT</h3>
<div id="part1">
<ul style="list-style-type: disc; color: white;">
<li><h2 style=color:white;>선택 </h2></li>
<span>
<h4>선택</h4>
<select name="Exhibition" size="1">
<optgroup label="제목">
<option value="특별전">특별전</option>
</optgroup>
</select>
</span>
</ul>
</div>
<div id="part1">
<div class="class1">
<p style="text-align:center; color:black;">선택하시오.</p>
<p style="text-align:center; color:black;">
<select name="people" size="5">
<optgroup label="인원수 체크">
<option value="1">1명</option>
<option value="2">2명</option>
<option value="3" selected>3명</option>
<option value="4">4명</option>
<option value="5">5명</option>
<option value="6-">6명</option>
<p></p>
<input type="submit" value="제출">
<input type="reset" value="초기화">
</optgroup>
</select>
</p>
</div>
</div>
<div id="part1">
<fieldset>
<legend align="left"><p style=color:white;><a name="gallery">서울</a></p></legend>
<a href="https://www.mmca.go.kr/main.do" target="_blank"><p style=color:white;>3)(우 03062)</p></a>
</fieldset>
</div> <!-- <div id="part1"> 종료 -->
</div> <!-- <div id="content"> 종료 -->
<div id="banner">
<fieldset>
<legend align="right"><p style=color:red;>회원정보를 입력하세요.</p></legend>
<form action="page.jsp" method="POST"> <!-- method는 제출방식으로 그 중 POST 방식은 제출된 데이터가 url 상에서는 보이지 않기 때문에 GET 방식과 비교하여 보안성 우위에 있다. -->
<p style="text-align: right; color: black;">회원 아이디(이메일) : <input type="email" name="id" required></p>
<!-- required는 입력폼에 반드시 데이터를 입력하도록 요구하는 속성이다. -->
<p style="text-align: right; color: black;">회원 비밀번호 : <input type="text" name="password" required></p>
<p></p>
<p style="text-align: right; color: black;"><input type="submit" value="전송">
<input type="reset" value="초기화"></p>
</form>
</fieldset>
<fieldset>
<legend align="left"><p style=color:orange;><a name="ticket">사이트</a></p></legend>
<a href="http://ticket.interpark.com/TPGoodsList.asp?Ca=Eve&SubCa=Eve_O&tid4=Eve_O" target="_blank"> 1) 티켓</a><br>
<br>
<a href="http://www.tmom.co.kr/deallist/18170000" target="_blank"> 2) 예매</a><br>
<br>
<a href="https://booking.naver.com/" target="_blank"> 3) 예약</a>
</fieldset>
<h3><a name="ranking">#랭킹</a></h3>
<style>
table, th, td {
border: 1px solid black;
border-collapse: separate;
}
</style>
<table>
<thead>
<tr>
<th>순위</th>
<th>제목</th>
<th>장소</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">참고 사이트
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>특별전</td>
<td>서울</td>
</tr>
</tbody>
</table>
</div>
</div>
(모바일로 보았을 때 페이지 사진)
(두 번째 사진) 기초 레이아웃