과제리뷰_1만 시간의 법칙

11월 11일
📍어제의 수업 과제 였던 1만시간의 법칙 리뷰

1만시간의 법칙

1. 폰트

이번에 했던 1만시간의 법칙은 총 4개의 폰트가 필요했다.

• 일반적으로 300kb를 넘으면 크다고 생각한다.
• 폰트는 보통 2개정도 사용한다.
• 이미지 텍스트로 표현하면 용량이 많이 줄어 들 수 있다.

위의 파일을 살펴보면, 아래 폰트를 찾아 볼 수 있다.

해당 폰트는 저 문구에만 사용될 뿐, 다른 곳에서 활용되지 않는다.
그렇기 때문에 이미지처리 해서 폰트를 이용하지않고, 용량을 낮출 수 있다.

2. z-index

쌓이는 순서를 정할 수 있다.

• 그림이 겹쳐지면서 비추는 경우
• 원하는 순서가 있는 경우

등에서 z-index를 사용하게 된다.
📌 z-index로 바뀌는 레이아웃은 마크업에 영향을 끼치진 않는다.

<값>
보통 1,2,3의 순서로 주게 된다.
값이 클수록 위로 오게 된다.
나중에 값이 많아지면 복잡할 수 있으니, 10단위로 쓰는 것을 추천한다.

.tit-law .img-tit {
    position: relative;
    z-index: 10;
}

💡 position 값이 있어야 사용할 수 있다.

3. 가상요소

별 다른 의미를 가지고 있지 않는 요소는 가상요소로 작성해준다.
위의 파일에서는 click손가락 같은 경우 이다.

버튼도 아니고, 클릭을 하라고 꾸미는 요소기 때문에 가사 요소로 작성한다.

• 가상요소는 display와 content를 꼭 넣어준다.
• 이때 content는 문자나 url등이 올 수 있다.
  (하지만, img의 url인 경우는 img를 조절하기 어려워서 사용하지 않는다.)

아무래도 1만시간의 법칙은 마크업할 것들 보다는 시각적 요소들이 많기 때문에 이런 부분들이 중요했던거 같다.
여러가지를 연습해볼 요량으로 practice 폴더를 만들었다.
여러가지로 css를 연습해 봐야겠다.