코드 순서

내가 하려고 했던건 검색 결과 history가 밑에 표시되게 하는 기능이었다. 그래서 이런식으로 코드를 작성했다.

 <div class="history">
        <ul class="list">
            <div class="1">
                <a href="/detail?job=thor">thor</a>
                <button>❌</button>
            </div>
            <div class="1">
                <a href="/detail?job=thor">thor</a>
                <button>❌</button>
            </div>
            <div class="1">
                <a href="/detail?job=thor">thor</a>
                <button>❌</button>
            </div>
            <div class="1">
                <a href="/detail?job=thor">python</a>
                <button>❌</button>
            </div>
        </ul>
    </div>
</body>

@media (max-width:500px) {

	.history > .list {
		grid-template-columns: repeat(3,35%);
		grid-template-rows: repeat(2,50%);
		grid-auto-rows: 50%;
		grid-row-gap: 31%;
		grid-column-gap: 0%;
	}


.history .list {
    display: grid;
    margin: 1% 13%;
	grid-template-columns: repeat(6,16%);
    grid-template-rows: repeat(2,50%);
	grid-auto-rows: 50%;
	grid-row-gap: 50%;
	/* grid-column-gap: 1%; */
    padding-left: 0px;
}

반응형으로 만들려고 media query를 이용했다. 그러나 반응형이 동작해야하는 시점에 효과가 적용되지 않아서 개발자 도구를 살펴보니 media query가 cross out 되어있었다. 예전에도 이런 문제가 발생했었고 해결했는데 기록해두지 않아 까먹어서 이번 기회에 기록하려고 한다.

알고보니 media query 뒤에 history에 대한 효과 css 코드가 있었기 때문에 media query 효과가 뒤에 적힌 기본 history css 코드에 의해서 취소되었던 것이다.

그래서 기본 history 코드를 media query 앞에 명시하여 기본적으로 이 코드를 실행하게 하였고 media query는 뒤에 적어서 옵션으로 실행되도록 하였다.

.history .list {
    display: grid;
    margin: 1% 13%;
	grid-template-columns: repeat(6,16%);
    grid-template-rows: repeat(2,50%);
	grid-auto-rows: 50%;
	grid-row-gap: 50%;
	/* grid-column-gap: 1%; */
    padding-left: 0px;
}

@media (max-width:500px) {

	.history > .list {
		grid-template-columns: repeat(3,35%);
		grid-template-rows: repeat(2,50%);
		grid-auto-rows: 50%;
		grid-row-gap: 31%;
		grid-column-gap: 0%;
	}

그렇게 하니깐 제대로 실행이 되었다.