클라우딩 어플리케이션 엔지니어링 TIL Day 5 (2)
# 유연한 상자 만들기 Flexbox
Flexbox : 유연함을 가진 일차원 레이아웃을 만들 수 있다
- 가로축 정렬 : justify-content
- 세로축 정렬 : align-items
- 유연성 조절 : flex-grow, flex-shrink
- 크기 조절 : flex-basis
- 축 바꾸기 : flex-direction
- 여백과 순서 : gap, order
.wrapper {
display: flex; /*내부 요소 가로로 나열*/
flex-direction: column; /* 축 지정 속성 - 기본 값은 가로*/
}
아래의 HTML 코드에 CSS를 적용해서 Flexbox 속성에 대해 알아보자
<div class="wrapper">
<div class="content">콘텐츠1</div>
<div class="content">콘텐츠2</div>
<div class="content">콘텐츠3</div>
</div>.wrapper {
display: flex; /*내부 요소 가로로 나열*/
flex-direction: row; /* 축 지정 속성 - 기본 값은 가로*/
justify-content: flex-start;
align-items: stretch; /* stretch 속성은 자식 요소의 길이도 늘림*/
background-color: #ddd;
width: 500px;
height: 500px;
}
.content {
background-color: blue;
}가로축 기준 justify-content 속성부터 살펴보자
- justify-content : flex-start (기본값) 적용, 왼쪽에 붙어서 위치한다
- justify-content : center 적용, 가운데에 위치한다
- justify-content : flex-end 적용, 오른쪽 기준 뒤쪽에 위치한다
- justify-content : space-between 적용, 첫번째와 마지막 콘텐츠는 가장 끝에 붙고 나머지 콘텐츠들은 간격이 동일하게 분배된다
- justify-content : space-around 적용, 콘텐츠랑 여백과 동일한 하나의 크기로 분배된다
- justify-content : space-evenly적용, 여백의 크기가 동일하게 분배된다
이번에는 세로축을 기준으로 하는 align-items 속성을 살펴보자
- align-items : stretch 적용, 가장 왼쪽부터 배치된다
- align-items : flex-start 적용, 위부터 배치된다
- align-items : flex-end 적용, 아래부터 배치된다
- align-items : center 적용, 가운데에 배치된다
- align-items : baseline 적용, 폰트 크기에 맞춰서 배치된다
# 자식요소가 가질 수 있는 요소
- flex-grow : 늘어나는 것을 허용해주는 속성, 0이 기본값(부정, 늘어날 수 없음), 1 (긍정, 늘어날 수 있음)
- flex-shrink : 줄어드는 것을 허용해주는 속성, 1 (줄어듬), 0 (줄어들지 못함)
- flex-basis : 자식의 너비/크기를 조절하는 속성, 기본값 auto
flex : grow shrink basis 순서로 한 줄에 작성 가능
- order : 시각적으로 콘텐츠의 순서를 변경해주는 속성, 마크업 순서가 변경되는 것은 X
- flex-wrap 속성을 사용하여 자식 요소들이 부모 요소 밖으로 나가게 되더라도 부모 요소 안으로 감싼다
# 바둑판 상자 만들기 Grid
grid : 수평선과 수직선을 가진 2차원 레이아웃을 만들 수 있다
- 바둑판 조절 : grid-template
- 반복하기 : repeat
- 셀 확장 : grid-row, grid-column
- 영역 지정하고 배치 : grid-template-areas, grid-area
- 여백과 순서 : gap, order
가장 최상단 부모 콘텐츠 css에 display : grid; 속성 추가해주기
<div class="wrapper">
<div class="content1">콘텐츠1</div>
<div class="content2">콘텐츠2</div>
<div class="content3">콘텐츠3</div>
<div class="content4">콘텐츠4</div>
<div class="content5">콘텐츠5</div>
<div class="content6">콘텐츠6</div>
<div class="content7">콘텐츠7</div>
<div class="content8">콘텐츠8</div>
<div class="content9">콘텐츠9</div>
</div>.wrapper {
display: grid;
}
grid-template-columns 속성을 사용하면 컬럼에 대한 개수를 지정할 수 있다
열의 개수도 마찬가지로 grid-template-rows 속성으로 지정해 줄 수 있다
.wrapper {
display: grid;
/* 100px 짜리 컬럼 3개 만들기 */
grid-template-columns: 100px 100px 100px;
/*100px 짜리 열 3개 만들기*/
grid-template-rows: 100px 100px 100px;
}만약 여러번 반복하고 싶으면 repeat(count, size) 의 형식으로 입력해주자
columns 와 rows 를 동시에 입력해주고 싶을 때는 grid-template : x축 / y축 의 형식으로 입력하자
grid-template: repeat(3, 100px) / repeat(4, 100px);
칸을 늘리고 싶을 때는 grid-column 또는 grid-row 속성을 사용해서 시작점 / 끝점 으로 지정해주면 원하는 칸이 늘어난다
/*시작점 / 끝점 으로 지정해주면 해당 칸이 늘어남*/
grid-column: 1 / 3;span 원하는칸의크기 로 입력해줘도 원하는 만큼 칸의 크기가 늘어난다
grid는 알아서 칸을 배열해준다
# grid를 언제 실무에서 사용할까?
전반적인 레이아웃을 잡을 때 사용한다!
grid-template-areas 로 각 행과 열을 지정해주고
자식 요소에 grid-area 속성으로 어느 부분인지를 지정해주면 편리하게 레이아웃을 잡을 수 있다
.wrapper {
display: grid;
grid-template-rows: repeat(3, 100px);
/*3행 3열의 배열로 원하는 위치를 지정*/
grid-template-areas:
"header slider slider"
"header content content"
"header footer banner";
gap: 16px;
}
/* 자식 요소들에 해당 부분이 어디인지 지정*/
.content1 {
grid-area: header;
}
.content2 {
grid-area: slider;
}
.content3 {
grid-area: content;
}
.content4 {
grid-area: banner;
}
.content5 {
grid-area: footer;
}
# CSS 주의사항
1. 대소문자에 주의하자!
2. 가능한 영어를 사용하자!
3. 계층 관계에 주의하자!
4. 클래스의 이름과 마크업 순서를 일치시키자!
# 새로 알게 된 점
grid가 너무 복잡하다고 생각해서 사용해보지 않았는데 이번 강의를 통해서 grid가 굉장히 편리하고 유용한 CSS라는 것을 알게 되었다
레이아웃을 잡을 때 grid를 활용해 보아야겠다
또 flexbox에 대해서 제대로 알지 못한채 사용해서 원하는 위치로 배치가 안 되고 했던 경우가 있는데 이번 강의를 통해서 확실하게 알게 되었다 복습을 통한 반복이 굉장히 중요할 것 같다!