flex, justify, align 기본 개념
flex : 정렬, 비율, 크기 등 섬세한 조정이 가능하다
display: flex;
- 부모에게 적용 시키면 자식에게 영향이 간다
- 줄바꿈은 절대 안되지만 방법은 있다
flex-wrap: wrap;→ flex의 줄바꿈 기능inline-block과 같이 자식들이 한 행에 여러 개 가능하다
align-item : 수직으로 정렬할때
stretch: 수직으로 정렬, 기본값, 세로로 쭉center: 중간 정렬flex-end, flex-start: 맨 아래, 맨 위에 정렬
justify-content : 수평으로 정렬할때
- 예시)
justify-content:space;: 여백을 준다
- space-between : 자식 사이에 여백을 주겠다
- space-around : 자식 하나하나에 둘러싸는 여백을 주겠다
- 위의 코드들의 값과 결과가 잘 정리된 코드펜이 있다
아래 링크로 가서 클릭하면서 값에 따른 변화를 보고 잘 이해하도록 하자
웹 레이아웃 만들기
- 헤더, 푸터, 사이드 메뉴, 광고 영역을 flex를 활용하여 만들어 보자
1. 각 영역 태그 만들기
html --!
<div class="container">
<header>
<h1>웹 그리드</h1>
</header>
<section class="content">
<nav>
<ul>
<li><a href="#">menu-1</a></li>
<li><a href="#">메뉴 아이템 2</a></li>
<li><a href="#">메뉴 아이템 3</a></li>
<li><a href="#">메뉴 아이템 4</a></li>
</ul>
</nav>
<main>
main contents
</main>
<aside>
advertise
</aside>
</section>
<footer>
<a href="#">footer</a>
</footer>
</div>
2. 각 영역 색 입히기
노멀라이즈 --!
body, ul, li, h1{
margin:0;
padding:0;
list-style:none;
}
a{
color:inherit;
text-decoration:none;
}
시작 --!
.container{
background-color: green;
min-height: 100vh; // 페이지 한 화면의 최소 높이를 지정한다
// 100vh는 한 화면을 다 쓰겠다는 의미, 10vh는 한 화면의 1/10를 쓰겠다는 것이다
}
.container> header{
background-color: red;
}
.container> footer{
background-color: indigo;
color : white;
}
.container>.content{
background-color : gold;
}
.container>.content>nav{
background-color:pink;
}
.container>.content>main{
background-color:darkcyan;
}
.container>.content> aside{
background-color:skyblue;
}
3. flex로 영역 잡기
navmainaside태그 범위를 조정하자
.container{
background-color: green;
min-height: 100vh;
}
.container> header{
background-color: red;
}
.container> footer{
background-color: indigo;
color : white;
}
.container>.content{
background-color : gold;
display:flex; // 세로로 변경
align-items:stretch;
height: 643px; // nav, main, aside 태그들의 부모에 화면 높이를 정해준다
}
.container>.content>nav{
background-color:pink;
}
.container>.content>main{
background-color:darkcyan;
flex-grow:1; // main이 남은 여백을 다 차지할 수 있게 main에만 비례를 준다
}
.container>.content> aside{
background-color:skyblue;
}
4. 화면이 줄어도 줄바꿈이 되지 못하게 하자
- 아래 이미지의 메뉴 아이템 부분
css nav 속성 부분 --!
.container>.content>nav{
background-color:pink;
flex-shrink:0; // 자동 축소를 막아준다 > 절대영역을 만들어 준다
}
5. 메뉴 아이템 영역 늘리기, footer 글자 가운데로 옮기기
width,text-align을 사용하지 않고flex만 사용하기
css nav 속성 부분 --!
.container>.content>nav{
background-color:pink;
flex-shrink:0;
flex-basis:120px; // flex-direction이 기본값인 row면 가로길이
coulmn이면 세로길이를 나타낸다
}
css footer 속성 부분 --!
.container> footer{
background-color: indigo;
color : white;
display:flex; // 코드 추가
justify-content:center; // 가로에서 중앙 정렬
}
flex를 사용하면서flex-grow와flex-shrink를 이해하기 너무 어려웠다- 조사 중 가장 좋았던 글을 남겨놓자
반응형 메뉴 테스트
- 위 기능들을 이용해 간단한 반응형 메뉴를 만들어보자
1. 메뉴 아이템 만들기
<ul class="flex">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>2. 1차 메뉴 커스텀
body, ul, li{
margin:0;
padding:0;
list-style:none;
}
a{
color : inherit;
text-decoration: none;
}
.flex{
background-color: skyblue;
display: flex; // 메뉴 가로 정렬
justify-content: flex-end; // 오른쪽으로 보내기
}
.flex>li{
text-align:center;
}
.flex > li > a{
padding: 10px;
display:block;
color : white;
}
.flex > li:hover >a{
background-color:deepskyblue;
}
3. 웹 사이즈가 줄때 메뉴 위치 변화주기
flex만 사용하여 진행
css 코드 추가 --!
@media (max-width:800px){ //최대 가로 길이가 300px 일때
.flex{
justify-content: space-around; // 균일하게 나열한다
}
}
@media (max-width:300px){ //최대 가로 길이가 300px 일때
.flex{
flex-direction:column; // 세로로 나열한다
}
}
여기서
@media는 하나의 media 화면을 커스텀하기 위한 조건문이라 생각하면된다
- 입력방식 :
@media( 조건문 ){ css 커스텀 }- 아래 링크가 미디어 쿼리에 대해 잘 설명해준다
Today Comment :
flexalignjustify... 값이 많은 만큼 해당 영역에 맞는 값을 찾는 것도 어려웠다
display:flex;는 꼭 부모에 사용하자, 잘못 넣었다가 레이아웃이 무너지는걸 보고 다른 코드를 만지다가 시간만 보냈다...값을 다 외우기보다는 위 코드펜 사이트는 자주 보고 활용하면 자주 쓰이는 것은 자연스러워질것이라 생각한다
박상은