Holy Grail Layout by Grid

grid-template-area

HTML

        <div class="container">
            <div class="header"></div>
            <div class="section"></div>
            <div class="aside"></div>
            <div class="footer"></div>
        </div>

CSS

            .container {
                display: grid;
                grid-template-areas:
                    "header header header"
                    "section section section"
                    "footer footer footer";
                gap: 10px;
            }
            .header {
                grid-area: header; 
            }
            .section {
                grid-area: section;
            }
            .aside {
                grid-area: aside;
            }
            .footer {
                grid-area: footer;
            }

그리드 아이템인 .aside에 grid-area: aside를 부여해놓고 .container의 grid-template-area에서 사용하지 않아서 생긴 문제이다.
grid-template-area에 aside의 자리를 추가해주면 해결된다.

grid-template-areas:
	"header header header"
	"section section aside"
	"footer footer footer"

grid-row, grid-column

            .container {
                display: grid;
                gap: 10px;
            }
            .header {
                grid-column: 1/4;
                grid-row: 1/2;
            }
            .section {
                grid-row: 2/3;
                grid-column: 1/3;
            }
            .aside {
                grid-row: 2/3;
                grid-column: 3/4;
            }
            .footer {
                grid-row: 3/4;
                grid-column: 1/4;
            }

---

transform: translate로 z-index가 무시되는 현상

HTML

        <div class="wrap">
            <section class="container">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </section>
        </div>

CSS

            .wrap {
                perspective: 1000px;
            }
            .container {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
                transform: rotateX(60deg) rotateZ(45deg);
            }
            
            .item {
                width: 100px;
                height: 100px;
                position: relative;
                transition: all 0.3s;
            }
            .item:hover {
                cursor: pointer;
                transform: translate(-10px, -10px);
            }
            .item::after {
                content: "";
                position: absolute;
                top: 10px;
                left: 10px;
                background-color: #999;
                width: 100px;
                height: 100px;
                z-index: -1;
            }

Toggle 3d Grid Perspective를 참고해서 위와 같은 레이아웃을 만들었다.
아이템에 마우스를 올렸을 때 그림자는 가만히 두고 아이템만 위로 뜨게 하고 싶었다.

하지만 결과는 아래와 같이 아이템과 그림자가 같이 뜨는 것은 물론, 그림자가 본인의 z-index: -1;을 무시하고 아이템 위로 올라오기까지 했다.

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)
z-index에 관해 아무도 말해 주지 않은 것
SETTING THE STACKING ORDER OF PSEUDO-ELEMENTS BELOW THEIR PARENT ELEMENT
z-index by codrops
z-index에 관한 여러 글을 참고해본 결과, 이 현상은
1. 원래의 쌓임순서대로라면 가상요소(그림자)는 부모요소(카드)의 위에 위치하게 되지만
2. 가상요소(그림자)에 z-index: -1을 줘서 강제로 끌어내려 놓은 상태가
3. transform으로 인해 새로운 쌓임맥락에 배치되었고,
4. 가상요소(그림자)가 원래의 쌓임순서에 따라
5. 부모요소(카드)의 위에 오게 된 현상으로 보인다.

• 가상요소의 쌓임순서를 표시한 이미지
  

해결법

z-index를 조작하는 방식으로 해결하고 싶었지만 아직 이해가 완전하지 않아 방법이 떠오르지 않았다. 그래서 transform이 아니라 top, left로 카드를 이동하는 방식으로 해결하기로 했다. 카드에 마우스를 올렸을 때 카드를 -10px만큼 올리면 그림자 요소도 따라 올라오게 되는데, 이를 상쇄시켜 그림자가 제자리에 가만히 있는 것처럼 표현하기 위해 20px을 이동하도록 했다.

            .item:hover {
                cursor: pointer;
                top: -10px;
                left: -10px;
            }
            .item::after {
                content: "";
                position: absolute;
                top: 10px;
                left: 10px;
                background-color: #999;
                width: 100px;
                height: 100px;
                z-index: -1;
            }
            .item:hover::after {
                top: 20px;
                left: 20px;
            }

카드가 올라가도 그림자가 제자리에 있는 건 구현했지만 문제가 생겼다. 바로 성능이 너무 안 좋다는 것이다.

마우스를 카드에 올릴 때마다 레이아웃 배치가 다시 일어나고(reflow) 프레임이 뚝뚝 떨어진다.
더 나은 해결책이 필요하다.

개선책

            .item {
                width: 100px;
                height: 100px;
                position: relative;
                transition: all 0.3s;
                box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
            }
            .item:hover {
                cursor: pointer;
                transform: translate(-10px, -10px);
                /* top: -10px;
                left: -10px; */
                box-shadow: 20px 20px 10px 5px rgba(0,0,0,0.55);
            }

그림자를 표현할 가상요소를 추가하기보단 그림자라는 역할에 딱 맞는 box-shadow 속성을 사용해서 해결했다. box-shadow를 사용함으로써 transform을 사용할 수 있게 되었고, 따라서 top, left와 달리 레이아웃을 다시 배치하는 과정이 없어져서 성능도 훨씬 좋아졌다.

---

img의 기본 하단 여백

위 사진의 빨간 선이 baseline이다.
<img>는 인라인 요소라서 baseline이 존재하고 그로 인해 text처럼 아래쪽에 여백이 생긴다.
<img>태그가 가진 inline 혹은 inline-block의 특성을 이용하고 싶은데 아래쪽의 여백때문에 생각했던 레이아웃이 만들어지지 않는 경우가 생긴다.

여백을 없애는 두 가지 방법이 있다.

1. display: block; 부여하기
   

2. vertical-align: middle or top 부여하기

   • vertical-align: middle 부여했을 때
     
   • vertical-align: top 부여했을 때
     

각 방식마다 특성이 있으므로 상황에 따라 알맞은 방법으로 사용하면 된다.
개인적으로는 reset.css에 아래와 같이 부여해놓고 스타일링을 하는 것도 괜찮을 것 같다.

	img {
    	width: 100%;
        vertical-align: top;
	}