동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
먼저, html코드에서 <head>안에 아래의 메타태그를 삽입합니다. 이미 기존의 프로젝트에 반영이 되어 있는 경우에는 그대로 반영하면 됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
1. Flexible Layout
유연한 레이아웃을 위해 기존의 CSS에서 고정 픽셀로 되어 있는 부분을 살펴보고 필요한 곳에 % 또는 max-width로 수정해 줍니다.
#header .SocialBarContainer .SocialRow{max-width:1000px; margin:0 auto; }#header .logo{max-width:1000px;margin:15px auto;text-align:center;}.nav ul {
max-width:1000px;
margin:0 auto;
list-style-type: none;
}.main{
position:relative;
max-width:1000px;
margin:20px auto 0;
min-height:300px;
}.footer .f_menu p{
max-width:1000px;
margin:0 auto;
padding:5px 10px;
text-align:center;
font-size:0.8rem;
}.footer .copyright p{
max-width:1000px;
margin:0 auto;
padding:20px 10px;
text-align:center;
font-size:0.9rem;
}부메뉴 관련 CSS 수정
.main2{
position:relative;
max-width:1000px;
margin:0 auto 0;
min-height:300px;
border-right: 1px solid #dde4e9;
border-left: 1px solid #dde4e9;
}.subtitle{
max-width:1000px;
margin:0 auto;
}.subtitle img{max-width:1000px;}
.aside img{max-width:260px;} 등록된 댓글이 없습니다.