[web] 반응형 테이블 만들기 - css grid

0. 들어가기

-. 데스크탑과 모바일 창에서 다른 형태를 보여주는 테이블을 만든다. 사실 table에 css 씌워서 만들었더니 간단하긴 한데 형태가 이쁘지 않아서 다시 작업함.

-. 요 포스트와 document 따라서 만들어봄.  결과물은 요기로.

1. 데스크탑에서 보이는 테이블 만들기

1) 테이블 헤더 (thead) 대체하기

-. 우선 table 구조를 div로 이루어진 grid 구조로 변경한다. 여기서는 grid-thead라는 클래스를 만들어서 적용한다.

-. 중요한건 css의 display: grid 설정과 grid-template-columns의 비율 설정.

<thead>
<tr class="thead-dark">
    <th style="width: 5%">번호</th>
    <th class="article-title" style="width: 45%">제목</th>
    <th class="article-company" style="width: 10%">회사</th>
    <th class="article-date" style="width: 10%">공시일시</th>
    <th style="width: 10%">의견</th>
    <th style="width: 10%">목표가</th>
    <th style="width: 10%">애널</th>
</tr>
</thead>


---- new HTML ----
	<div class="grid-thead">
        <div style="widdiv: 5%">번호</div>
        <div class="article-title" style="widdiv: 45%">제목</div>
        <div class="article-company" style="widdiv: 10%">회사</div>
        <div class="article-date" style="widdiv: 10%">공시일시</div>
        <div style="widdiv: 10%">의견</div>
        <div style="widdiv: 10%">목표가</div>
        <div style="widdiv: 10%">애널</div>
    </div>
    

---- CSS ----
    
/*grid to table*/
.grid-thead {
	display: grid;
	grid-template-columns: 5% 45% 10% 10% 10% 10% 10%;
	/*
	<th style="width: 5%">번호</th>
	<th class="article-title" style="width: 45%">제목</th>
	<th class="article-company" style="width: 10%">회사</th>
	<th class="article-date" style="width: 10%">공시일시</th>
	<th style="width: 10%">의견</th>
	<th style="width: 10%">목표가</th>
	<th style="width: 10%">애널</th>

	 */

}

 

 

2) 테이블 내용 (tbody) 대체하기

-. 마찬가지로, tbody에 해당하는 부분을 grid-tbody 클래스를 만들어서 대체하자.

        <tbody>
        {% if feed_list %}
        {% for feed in feed_list.items %}
        <tr>
            <td>{{ feed_list.total - ((feed_list.page-1) * feed_list.per_page) - loop.index0 }}</td>

            <td class="article-title">
                <a href="{{ feed.link }}" target="_blank">{{ feed.title }}</a>
            </td>
            <td class="article-company">
                <!-- code 검색 될 경우 한정 링크부여 -->
                {% if feed.company|stocknametocode != -1 %}
                <a href="/stock/{{feed.company|stocknametocode}}" target="_self">
                {% endif %}
                {{ feed.company }}</a>
            </td>
            <td class="article-date">{{ feed.feedDate|datetime }}</td>
            <td class="article-opinion">{{ feed.opinion }}</td>
            <td class="article-tp">{{ feed.target_price }}</td>
            <td class="article-anal">{{ feed.analyser }} [{{ feed.owner }}]</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td colspan="3">공시가 없습니다.</td>
        </tr>
        {% endif %}
        </tbody>


---- new HTML ----
    <div class="grid-tbody">
        <div>{{ feed_list.total - ((feed_list.page-1) * feed_list.per_page) - loop.index0 }}</div>

        <div class="article-title">
            <a href="{{ feed.link }}" target="_blank">{{ feed.title }}</a>
        </div>
        <div class="article-company">
            <!-- code 검색 될 경우 한정 링크부여 -->
            {% if feed.company|stocknametocode != -1 %}
            <a href="/stock/{{feed.company|stocknametocode}}" target="_self">
            {% endif %}
            {{ feed.company }}</a>
        </div>
        <div class="article-date">{{ feed.feedDate|datetime }}</div>
        <div class="article-opinion">{{ feed.opinion }}</div>
        <div class="article-tp">{{ feed.target_price }}</div>
        <div class="article-anal">{{ feed.analyser }} [{{ feed.owner }}]</div>
    </div>
    {% endfor %}
    {% else %}
    <div class="grid-tbody">
        <div colspan="3">공시가 없습니다.</div>
    </div>


---- CSS ----

.grid-tbody {
	display: grid;
	grid-template-columns: 5% 45% 10% 10% 10% 10% 10%;
}

-. 출력된 테이블을 보면 아래와 같이 그럭저럭 표 형태를 띄게된다.

-. 하지만 모바일 창 형태로 바뀌면 (width가 줄어들어서 text가 가로로 나열되지 못하게 되면) 알아볼 수 없다.

