404 Not Found

변수에 여러가지 값을 저장하고 싶다면 리스트(list)라는 자료형을 사용하면 된다. 리스트 안에는 또 다른 리스트가 있을 수 있으며, nested list 라고 부른다.

모듈 은 바로 실행하는 용도가 아니라, 나중에 사용할 함수나 클래스 등을 미리 정의해둔 파일이다. 정보를 한번만 정의해두고 import하면 여러 프로그램에서 손쉽게 사용할 수 있다.

추상화 (Abstraction)
복잡한 세부 사항은 숨기면서 주요한 기능에만 집중할 수 있게 해주는 개념이다.

• 변수 (Variable): 값을 저장
• 함수 (Function): 명령을 저장
• 객체 (Class)

자료형에는 숫자(Number), 문자(String), 불린(Boolean)이 있다.

• 숫자: 정수(Integer), 소수(Floating Point)
• 문자: “Hello” + “World” → “HelloWorld”
• 불린: True, False

• CLS는 구글 핵심 성능 지표에 포함되는 항목

• lighthouse: 크롬에 내장되어 있음

• 0.1 이내에 로드하는 것이 목표

• 돔이 뒤늦게 추가, 웹폰트가 뒤늦게 로딩되는 등의 이유로 레이아웃 배치가 변경됨.

• FOIT: font of invisible text / 보이지 않다가 나타나는 현상

• FOUT: font of unstyled text / 시스템 폰트에서 웹폰트로 변경되는 현상

• LCP는 구글 핵심 성능 지표에 포함되는 항목
• lighthouse: 크롬에 내장되어 있음
• 2.5초 이내에 로드하는 것이 목표

• 사용하지 않는 CSS 제거
• 렌더 차단 리소스 제거

삼각형으로 그리기

1
2
3
4
5
6
7
8

div::before {
    content: '';
    float: left;
    vertical-align: middle;
    margin-right: 8px;
    border: 40px solid transparent;
    border-left-color: red;
}

• 격자를 이용하여 내용의 크기와 위치를 제어하는 방법.
• 두개의 축을 이용.
• 셀병합 기능 제공
• 짧은 코드로 자유도 높은 배치 구현

flex item

1
2
3
4
5
6
7
8

.flex-item {
    flex: 0 1 auto; /* 팽창지수 + 수축지수 + 기준크기 */
    flex-grow: 0; /* 팽창지수 */
    flex-shrink: 1; /* 수축지수 */
    flex-basis: auto; /* 기준 크기 */
    align-self: auto; /* 독립적 교차축 정렬*/
    order: 0; /* 배치 정렬 */
}