table 열의 넓이(col width값)가 pc, mobile 화면 크기에 따라 달라질 때. @each 사용 (나는 웹퍼블리셔로 근무 중)

pc, mobile 화면 크기에 따라 table 열의 너비가 다른 디자인을 마주했다.
내가 시도한 방법은 이렇다.

1. colgroup 을 'pc-only', 'mo-only' class를 사용해 'display: none', 'display: block' 처리를 한다.
-> 문제점 : 웹 접근성에 걸린다. 테이블이 하나인데 col이 여러 개니까는..!

2. col이나 th에 'nth-child' 선택자를 붙여 미디어 쿼리로 css를 처리한다.
-> 문제점 : 코드가 길어져서 보기 싫어짐..!

결국 내가 선택한 방법 :

table에 고유 class를 붙이고(한 페이지에 테이블이 여러개가 있는 경우) col에 순서대로 번호를 붙여 col1~col5 class를 부여하고 @each 루프를 사용하여 코드 줄이기!

(mixin @include mobile 사용)

table {
    &.col-g-1 {
        col {
            @each $index, $width in (1: 20%, 2: 20%, 3: 20%, 4: 20%, 5: 20%) {
                &.col#{$index} {
                    width: $width;
                }
            }

            @include mobile {
                @each $index, $width in (1: 10%, 2: 25%, 3: 25%, 4: 30%, 5: 10%) {
                    &.col#{$index} {
                        width: $width;
                    }
                }
            }
        }
    }

    &.col-g-2 {
	...
    }
}

 

 

HTML 마크업 ↓

<table style="min-width: 960px;" class="col-g-1">
    <caption>테이블 설명</caption>
    <colgroup>
        <col class="col1">
        <col class="col2">
        <col class="col3">
        <col class="col4">
        <col class="col5">
    </colgroup>
    ...

 

 

GPT의 SCSS코드 해석 : 

1. table 요소에 대한 스타일을 정의합니다.

2. &.col-g-1, &.col-g-2 는 각각 특정 클래스를 가진 테이블 스타일 세트를 나타냅니다.

3. 각 클래스 내에서 col 요소에 대한 스타일을 정의합니다.

4. @each 디렉티브를 사용하여 열 인덱스와 해당하는 너비를 반복적으로 설정합니다.

5. @include mobile은 모바일 환경에서 적용될 스타일을 정의합니다.

6. 각 클래스 내에서 모바일 환경에서의 열 너비를 다시 설정합니다.

 

@each 루프 사용의 장점

1. 코드를 간결하게 작성할 수 있다.

2. 각 열의 너비를 반복적으로 설정할 수 있다.

 

---

 

SCSS @each 공식 문서
https://sass-lang.com/documentation/at-rules/control/each/