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>
(모바일로 보았을 때 페이지 사진)
(두 번째 사진) 기초 레이아웃
적어주신 코드를, 개발중인 웹페이지를 익스플로러 혹은 다른 브라우저에서 개발자 모드를 사용하여 예외처리를 해보며 확인 하시는 방법이 자기 개발에 가장 도움이 됩니다.
또한 CSS 를 적용하고자 할 경우 코드 중간 중간에 삽입하시는것보다는
하나의 스타일시트 파일을 생성하여 정리를 해두시는게 수정 및 보완하는데에 용이합니다.
문의하신 사항의 경우는 반응형 웹사이트 인지 / 아닌지에 따라서 방법이 다를 수 있으며,
일반적으로는 wrap의 가로 사이즈를 명시하여 content와 banner의 최소 거리를 지정 해 주거나,
PC / 모바일의 해상도에 따라 각각의 wrap 및 content 및 banner의 사이즈를 지정해 주는 방식으로 많이 사용합니다.
HTML 마크업의 유효성 문제도 많아 보입니다만, 다 떠나서 문의하신 부분만 말씀드리자면
CSS의 일부분만 수정해주시면 원하시는 화면을 만들 수 있습니다.
먼저 content 부분은
#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; padding: 10px; }그리고 banner 부분은
#wrap #banner { width: 30%; height: 400px; border: 1px solid gray; padding: 10px; float: right; box-sizing: border-box; }위와 같이 작성해주시면 됩니다.
참고로 box-sizing : border-box 는 박스의 border와 padding만 박스의 너비에 포함하여 계산합니다.
margin은 해당하지 않기에 margin : 10px을 padding으로 바꿔주었습니다.
그리고 css 상의 ' ; '세미클론이 잘 들어가있는지도 한 번 살펴봐 주시구요.
