웹 사이트의 화면을 축소시키면 그 안의 요소들이 밀립니다.

Question

넓은 화면에서는 출력이 제대로 되는데 컴퓨터 화면 사이즈가 작아지거나 화면이 축소되면 위치가 맘대로 바뀌네요. box-sizing:border-box를 줬는데도 왜 이러는지 잘 모르겠습니다.

 

 

Answer 1

HTML 마크업 설계가 잘못되어 있습니다.

.eunbescan 요소에게  position 값을 absolute로 주었는데 이 요소를 강제하는 부모요소가 없는 상태이며 현 화면에서 강제로 높이를 맞추기 위해 .resume2 요소에게 padding-top을 주었네요.

요소끼리 연결이 안된 상태이고..

일단 차례대로 출력되도록 마크업을 다시 작성 하세요. 그리고 불필요하게 position 속성을 absolute로 설정하지 마세요.

다음 아래의 코드를 참고하시고 본인에게 맞게 수정해 보시길 바랍니다.

HTML

<div class="profile">
	<div class="profile-photo"><img src="http://soe1435.dothome.co.kr/images/scan.gif" /></div>
	<h1 class="profile-name">Han Eun Be</h1>
	<p>1996.10.25</p>
	<div class="profile-detail">
		<div class="profile-detail-left">
			<h3>CAREER</h3>
			<p></p>
			<h3>EXPEEIENCE</h3>
			<p></p>			
		</div>
		<div class="profile-detail-right">
			<h3>TEST/ACTIVITY</h3>
			<p></p>
			<h3>PROGRAM SKILLS</h3>
			<p></p>			
		</div>
	</div>
</div>

 

CSS

.profile {
	width: 600px;
	margin: 20px auto;
	text-align: center;
}
.profile-detail {
	overflow: hidden;
	text-align: left;
	border-top: 2px solid #CCC;
}
.profile-detail-left {
	float: left;
	width: 50%;
}
.profile-detail-right {
	overflow: hidden;
}

 

Comments

선생님 감사합니다.^^

틀린 부분 잘 이해됐어요~~