멋사_프론트엔드스쿨_TIL_3W_2Day

1. Grid

grid-track: 행 또는 열

grid-cell: 한 칸

grid-line: 셀 구분 선 (1번 부터 시작! 0부터 시작 아님)

grid 영역 지정할 수 있는 속성들

.container {
            display: grid;
            
 /* grid-template-columns: 200px 500px 200px; */
            
/* fr: fraction, 공간 내 비율 */
            grid-template-columns: 1fr 2.5fr 1fr;

/* grid-template-columns: 25% 50% 25%; */ 

/* grid-template-columns: repeat(3, 1fr); */

grid-template-rows: 200px 500px 200px;

/* track 간격*/
gap: 20px;
row-gap: 20px;
column-gap: 20px;
       
}

1-1. grid-template-areas 로 구현해보자!

<title>grid-1</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container-color {
            background-color: cornsilk;
            border: solid 3px black;
            border-radius: 10px;
            margin: 5px;
            padding: 5px;
        }

        .item-color {
            background-color: darkcyan;
            border: solid 3px black;
            border-radius: 10px;
            margin: 5px;
            padding: 5px;
        }

        .container {
            border: 10px solid black;
            display: grid;
            gap: 10px;
            grid-template-areas: 'header   header   header '
                'section  section  aside'
                'footer   footer   footer';
        }

1-2. 똑같은 grid를

grid-row: 2/4;
grid-column: 2/4;

로 구현하려면 코드는 어떻게 될까?

<style>
        * {
            box-sizing: border-box;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
        }

.header {
            border: 10px solid tomato;
            grid-row: 1 / 2;
            grid-column: 1 / 4;
        }

        .section {
            border: 10px solid blue;
            grid-row: 2/3;
            grid-column: 1/3;
        }

        .aside {
            border: 10px solid darkred;
            grid-row: 2/3;
            grid-column: 3/4;
        }

        .footer {
            border: 10px solid deeppink;
            grid-row: 3/4;
            grid-column: 1/4;
        }
    </style>

2-3. 번외

CodePen의 card를 clone coding 해보자!

⬇️ 완성본 ⬇️

https://uni-meang.github.io/CodePenCloneCoding/

z-index:-1; 이지만 hover 할 때 위로 빼꼼 올라와버리는 문제가 발생!

(⭐️ transform 되면 z-index가 무시된다!)

↗️ 요렇게

→ Solution

: 가상요소에 hover를 줄때, 반대로 밑으로 민다!

transform 쓰지 않고

after는 밑으로 밀고 hover된 item은 위로 올려준다!
해결!

<번외>
_⭐️ 가상요소는 elements의 위에 있다!**_
가려지는 이유를 아래 사진을 보면 알 수 있지.

---

2. modal 창 code review

지난번 로그인 창 code review가 진행되었다!

1) 1page 에 h1 tag는 1개만!!

2) 숨김태그는 div 보다는 span, strong, em으로

3) figma svg로 export해야 깨지지 않아

4) input tag는 꾸미기가 어려우니 label 추가해서 label 로 꾸미기

5) 가상요소 before, after를 넣을 경우에는 heading tag 를 넣어서 구분해줘야 한다. (가상요소는 screen reader가 읽지 않기때문! )

6) float 써서 정렬해도 된다! flex에 목숨걸지 말잫ㅎㅎㅎ

7) fieldset 은 from안에 넣어주기

8) blind 라는 이름 보다는 txt-hide 로 하는게 더 좋지 않을까?

9) img reset은 display:block; 아닌 vertical-align: top; 으루