Day 7
flex, grid 레이아웃 개념과 적용 방법 구글링해보기
1. flex
: 요소들을 자유자제로 뮈치 시키는 속성
: flexbox는 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 css3에 추가된 레이아웃 방식이다.
: flex-grow, flex-shrink, flex-basis의 축약속성
0) flexbox
- 구성
flexbox는 자식 요소인 flex item과 상위 부모 요소인 flex container로 구성된다.
- 기본 사용 세팅
flexbox를 만들기 위해서는 부모 요소에 display: flex 속성을 선언하면 된다.
.flex_container {
display: flex;
}
1) 부모 속성 (container)
flex-direction : flexible item이 flex 컨테이너 안에 위치되는 방법 지정
[속성값 : row, row-reverse, column, column-reverse, initial, inherit]
flex-wrap : 플렉스 박스 아이템을 배치하는 방법 지정/ 즉, item을 wrap 할 것인지 아닌지를 결정
( wrap : 아이템 가로로 배치, 아이템이 다 차면 다음 행으로 아이템 이동)
[속성값 : nowrap, wrap, wrap-reverse, initial, inherit]
gap : flexbox item 사이의 여백을 지정
[속성값 : row, column, initial, inherit]
2) 자식 속성 (item)
flex-grow : flexible item들이 차지할 너비들에 대한 증가형 숫자 지정 (기본값 0)
[속성값 : number, initial, inherit]
flex-shrink : flexible item들이 차지할 너비들에 대한 감소형 숫자 지정 (기본값 1)
[속성값 : number, initial, inherit]
flex-basis : item의 길이 지정 (기본값 auto)
[속성값 : number, auto, initial, inherit]
auto : 1 1 auto와 같다.
initial : 0 1 auto와 같다.
none : 0 0 auto와 같다.
inherit : 부모 요소로부터 값을 상속 받는다.
실제 사용 예제는 따로 아래 포스팅에 적어두었다.
https://sodock00.tistory.com/29
2. grid
: flex와의 차이점?
: flex는 한 방향 레이아웃 시스템이고 (1차원) gird는 두 방향 레이아웃 시스템 (2차원)이다.
0) grid
- 구성
자식 요소인 gird item과 상위 부모 요소인 gird container로 구성된다.
- 기본 사용 세팅
gird를 만들기 위해서는 부모 요소에 display: gird 속성을 선언하면 된다.
.container {
display: grid;
}
속성
https://yamoo9.gitbook.io/css-grid/css-grid-guide/css-grid-properties-summary
결과화면
간단한 실습 예제
실습을 하는데, grid가 자꾸 적용이 안되는 오류가 발생했다...
원인을 몰라서 좀 헤맸는데 css 이름 부분에서 오류가 있었다.
grid_container, grid_item으로 이름을 지정해서 했는데 왜인지 이 때문에 오류가 생겼다.
이름 설정하는 규칙에 대해서도 찾아봐야겠다
<!DOCTYPE html>
<html lang="en">
<head>
<title>나의 웹사이트</title>
<style>
.flex_container {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* 한줄에 가득차면 다음 줄로 바꿔줌 */
justify-content: space-between;
align-items: baseline;
align-content: center;
height: 10vh;
background-color: beige;
}
.flex_item {
width: 40px;
height: 100px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
/* 위의 세 줄 == flex: 1 1 0 */
}
.container{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 1em;
grid-column-gap: 10px;
}
.flex_item1{
background-color: #ef9a9a;
}
.flex_item2{
background-color: #ce93d8;
}
.flex_item3{
background-color: #90caf9;
}
.item1{
background-color: #ef9a9a;
grid-area: 1 / 1 / 2 / 3;
}
.item2{
background-color: #ce93d8;
grid-area: 1 / 2 / 2 / 4;
}
.item3{
background-color: #90caf9;
grid-area: 1 / 4 / 2 / 5;
}
.item4{
background-color: lightgray;
grid-area: 2 / 2 / 3 / 5;
}
.item5{
background-color: lightyellow;
grid-area: 3 / 1 / 4 / 5;
}
</style>
</head>
<body>
<h1>오늘 배운 내용</h1>
<div>
<h2>1. flex</h2>
<p >요소들을 자유자제로 위치 시키는 속성(한 방향 레이아웃 시스템</p>
<div class="flex_container">
<div class="flex_item flex_item1">1</div>
<div class="flex_item flex_item2">2</div>
<div class="flex_item flex_item3">3</div>
</div>
</div>
<div>
<h2>2. grid</h2>
<p >요소들을 자유자제로 위치 시키는 속성(두 방향 레이아웃 시스템)</p>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
</div>
</body>
</html>
도움되는 사이트
참고한 블로그 및 사이트
flex
https://d2.naver.com/helloworld/8540176
https://blogpack.tistory.com/862
https://webdir.tistory.com/349
https://velog.io/@blackb0x/FLEX-Layout
grid
https://studiomeal.com/archives/533
'WEB' 카테고리의 다른 글
[WEB] html/css 레이아웃 (0) | 2022.02.28 |
---|---|
[WEB/CSS] flexbox (0) | 2022.02.27 |
[WEB] CSS 기본실습(2) (0) | 2022.02.26 |
[WEB] CSS 기본실습 (0) | 2022.02.25 |
[WEB] HTML 기본실습(3) (0) | 2022.02.24 |