[Front-end🦁] #13 Grid Project

1. Grid

1-1. 복습, holy grail layout

grid 에 대해 간단하게 복습하고 어제 만든 holy grail layout 도 flex 대신 grid를 사용해서 다시 만들어 보았다. 001~003.html

1-2. grid + animation

004.html & 참고한 codepen

거의 보자마자 pespective랑 transform, transtion 줘서 구현하는거 아냐? 하고 호기롭게 시작했는데, 맘대로 되지 않았다.

1. perspective 를 주면 크기 차이가 생겨서 rotate만을 써서 해결
|
2. 그림자를 after 요소로 만들어서 밑으로 내렸는데, hover 일 때 z-index 문제가 있어서 Transform 대신 position을 사용해서 올리고 내리게 했다.
|
3. 그랬더니 그림자가 같이 올라가서 position: fixed 를 사용했더니 그림자가 after라서 item 의 자식이라 item에 붙어버림 
|
4. 그림자는 내리고, 요소는 올려서 해결했다
|
5. grid를 하나 더 만들어서 밑에 까는 것도 하나의 방법이다!

.board-item {
    /* relative를 넣어서 Stacking order 배치 */
    position: relative;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transition: all .3s;
}
.board-item:hover {
    cursor: pointer;
    /* transform: translate(-10px, -10px); */
    top: -15px;
    left: -15px;
}
.board-item::after {
    z-index: -1;
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #999;
    width: 100px;
    height: 100px;
    transition: all .3s;
}
.board-item:hover::after {
    top: 25px;
    left: 25px;
}

캐릭터 애니메이션 붙이기

클릭 이벤트를 CSS로 잡으려면 radio, checkbox + label 을 사용한다. checkbox는 숨기고, label만 보이게 한 뒤, label 속성에 변화를 주는 것!!

이제 해당 label 크기를 맞추고, 세워서 라디오버튼 checked이면 label에 이미지가 들어가게 한 뒤 통통 튀는 애니메이션을 주면 됨!

005.html

1-3. 넓이 자동 계산

width: calc(100%-200px);
width: min(500px, 50vw);
min-width: 500px;

iOS에서는 항상 이런식으로 다뤘어서... 근데 html css는 연산자가 없는거 같아서 js 들어가기 전엔 없는 줄 알았는데 그래 이런 기능이 없을리가 없지...

2. 로그인 창 코드 리뷰

- input에 label 꼭 달기.
|
- 공통적으로 쓸만한 것은 module로 묶어놓고 해당 class를 바로바로 가져다 쓰면서 작업한다.
|
- 위에서부터 순서대로 마크업이 아니라 논리적 순서대로!!! 로그인 버튼과 닫기 버튼은 같이 묶여 있는 것이 논리적 순서상 맞다.
|
- 아이콘을 버튼 안에 background-image로 넣고 글씨는 날리고 싶다면 버튼 안에 span 태그로 글씨를 쓰자.

• 이미지는 inline 이라서 text 처럼 미묘미묘한 간격이 생기는데 baseline이 있어서 생기는 현상으로 display: block; width: 100%; 로 사용하거나 vertical-align: top; 을 주면 해결할 수 있다!!! img, vertical-align

• before, after 같은 가상 요소에 content: url(img); 를 줄 수도 있다!!

3. JS Challenge

console.log('콘솔창에 log 찍어줌');
const a = 10; // 상수
let b = 20; // 변수. swift에서는 이게 상수인데......😱

bool true, false; // bool은 소문자.
let point = null; // null : 값이 없다고 명시적으로 알려줌, 파이썬 None
let something; // undefined : null과 다름😱 변수는 메모리에 있는데, 값이 없는 것

const list = []; // 들어가는 값의 type이 다 달라도 됨...😱
list[3];
list.push(); // push가 기본.😱

// Object : 다른 언어 dictionary 문법....😱
const player = {
    name: "ddosang",
    points: 10,
    update: "true"
};
player.name, player["name"] // property에 접근. const여도 안의 property 값은 수정 가능.
player.lastName = "Lim"; // 없는 속성 넣으면 새로 속성도 추가됨

• js 는 camelCase 사용한다.
• default로 const를 쓰고 값을 바꿀 일이 있을 때 let으로 바꾼다. 원래는 변수 var만 있었다.
  always const, sometimes let, never var.

4. 느낀점

<새로 알게 된 사실들>

• grid-template 대신 grid-area를 사용해서 잡을 수 있다.
• transform도 stacking order에 변화를 줄 수 있다.
• clac, min.. css에도 있다
• 틀에 박힌 채로 코딩하지 말고 알던 요소들도 궁금하면 시험해보자!!