생활
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>
(모바일로 보았을 때 페이지 사진)
(두 번째 사진) 기초 레이아웃
2개의 답변이 있어요!
적어주신 코드를, 개발중인 웹페이지를 익스플로러 혹은 다른 브라우저에서 개발자 모드를 사용하여 예외처리를 해보며 확인 하시는 방법이 자기 개발에 가장 도움이 됩니다.
또한 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 상의 ' ; '세미클론이 잘 들어가있는지도 한 번 살펴봐 주시구요.