css-rendersing2

2017-09-07 20:02:30

박스모델

css 레이아웃 규격을 지켜야한다
- margin은 투명하다 그러나 실체는 있다
- border는 외곽선(끝없는 크기를 가질 수 있다.)
- padding도 투명한다( 보더와 컨텐츠 박스를 띄워주는 역할 )
하나의 엘리먼트는 4단계의 단계를 가지고 있다
- width 100은 무엇이 100인거야?
- ms는 보더박스를 기준으로.. 그러나 ie는 컨텐츠박스
- box -sizing 보더박스, 패딩박스, 컨텐츠박스 중 하나를 선택하자
지금까지 고정 박스 모델
- 확장된 css모듈은 그림에는 영향을 미치지 않지만 더 많은 효과를 줄 수 있는 효과들을 만들었다.
  - Box-shadow -> 무한히 만들 수 있다.
  - Box-shadow inset
  - OUTLINE -> 박스쉐도우 위에 올릴 수 있다.
Boxshaodw
- 노말 플로우 상에서 박스 쉐도우가 뒤에 나온 애가 이긴다.
- 노말 플로우 상태에서 rp를 사요하면 이기게된다.
- 부하를 주지 않는다. 지오메트리를 건드리지 않고 gpu로 칠하기 때문이다.
- 그러기에 앞으로 gpu가 칠해지는 것이 빠르기 때문에 잘 배워 써버리자.
지시 엘리먼트
- @를 이용한 지시자 엘리먼트
  - 키프레임 @폰트페이스
  - 드레프트 규격은 머냐
  - 원래 css에 없는 거지만 이제부터 이 규약을 쓰겠다 그것이 바로 지시자 엘리먼트다.
  - 변화를 키프레임이라고 한다. 키프레임이 여러개 있어서 키프레임스다.
  - 셀렉터는 각각 디렉티브내에서 다르게 작동한다. 디렉티브 별로 셀렉터가 다르게 나올 것이다.
  - from하고 to라는 셀렉터를 이용해서 박스 쉐도우애니메이션 속성
Position
- fixed
- caret position & offset
- offset이란
  - 정확히 어떤 기준이 있는데 그 기준으로 부터 얼만큼 차이가 나는가?
    기준을 알아야한다. 기준으로부터 상대적으로 얼만큼 떨어지냐.
    왜 쓰냐 ? 분할하고 사용자가 부분적으로 이해하기 위해서 사용한다.
    컨테이너에서 10만큼 떨어져있다. 즉 기준점을 향해서 얼만큼 떨어져 있냐?
    절대적 기준이 아니라 기준으로 부터 얼만큼 쓰겠다는 걸 계산하겠다.
    돔구조를 따르지 않고 노말 플ㄹ로우의 구조를 따라간다.
    오프셋을 계산하는 방법은 오프셋 부모를 얻는 방법에 달려있다.
    오프셋 부모 결정 법은?
    - NULL
      - ROOT, HTML, BODY
      - POSITION: FIXED
      - OUT OF DOM TREE
      - NULL이 되면 전멸
    - RECURSIVE SEARCH
      - PARENT.POSITION:FIXED = NULL
      - PARENT.POSITION: !STATIC = OK
      - BODY = OK
      - TD, TH TABLE = OK
        DISPLAY 속성이 아니라 태그가 나와야한다.
      - PARENT.PARENT CONTINUE
      - 오프셋 부모를 얻으면 계산할 수 있다.
    - offsetLeft
    - offsetTop
      css가 다 그림을 그리면 엘리먼트에 다 박아준다 오프셋정보들을 우리가 하는게 아니라 css렌더링 엔진이 해준다
      그렇기 때문에 offset 값을 바꿔도 안변한다 css렌더링 결과를 보여주고 있는 중일 뿐이다.
      리플로우를 모아서 한다 한프레임당의 변화를 모아서 한다
      한번할때마다가 아니라 묶어서 계산하는 것이다 한번에 변화를 묵어서
      그러나 코드 중간에 offset이 나오면 모으지 않고 그 순간 바로 리플로우를한다.
      offset 값을 쓰면 무조건 리플로우를 한다. 그렇기에 오프셋은 쓰지말고 오프셋쓸꺼면 전부 모아놔라
- absolute
  - 숫자를 안주면 기본값은 오프셋부모의 탑을 준다.
  - left를 주면 부모에 맞춰진다

SangCheol Lee