그리드 레이아웃 적용

See the Pen 그리드 레이아웃 적용 by taeuk_kang (@taeuk_kang) on CodePen.

Shadow_DOM

Shadow DOM 만들기

See the Pen Shadow DOM 만들기 by taeuk_kang (@taeuk_kang) on CodePen.

다시 보게된 CSS 속성들

text-shadow

1
2
3

p {
    text-shadow: 1px 1px 2px #999;
}

다중 배경 이미지

1
2
3
4
5
6
7
8
9
10
11
12

body {
    background: url(image.png) no-repeat top left,
    url(image2.png) repeat-x bottom left,
    url(image3.png) repeat-y top right;
}

/* 또는 투명도를 이용한 방법 */
body {
    background: url(image.png) repeat-x fixed -130% 0,
    url(image2.png) repeat-x fixed 40% 0,
    url(image3.png) repeat-x fixed -80% 0;
}

새로운 CSS 레이아웃 요약

이전 레이아웃

플롯의 문제

플롯은 모든 요소의 높이가 똑같다면 괜찮은 방식임
그렇지 않다면, 아래와 같이 레이아웃이 망가질 수 있음

See the Pen 플롯 - 망가진 레이아웃 by taeuk_kang (@taeuk_kang) on CodePen.

레이아웃 엔진 짜기

현재 Github에서 진행 중

결국에는 비율 문제 아닌가?
화면이 작고 크고는 폰트와 이미지의 크기를 늘리고 줄이면 되는 문제

비율 분류(3분류)

• 가로 크게
• 세로 크게

자바스크립트 언락 (2017년 발행)

새롭게 알게된 사실들

조건부 호출

조건문 간략하게 작성

1
2
3

const age = 20
age >= 18 && console.log(`나이가 18세 이상이구나!`)
age >= 18 || console.log(`나이가 18세 미만이구나...`)

함수 호출 단축 조건

1
2
3
4
5
6
7
8
9
10
11
12

function fn(cb) {
    cb && cb()
}

// 또는

class AbstractFoo {
    constructor() {
       // init 메서드가 있을경우에만 호출 
        this.init && this.init()
    }
}

Git Commit 메세지 분류

Updated Time: 2019-07-21 17:35:12

귀여운 펭귄

블로그 시작

• 개인 코드 저장소