css - flex, grid (inline-block 여백, width, 말줄임, grid) 2

 

inline-block || a 태그 여백

span과 같은 inline 속성의 태그들은 본인이 크기를 가질 수 없다.

하지만 span에 크기와 높이를 부여하고 부모요소에 display: flex; 를 주게 된다면

inline이라도 본인의 크기를 가지고 정렬을 할 수 있게 된다.

 

flex 에서의 말줄임

.box{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

기본적으로 사용하는 말줄임 코드다.

flex 구조에선 말줄임을 담고 있는 덩어리 코드들의 width 값이 필수불가결하다.

굳이 지정하지 않아도 되는 width 값을 지정할 땐 min-width: 0; 을 사용하자.

.parents{
    min-width: 0;
}

.box{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

grid

그리드 또한 flex와 같이 요소를 효율적으로 분배할 수 있다.

만약 6개의 box들이 있고 이를 3개씩 2줄로 같은 크기의 같은 여백으로 나눈다고 가정하자.

 

.box-flex{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}
.box-flex li{
    width: calc((100%) - 20px / 3);
    height: 100px;
}

 

flex로 나누게 되면

넘칠 때 줄바꿈을 위한 flex-wrap: wrap;

width를 3등분으로 정확히 나누기 위한 calc((100% - gap값) / 3); 이 필요하다.

여기서 gap의 값이 변하면 calc 안의 값 또한 변경해야 하는 번거로움이 있다.

 

하지만 그리드를 쓰면 조금 더 편하게 나눌 수 있다.

 

.parents{
    display: flex; /* 일단 flex로 균등하게 배분 */
    gap: 10px;
    width: 800px;
}
.box-grid{
    display: grid;
    grid-template-column: repeat(3, 1fr); /* 세로를 같은 frame으로 세 줄로 나눔 */
    grid-template-row: repeat(2, 100px); /* 가로를 2줄로 나누며 100px의 높이를 가짐 */
    flex: 1; /* 모든 자식이 같은 크기를 가짐 */
}

 

번외) h1 태그

h1 태그는 문서 내에서 한번만 쓸 수 있다.

SEO를 위해 사용하는 태그로 웹 페이지의 방향성을 담당한다.

 

번외) inline-block 여백

inline-block을 사용할 때, 가끔 의도치 않는 여백이 생길 때가 있다.

이는 마크업을 할 때, enter로 코드를 정렬시킬 때 발생하기 때문에

inline-block의 요소는 block으로 재설정해 사용한다.

inline-block은 flex가 나온 시점부턴 거의 사용하지 않는다.

 

번외) aspect-ratio / object-fit

.parents{
    width: 800px;
}
.box{ /* 여러개의 자식 요소로 가정 */
    aspect-ratio: 1/1; /* 모든 요소를 같은 비율로 설정 (높이, 넓이) && 16:9 하면 유튜브 비율 */
    object-fit: cover; /* 요소의 사이즈에 따라 width나 height 값을 조정해 이미지가 정비율로 보일 수 있게 설정 */
}