css - flex / grid (grid-area, n줄 말줄임, 말줄임 2줄, 말줄임 2줄 이상)

말줄임 코드를 짤 때, 레이아웃이 급변하며 깨지는 경우가 종종 발생한다.

이는 상위요소 중, 어딘가가 width 값이 없기 때문에 발생하는 현상이다.

 

그럴 땐, min-width: 0; 이라는 형식상의 width 값만을 부여해 width 를 있다고는 선언할 수 있다.

 

display: grid;

grid 또한 flex와 같이, 특정한 상황에선 flex 보다 더 효율적으로 요소를 분배시킬 수 있다.

grid를 10칸으로 나눈다는 가정 하에, grid는 컬럼을 지정하는 선을 나타내기에 요소에게 지정을 할 땐,
10이 아닌 11 (grid 줄의 갯수)를 지정한다.

 

grid-template-column / gtc

display: grid; 인 자식 요소들의 컬럼을 지정하는 속성.

.parents{
    display: grid;
    gap: 10px;
    grid-template-column: repeat(10, 1fr);
}

 

repeat(10, 1fr); 속성은 부모의 여백을 10칸으로 나누겠다는 뜻이다.

 

grid-template-rows / gtr

display: grid; 인 자식 요소들의 로우를 지정하는 속성

.parents{
    display: grid;
    gap: 10px;
    grid-template-rows: repeat(2, 100px);
}

 

자식이 차지할 부모요소의 공간을 2줄로 나누고 높이를 100px로 가지겠다는 의미이다.

 

grid 응용

.child{
    grid-column: 1/8;
}

 

그리드 선의 시작은 첫 요소의 전부터 선이 그어져 있기에 70%의 크기를 차지하려면 1/7이 아닌 1/8을 지정해야 한다.

.child1{
    grid-column: 1/8;
}
.child2{
    grid-column: 8/11;
}

 

위와 같은 코드로 부모요소 아래 자식들의 비율을 70%, 30% 로 지정할 수 있다.

 

아래 코드는 분수로 비율을 지정하는 것보다 간단하게 사용할 수 있는 방법이다.

child1{
    grid-column: span 7;
}

 

속성에 span을 쓰게 되면 덩어리라고 인식하게 되어 총 7개의 덩어리를 차지하게 된다.

span을 써서 조금 더 편하게 비율을 지정할 수 있다.

 

grid-area / ga

grid-area 속성으로 자식 요소에 이름을 부여해 비율을 지정할 수도 있다.

.parents{
  grid-template-area:
  "a1 a1 a1 a1 a2 a2"
  "b1 b1 b1 b2 b2 b2"
  ;
}

.child1{
    grid-area: a1;
}
.child2{
    grid-area: a2;
}
.child3{
    grid-area: b1;
}
.child4{
    grid-area: b2
}

 

자식에게 이름을 부여해 비율을 지정할 수 있고, row가 2줄 이상이라면 쿼테이션을 사용해 줄을 나눌 수 있다.

요소에 반응형을 추가할 때 유용하게 쓸 수있다. (애플 사이트 참고)

 

 

번외) margin: 0 auto / m0-a

우리가 요소를 가운데로 정렬시킬 때 가장 만만하게 쓰는 코드가 margin: 0 auto; 이다.

이를 조금 더 자세하게 파보면, 결국 가운데는 x축으로 조정 및 정렬을 통해 이루어진다.

 

margin-left: auto; 를 쓰면 요소를 왼쪽에서 오른쪽으로 민다.

margin-right: auto; 를 쓰면 요소를 오른쪽에서 왼쪽으로 민다.

 

이를 margin에 둘다 auto를 주게 되면 같은 힘이 맞물리면서 가운데로 정렬이 가능해진다.

요소를 한 방향으로 밀고 싶을 때 유용하게 쓸 수 있을 것 같다.

 

번외) n줄 말줄임 (말줄임 2줄 / 말줄임 2줄 이상)

말줄임을 진행할 때, 1줄 말줄임은 많이 해봤지만 n줄 이상은 잘 해본 경험이 없다.

.box{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 말줄임 줄 갯수 */
    -webkit-box-orient: vertical; /* 글이 가로로 읽히는지 세로인지? */
    overflow: hidden;
}

 

위의 코드로 n줄 이상 말줄임 코드를 사용할 수 있다.