11/10 40-4 [CSS] FLEX를 이용하여 인터넷 사이트처럼 배치하기
만들기 전 !!
flex : none => 아이템의 크기 고정 시 사용 (0 0 auto 와 같음)
flex: 1 => 아이템이 컨테이너를 채우도록 즉 컨테이너의 크기에따라 아이템들의 크기도 확장하거나 축소된다(1 1 0 와 같음)
flex-grow속성이 1이상이면 아이템의 크기에 상관없이 컨테이너를 주축방향으로 채우게 된다.
교차축방향으로 채울 때는 align-items:strerch(기본값) 아이템을 수평.수직으로 정중앙에 배치하려면
justify-content:center와 align-items:center를 준다.
받은 HTML문서
<div class="wrap">
<div class="header">
<div class="logo"><img src="../HTML5/Images/logo.jpg" alt="회사 로고 이미지"/></div>
<div class="topMenu">
<ul>
<li>HOME</li>
<li>로그인</li>
<li>회원가입</li>
<li>공지사항</li>
<li>Q&A</li>
<li>일반게시판</li>
</ul>
</div>
</div>
<div class="content">
<div class="aside">
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
<li>서브메뉴5</li>
<li>서브메뉴6</li>
<li>서브메뉴7</li>
<li>서브메뉴8</li>
<li>서브메뉴9</li>
<li>서브메뉴10</li>
</ul>
</div>
<div class="main">
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
</div>
</div>
<div class="footer">
<address>서울시 금천구 가산동 한국소프트웨어 인재개발원</address>
</div>
</div>
1. 전체적으로 적용
[모든 여백 없애기]
*{
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
[부모를 만들어 flex적용시키기] -- flex가 적용되는 범위는 부모의 바로 밑에 자식만 적용 된다 !! 기본기본
wrap 얘가 flexbox / container가 됨!
.wrap{
display: flex ;
flex-direction: column ;
flex: 1 ;
height: 100%; =>높이는 부모인 body에 다 맞추겠음
}
2. top 배치하기
.header{ => flex가 바로 자식만 적용되니 요거 안에서도 또 가로배치 하고 싶으면 얘도 flexbox / container 로 만들면 됨 !
display: flex ;
justify-content:space-between; =>양쪽에 붙고 가운데 빈공간!!
}
header .logo{ =>로고배치
flex: none ; =>아이템 크기 고정
width: 15%;
padding-top: 10px; =>패딩은 부모한테 입히기
}
.logo img{
width: 100%;
background-color: antiquewhite;
margin-left: 10px;
}
.header .topMenu{
display: flex ; =>수직으로 가운데 배치 하기위한 flex속성이용
align-items: center;
}
.header .topMenu ul{
display: flex ;
list-style: none;
}
.header .topMenu ul li{
padding: 0 5px;
border-right: 1px gray solid ;
}
.header .topMenu ul li:last-child{
border : none ;
margin-right: 20px ;
}
2.왼쪽 사이드 배치
.content{ => 얘도 flex를 위한 부모로 만들고
display: flex;
}
.aside{
flex: none ; => 크기 고정
width: 15%;
}
.aside ul{
margin: 10px 0 0 10px ; =>상 우 하 좌 순서
list-style: none;
}
.aside ul li{
margin-bottom: 5px;
}
3. 메인 배치
.main{
flex-grow: 1; => 나머지 빈 영역 모두 차지
padding: 10px 0 0 10px;
}
4바닥 배치
.footer{ => 역시 flex 입혀 부모로 만듦
display:flex ;
height: 60px;
justify-content: center;
align-items: center; => 정가운데로 배치
}
.footer address{
font-style: normal; ==> 기울어진거 다시 제대로 세우기
font-weight: bold;
}
쟌!!