3. 모바일 대응 그리드 설정

-. 내가 원하는 형태는 아래 그림으로 설명된다. 데스크탑에선 정렬된 테이블의 형태를, 반면 모바일에선 컨센별로 뭉쳐서 보여주는 것을 원한다.

데스크탑과 모바일에서 다르게 표현되는 표

1) 기기별 화면 크기 확인하기

-. 우선 기기별 (데스크탑과 내 휴대폰) 화면 크기를 확인하기 위해 간단한 페이지를 만들었다. stocksidekick.xyz/viewport 링크로 들어가면 현재 브라우저의 사이즈를 볼 수 있다. 생각보다 모바일 창이 많이 작더라..

-. 부트스트랩에서 제시하는 medium size (width 768 px) 기준으로 형태가 변경되는 웹을 설정해 보자. 모바일이 더 작긴 한데, 여러 단으로 나눠서 할 필요가 있나 싶어서.. medium size 기준으로 모바일에서 이쁘게 보이게 설정해보겠다.

 

2) 창 크기에 따른 표 형태 적용 - media query

-. 미디어쿼리를 이용해 768 px 이상에서만 앞에서 작성한 표 형태의 그리드를 보여주게 설정한다.

/* medium 이상 (태블릿, 768px 이상) */
@media (min-width: 768px) {

	/*grid to table*/
	.grid-thead {
		display: grid;
		grid-template-columns: 5% 45% 10% 10% 10% 10% 10%;
		/*
		<th style="width: 5%">번호</th>
		<th class="article-title" style="width: 45%">제목</th>
		<th class="article-company" style="width: 10%">회사</th>
		<th class="article-date" style="width: 10%">공시일시</th>
		<th style="width: 10%">의견</th>
		<th style="width: 10%">목표가</th>
		<th style="width: 10%">애널</th>

		 */

	}
	.grid-tbody {
		display: grid;
		grid-template-columns: 5% 45% 10% 10% 10% 10% 10%;
	}
}

-. 이렇게 되면, 모바일 창에선 더 이상 그리드가 표의 형태 (thead / tbody)를 보여주지 않는다.

 

3) 모바일 창에서 숨길 항목 설정

-. 앞서, 모바일 창에선 쓸데없는 공간 낭비를 없애기 위해 '번호'에 해당하는 부분을 보이지 않을 거라 했다. div로 설정 된 영역에 대해 해당 class에 visibility: hidden 설정을 해 주면 화면에 더이상 표기가 되지 않는다. 

-. 클래스 부여를 위해 코드를 살짝 수정하고 CSS 설정을 해준다.

<div class="grid-thead">
        <div class="article-number">번호</div>
        <div class="article-title">제목</div>
        <div class="article-company">회사</div>
        <div class="article-date">공시일시</div>
        <div class="article-opinion">의견</div>
        <div class="article-tp">목표가</div>
        <div class="article-anal">애널</div>
    </div>
    {% if feed_list %}
    {% for feed in feed_list.items %}
    <div class="grid-tbody">
        <div class="article-number">{{ feed_list.total - ((feed_list.page-1) * feed_list.per_page) - loop.index0 }}</div>

        <div class="article-title">
            <a href="{{ feed.link }}" target="_blank">{{ feed.title }}</a>
        </div>
        <div class="article-company">
            <!-- code 검색 될 경우 한정 링크부여 -->
            {% if feed.company|stocknametocode != -1 %}
            <a href="/stock/{{feed.company|stocknametocode}}" target="_self">
            {% endif %}
            {{ feed.company }}</a>
        </div>
        <div class="article-date">{{ feed.feedDate|datetime }}</div>
        <div class="article-opinion">{{ feed.opinion }}</div>
        <div class="article-tp">{{ feed.target_price }}</div>
        <div class="article-anal">{{ feed.analyser }}<br>[{{ feed.owner }}]</div>
    </div>
    
---- CSS ----
.article-number{
	visibility: hidden;
}

-. 이제 더 이상 '번호' 부분이 보이지 않는다. (캡처 후 마찬가지로 thead 부분을 보이지 않게 했다.)

4) 마지막으로 order와 column span을 이용해 초기 의도한 대로 배치해 준다.

.grid-tbody{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		border: black 1px solid;
	}

	.grid-thead{
		display: none;
	}

	.article-number {
		display: none;
	}

	.article-company{
		order: 1;
		grid-column: span 2;
	}

	.article-date{
		order: 2;
		grid-column: span 1;
	}

	.article-title{
		order: 3;
		grid-column: span 3;
	}

	.article-opinion{
		order: 4;
		grid-column: span 1;
	}

	.article-tp{
		order: 5;
		grid-column: span 1;
	}

	.article-anal{
		order: 6;
		grid-column: span 1;
	}

.