레이아웃이란 컨텐츠를 잘 정리정돈해서 구조화 시킬 때 사용하는 기능으로,
flex는 CSS에서 레이아웃을 잡을 때 사용한다.
<li>태그가 반드시 ul이나 ol 같은 부모태그가 필요하듯이
flex를 사용하기 위해서는 태그가 두 단계가 필요한데 바로 부모 역할을 하는 태그인 container와
자식 역할을 하는 태그인 item이다.
정렬하고자 하는 각각의 아이템들은 부모에 해당하는 container가 필요하다.
<body>
/* 자식과 부모가 있어야 한다. */
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>또한 컨테이너에게 부여하는 속성과 아이템들에게 부여하는 속성이 각각 존재한다.
레이아웃으로 flex를 사용하려면 출발점은 반드시 부모에게 display 값을 flex로 주는 것이다.
부모가 flex가 된 순간 자식들은 변하게 된다.
<style>
.container {
/* flex의 출발점 */
display: flex;
/* 태그들을 반대쪽으로 정렬 */
flex-direction: row-reverse;
/* 수직방향으로 정렬 */
flex-direction: column;
}
</style>display를 flex로 설정하면 flex의 기본값인 row에 따라 아이템들이 수평으로 정렬된다.
flex-direction을 column으로 설정하면 아이템들을 수직으로 정렬할 수 있다.
flex item의 속성
1. flex-basis
특정한 엘리먼트의 크기를 정하고 싶을 때 flex-basis 속성을 사용한다.
/* item의 두번째 등장하는 엘리먼트 선택자 */
.item:nth-child(2) {
flex-basis: 200px;
}
2. flex-grow
모든 요소들이 여백 없이 공평하게 화면을 꽉 채우게 만들고 싶을때 사용한다.
.item {
background-color: tomato;
color: white;
border: 1px solid white;
/* 0이 기본값 */
flex-grow: 1;
}
*기존화면: container의 배경색이 powderblue색상
위와 같이 변경된다.
두번째 엘리먼트가 더 많은 여백을 갖게 만들고 싶을 때는
두번째 엘리먼트 선택자에 flex-grow값을 추가로 준다.
.item:nth-child(2) {
flex-grow: 2;
}
3. flex-shrink
창의 화면이 줄어들 때, 아이템들의 크기도 그에 맞춰 줄어들게 되어있는데
flex-shrink 속성을 사용하면 아이템의 영역이 줄어드는 크기를 조절할 수 있다.
특정 엘리먼트의 flex-shrink 값을 0으로 줄면 화면이 줄어들어도 해당 엘리먼트의 크기는 줄어들지 않는다.
<style>
.item:nth-child(2) {
flex-basis: 500px;
flex-shrink: 0; /* 줄어들지 않는다 */
}
.item:nth-child(1) {
flex-basis: 300px;
flex-shrink: 2;
}
</style>- flex-shrink가 0인 경우 창이 줄어들어도 영역은 그대로 유지 된다.
- flex-shrink가 1인 경우 창이 줄어들면 영역은 1만큼 줄어들고, 2인 경우 영역은 1보다 더 빠른 속도로 줄어든다.
4. flex-wrap
기본값은 nowrap이다.
wrap을 하게 되면 컨테이너의 크기보다 아이템의 크기가 클 때 아이템은 줄바꿈을 하며 아래로 쌓인다.
flex 속성 태그가 정리되어 있는 유용한 사이트는 아래와 같다.
https://codepen.io/enxaneta/pen/adLPwv
holy grail layout
holy grail layout은 header, nav, main, aside, footer로 영역을 나누는 레이아웃 방법이다.
header에는 페이지의 제목이나 썸네일이,
nav에는 리스트가,
main에는 페이지의 메인 컨텐츠/글 들이,
asdie에는 페이지에서 덜 중요한 정보들 (ex.광고)가,
footer에는 주소와 관련된 정보들이 표현된다.
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<!-- nav, main, add -->
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
생활코딩은 일반인을 위한 코딩 수업입니다
</main>
<aside>
<!-- 페이지에서 덜 중요한 광고같은 것 -->
AD
</aside>
</section>
<footer>
<a href="#">홈페이지</a>
</footer>
</div>
</body>컨텐츠를 수평으로 나열하기 위해서 container의 display를 flex로 주면
flex-direction가 기본값인 row로 정렬된다 (수평으로 정렬된다)
- flex-direction가 column 일때 → 수직으로 보여준다
- flex-direction가 row 일때(기본값) → 수평으로 보여준다
flex-direction을 column으로 주고(수직)
각각의 태그에 border로 선을 그어서 영역을 구분해보면 다음과 같다.
<style>
.container {
display: flex;
flex-direction: column;
}
header {
border-bottom: 1px solid gray;
}
footer {
border-top: 1px solid gray;
}
.content {
display: flex;
}
.content nav {
border-right: 1px solid gray;
}
.content aside {
border-left: 1px solid gray;
}
</style>
section 태그에는 nav, main, aside 태그가 포함되어 있는데,
만약 화면이 움직일 때 nav와 aside의 크기는 고정시키고 main 컨텐츠의 크기만 움직이게 하고 싶을 때
nav와 aside 태그에 flex-basis로 크기를 정하고, flex-shrink 속성의 값을 0으로 설정하면
화면이 움직일때 nav, aside의 크기는 고정되며 main 컨텐츠만 크기가 변경되게 된다.
<style>
/* 화면의 움직임에 따라 main만 움직이게 하기 */
nav, aside {
flex-basis: 150px;
/* 화면이 줄어들어도 영역이 줄어들지 않음 */
flex-shrink: 0;
}
</style>
해당 게시글은 '생활코딩' 님의 CSS 수업 강의를 참고하였습니다.
출처 https://www.youtube.com/watch?v=8DJBCHro-3Q
'WEB' 카테고리의 다른 글
| WEB(5) : Java Script - 배열, 함수, 객체 (0) | 2021.12.21 |
|---|---|
| WEB(5) : Java Script - 조건문, 반복문 (0) | 2021.12.21 |
| WEB(4) : Java Script - event, querySelector() (0) | 2021.12.21 |
| WEB(3) : CSS (0) | 2021.12.19 |
| WEB(2) : 웹의 역사와 웹 서버(Web Server), 웹 호스팅(Web hosting) (0) | 2021.12.14 |
