html & css 레이아웃 질문드려요
-
게시물 수정 , 삭제는 로그인 필요
안녕하세요 현재 레이아웃 잡는 공부를 하고있습니다 ..
질문드릴게요 질문할게 많습니다 ㅠㅠ
저혼자 풀어보려니 수정을해봐도 이해가안가는부분이 있어서 질문드립니다.
해상도 1920 * 1080 상태에서 만들었습니다.
스샷
첫번째 - 하단에 스크롤이 생겨서 오른쪽에 여백이 생기는데요
옆에 여백이안생기고 모바일이나 데스크톱에서도 화면이 딱맞아 떨어지게 하는 법좀 가르쳐주세요..
두번째 - 양쪽 사이드 이미지 배경 들어간부분에서 화면크기를 줄였다 늘렸다를 할때입니다.
화면크기가 점점줄어들때 왼쪽 사이드(빨강 박스) 만큼의 크기까지 같이줄어들다가 중간박스 (배너부분 파랑박스) 에서 부터는 그냥 고정하여 안줄어들도록 할수있는 방법좀 부탁드립니다
이게 저위의 이미지 html & css 소스 입니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>연습</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
}
#topmenu {
display: block;
background-color: #0e1f2c;
width: 1920px;
overflow: hidden;
}
#topmenu h2 {
color: #fff;
float: left;
font-size: 15px;
margin: 10px auto 15px 450px;
}
#topmenu h2 a {
text-decoration: none;
color: #fff;
}
#topmenu ul li{
list-style: none;
color: #fff;
float: left;
line-height: 70px;
vertical-align: middle;
text-align: center;
}
#topmenu ul li a {
text-decoration: none;
color: #fff;
display: block;
width: 140px;
font-size: 15px;
font-weight: bold;
}
#topmenu ul li a:hover {
color: #d17303;
}
#topmenu h1 {
font-size: 17px;
color: #fff;
float: left;
padding-top: 23px;
margin: 0px 25px 0 20px;
}
#topmenu h1 a {
text-decoration: none;
color: red;
font-weight: bold;
}
#topmenu h1 a:hover {
color: #b6261b;
}
.toptext {
display: block;
overflow: hidden;
width: 1920px;
background-color: #282828;
float: left;
}
.toptext p {
text-align: center;
font-size: 12px;
padding: 7px;
font-weight: bold;
color: #fff;
}
.topb {
display: block;
overflow: hidden;
width: 1920px;
background-color: #0a5578;
float: left;
}
.topb p {
text-align: center;
font-size: 12px;
padding: 7px;
font-weight: bold;
color: #fff;
}
#contant {
display: block;
width: 1920px;
height: 1080px;
border-bottom: 1px solid black;
overflow: hidden;
margin-top: 120px;
}
#contant .lside {
display: block;
width: 400px;
height: 1080px;
float: left;
border: 1px solid black;
}
.lside img {
width: 400px;
height: 100%;
}
#contant .center {
display: block;
width: 1066px;
height: 1080px;
float: left;
margin: 0;
padding: 20px;
}
#contant .rside {
display: block;
width: 400px;
height: 1080px;
float: left;
border: 1px solid black;
}
.rside img {
width: 400px;
height: 100%;
}
#footer {
display: block;
height: 300px;
width: 1920px;
margin: 0 auto;
padding: 5px;
float: left;
}
#footer .footertop {
display: block;
float: left;
width: 1920px;
padding: 10px;
margin-left: 450px;
}
#footer .footertop span {
font-size: 12px;
font-weight: bold;
}
#footer .footerimg {
display: block;
width: 1920px;
margin: 0 auto;
padding: 5px;
float:left;
}
#footer .footerimg img {
margin-left: 440px;
margin-top: 10px;
}
#footer .foot {
display: block;
width: 1920px;
padding: 10px;
margin: 0;
float: left;
}
.foot p {
text-align: center;
font-size: 12px;
margin-left: 800px;
}
</style>
</head>
<body>
<header>
<div class="toptext">
<p>
<img src="soundimg.png" alt="soundimg" />
<span> ★☆ ☆★ </span>
</p>
</div>
<div id="topmenu">
<nav>
<h2><a href="home.html" target="self"><img src="headerlogo.jpg" alt="logo" width="90px;" /></a></h2>
<h1><a href="home.html" target="self">hellow world</a></h1>
<ul>
<li><a href="#" target="_self">menu1</a></li>
<li><a href="#" target="_self">menu2</a></li>
<li><a href="#" target="_self">menu3</a></li>
<li><a href="#" target="_self">menu4</a></li>
<li><a href="#" target="_self">menu5</a></li>
</ul>
</nav>
</div>
<div class="topb">
<p> <img src="soundimgb.png" alt="공지사항" />
<span> ★☆ ☆★ </span>
</p>
</div>
</header>
<aside>
<div id="contant">
<div class="lside">
<img src="lside.png" alt="lside" />
</div>
<div class="center">
menu4
</div>
<div class="rside">
<img src="rside.png" alt="rside" />
</div>
</div>
</aside>
<footer>
<div id="footer">
<div class="footertop">
<span> 하단 </span>
</div>
<div class="footerimg">
<img src="#" alt="img" />
</div>
<div class="foot">
<p> Copyright® </p>
</div>
</div>
</footer>
</body>
</html>
몇시간동안 혼자서 머리쥐어짜며 옆에 사이드와 줄어들때 를 수정해보았지만 도저희 독학으로는 한계가있네요 ㅠㅠ 부탁드립니다.
질문드릴게요 질문할게 많습니다 ㅠㅠ
저혼자 풀어보려니 수정을해봐도 이해가안가는부분이 있어서 질문드립니다.
해상도 1920 * 1080 상태에서 만들었습니다.
스샷
첫번째 - 하단에 스크롤이 생겨서 오른쪽에 여백이 생기는데요
옆에 여백이안생기고 모바일이나 데스크톱에서도 화면이 딱맞아 떨어지게 하는 법좀 가르쳐주세요..
두번째 - 양쪽 사이드 이미지 배경 들어간부분에서 화면크기를 줄였다 늘렸다를 할때입니다.
화면크기가 점점줄어들때 왼쪽 사이드(빨강 박스) 만큼의 크기까지 같이줄어들다가 중간박스 (배너부분 파랑박스) 에서 부터는 그냥 고정하여 안줄어들도록 할수있는 방법좀 부탁드립니다
이게 저위의 이미지 html & css 소스 입니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>연습</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
}
#topmenu {
display: block;
background-color: #0e1f2c;
width: 1920px;
overflow: hidden;
}
#topmenu h2 {
color: #fff;
float: left;
font-size: 15px;
margin: 10px auto 15px 450px;
}
#topmenu h2 a {
text-decoration: none;
color: #fff;
}
#topmenu ul li{
list-style: none;
color: #fff;
float: left;
line-height: 70px;
vertical-align: middle;
text-align: center;
}
#topmenu ul li a {
text-decoration: none;
color: #fff;
display: block;
width: 140px;
font-size: 15px;
font-weight: bold;
}
#topmenu ul li a:hover {
color: #d17303;
}
#topmenu h1 {
font-size: 17px;
color: #fff;
float: left;
padding-top: 23px;
margin: 0px 25px 0 20px;
}
#topmenu h1 a {
text-decoration: none;
color: red;
font-weight: bold;
}
#topmenu h1 a:hover {
color: #b6261b;
}
.toptext {
display: block;
overflow: hidden;
width: 1920px;
background-color: #282828;
float: left;
}
.toptext p {
text-align: center;
font-size: 12px;
padding: 7px;
font-weight: bold;
color: #fff;
}
.topb {
display: block;
overflow: hidden;
width: 1920px;
background-color: #0a5578;
float: left;
}
.topb p {
text-align: center;
font-size: 12px;
padding: 7px;
font-weight: bold;
color: #fff;
}
#contant {
display: block;
width: 1920px;
height: 1080px;
border-bottom: 1px solid black;
overflow: hidden;
margin-top: 120px;
}
#contant .lside {
display: block;
width: 400px;
height: 1080px;
float: left;
border: 1px solid black;
}
.lside img {
width: 400px;
height: 100%;
}
#contant .center {
display: block;
width: 1066px;
height: 1080px;
float: left;
margin: 0;
padding: 20px;
}
#contant .rside {
display: block;
width: 400px;
height: 1080px;
float: left;
border: 1px solid black;
}
.rside img {
width: 400px;
height: 100%;
}
#footer {
display: block;
height: 300px;
width: 1920px;
margin: 0 auto;
padding: 5px;
float: left;
}
#footer .footertop {
display: block;
float: left;
width: 1920px;
padding: 10px;
margin-left: 450px;
}
#footer .footertop span {
font-size: 12px;
font-weight: bold;
}
#footer .footerimg {
display: block;
width: 1920px;
margin: 0 auto;
padding: 5px;
float:left;
}
#footer .footerimg img {
margin-left: 440px;
margin-top: 10px;
}
#footer .foot {
display: block;
width: 1920px;
padding: 10px;
margin: 0;
float: left;
}
.foot p {
text-align: center;
font-size: 12px;
margin-left: 800px;
}
</style>
</head>
<body>
<header>
<div class="toptext">
<p>
<img src="soundimg.png" alt="soundimg" />
<span> ★☆ ☆★ </span>
</p>
</div>
<div id="topmenu">
<nav>
<h2><a href="home.html" target="self"><img src="headerlogo.jpg" alt="logo" width="90px;" /></a></h2>
<h1><a href="home.html" target="self">hellow world</a></h1>
<ul>
<li><a href="#" target="_self">menu1</a></li>
<li><a href="#" target="_self">menu2</a></li>
<li><a href="#" target="_self">menu3</a></li>
<li><a href="#" target="_self">menu4</a></li>
<li><a href="#" target="_self">menu5</a></li>
</ul>
</nav>
</div>
<div class="topb">
<p> <img src="soundimgb.png" alt="공지사항" />
<span> ★☆ ☆★ </span>
</p>
</div>
</header>
<aside>
<div id="contant">
<div class="lside">
<img src="lside.png" alt="lside" />
</div>
<div class="center">
menu4
</div>
<div class="rside">
<img src="rside.png" alt="rside" />
</div>
</div>
</aside>
<footer>
<div id="footer">
<div class="footertop">
<span> 하단 </span>
</div>
<div class="footerimg">
<img src="#" alt="img" />
</div>
<div class="foot">
<p> Copyright® </p>
</div>
</div>
</footer>
</body>
</html>
몇시간동안 혼자서 머리쥐어짜며 옆에 사이드와 줄어들때 를 수정해보았지만 도저희 독학으로는 한계가있네요 ㅠㅠ 부탁드립니다.
#html & meaning #html & codes #html & #html amp template #html & #39 #html amp escape #html & quot #html amp encoding #html amp tag #html amp-img
