Ad Banner

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.15.에 작성된 글입니다.

---

VIEW

---

알게 된 것

​

만약 라인 그라데이션을 쓸거면 이 색이 이쁘니 참고 하자.

background: linear-gradient(90deg, #ff8806 0%, #fb07f3 100%);

Flex

가운데 정렬을 하고 싶다면 다음 코드를 이용해보자.

display: flex;
justify-content: center;
align-items: center;

다음 코드는 element들을 신축성있게 움직이게 해 준다.

(뒤의 숫자는 남은 여백을 각각을 어느 비율로 나누어 설정할 것인가.)

flex-grow: 1;

진짜 비율을 보이는 대로 나누고 싶다면 이 코드를 써라.

flex: 1;

 

Grid

비율대로 가르기

display: grid;
//grid-template-columns: 50% 50%;
grid-template-columns: 50fr 50fr; //fr:fraction(분수)

 

grid만들기

grid-gap: 1rem;
grid-template-columns: repeat(4, 1fr); // repeat(n분할, 간격)

 

모든 그리드를 content의 영향을 받지 않고 같은 크기로

grid-auto-rows: 500px; //또는
grid-auto-rows: minmax(500px, auto); //content가 영역을 튀어나가는 것을 막아줌

 

grid의 영역 차지 할 때는 이런식으로 작성

.item:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/3;
}