20210819 TIL

Facts

• CSS 강의 듣기 꿀잼
• 뒤꿈치 통증 여전하지만 운동화로 완화 가능 확인 ( 평발이 통증의 원인이었구나. 의료용 깔창없이는 못사는 인생인가보다)
• 오늘도 면접  
• 조이스틱 알고리즘 문제 풀이

Feeling

• 어제 완전히 쉴껄... 오늘의 컨디션이 메롱하다. 특히 면접보고 와서 더 안 좋아져서 두통이 왔다. 계속 두통 때문에 아무것도 안하고 있다가 밤되니까 조금 괜찮아 지는 듯 싶다. 쉴 땐 잘 쉬자. 근데 또 지금은 푹쉬지는 말고 주말에 마음이 원래 잘 흐트러지니까 주말에 쉬자라고 생각하는 내가 순간 무서워졌다. ㅎㅎㅎ
• CSS 강의 듣고 있는데 꿀잼이다. box모델과 position에 대해 제대로 배웠고, 보면 볼수록 과거의 내 moodplay의 문제들이 아주 속속들이 보인다. 강의 한개가 짧은 편이 아니라 깊게 오래 배우는 느낌인데 이번주 안으로 완강하는 것이 목표다. 
• CSSOM을 그동안 내맘대로 CS솜이라고 불렀는데 그렇게 부르지 않는다는 걸 영상을 통해 처음 알았다. 갑자기 혼자 확 부끄러워졌다. 
• 오늘 본 면접도 굉장히 좋았다. 나를 고용하러 왔다. 이런 느낌보다는 함께 일할 동료를 만나러 왔다. 이런 느낌이었다. 좋은 면접 경험들만 연속으로 하니 뭐랄까 나는 다 너무 긍정적으로 생각하는 걸까 싶기도 하고, 여러가지로 고민되는 부분도 있고 하지만 그건 일단 결과 까지 나왔을 때 생각하고 일단은 걍 다시 돌아가서 평소처럼 취준 차근 차근 또 시작해보자. 
• 요즘 면접에 계속 치여서 처음에 시작했던 것처럼 알고리즘, 스터디, 개인공부로 마무리했던 동료들과의 일상 패턴도 많이 어긋나게 되고 나도 지친 느낌이 들었다. 모두가 혼란스러운 상황속에서 일상 패턴으로 다시 돌아가서 천천히 같이 가보면 좋겠다는 생각이 들었다.

Finding

그림을 그려주는 프레그먼트 영역은 보더박스까지이다.

 

박스사이징

컨텐츠 박스가 css 박스 사이징의 기본이다.

기본: Width height는 컨텐츠박스 크기를 부여한 것, 나머지가 추가될것임 -> (컨텐츠 크기를 보존하고 싶다면)

박스사이징을 보더박스로 주면: Width height가 보더박스 크기

 

*인라인 요소는 인라인요소를 인식한다. html 상 공백을 인식한다.

보더를 그릴수 있는것이 3가지나 있다. 

 

박스쉐도우

• Insect 속성을 주면 보더 박스 안쪽에도 그려짐 (패딩하고 같은 위치) 보더 레디우스 영향 받음아웃라인보더 레디우스 영향 안 받음
  (인라인 요소를 그릴때 순서가 있음)
• *포지션 relative는 코말 플로우가 다 그려진 다음 다시그려진다는 사실 잊지말기
• 오프셋은 지오메트리 계산이 다 끝나서 숫자가 fixed number로 바뀌었을 때 숫자.
• 이때 쌓여있던 큐를 한꺼번에 소진, 처리하는 일을 플러쉬라고 한다.하지만 어떤 엘리먼트에 오프셋을 요청하면 즉시 재계산해야한다.
• 왠만하면 요청안하는게 제일 좋음 최적화 로직 깨짐. 지오메트리 변화가 없는 경우만 오프셋을 계속 불러도 됨 오프셋은 상대적인 위치로 계산하기 때문에 어디가 기준인지 찾는것이 가장 우선이 된다. 이 기준점을 offset parent라고 한다.

offset parent

• 돔 상 부모가 아니다!!! 
  
  1. Null - root,html, body - position:fixed - out of Dom tree( 크리에이트 엘리먼트로 만들어준건 없는것, 어펜드로 돔 프리 안에 넣어주어야 오프셋 페런트가 생겨난다)
  2. Recursive Search - parent.position:fixed = null, - parent.potition:!static = ok, Body, th,td,table: ok, parent.parent continue 계속 찾아올라감 
  3. 부모가 될 수 있는 애는 포지션이 앱솔루트나 렐러티브밖에 없음

• 일반적인 렐러티브의 역할이 스테틱의 위치를 조정한다기 보다 스테틱 안에 앱솔루터 컨테이너를 넣기 위해 사용한다. 컨텐츠의 offsetScrollWidth offsetScrollHeight 가 진짜 크기이다.
• position: absolute의 기본값은 offsetParent와 무관하게 돔 상의 부모의 기본값을 기준으로 그려줌
• position: static에서는 Normal flow로 그리기 때문에 left top bottom right 모두 무시된다. 
• position: relative의 left 속성은 normal flow로 그려졌을 때의 거리
• position이 float를 이김, float는 normal flow일때만 성립하기 때문에 (새로운 bfc 영역 만들어야 하니까) absolute를 주는 순간 float는 무의미해짐)
• static이랑 relative랑 공생하는 방법 => relative
• th,td,table는 offsetParant계산이 정확히 안됨(원래돼야함) 그래서 보통 relative div로 그 안을 감싸야함

 

CSSOM

 

CSSOM: CSS를 object화 한것  

스타일 시트가 실체지만 DOM으로 포장해서 HTML 태그안에 넣는 것

 

Style DOM Element -> sheet:  CSSStyleSheet -> cssRules: CSSRulelist   -> item: CSSRule >CSSStyleRule ( 스타일 객체와 셀렉터 텍스트와 타입이 들어있다.)

 Css에서 사용되는 구문은 전부 특별한 룰 객체로 바뀌어 타입을 가지고 룰스안에 들어간다. 

 

Css에 무언가 추가하고 싶으면 rules가 아닌 sheet에 추가하는 것이 다.  ( sheet.insertRule(스타일, 위치-인덱스) ) 

 

document는 종속되어있는 sheet 객체에 변화가 생기면 리랜더링을 한다 ( 리페인트를 실시한다, 상황에 따라 리플로우까지). 

 

Document.styleSheets에 하나씩 쌓임. 0번은 스타일 없이 기본적으로 가지고 있는 것, 마지막에 있는 시트가 이김

 

삭제하고 싶으면 sheet.deleteRule(인덱스)

 

자바스크립트로 인라인 요소를 변경하는 것 보다 스타일시트를 건드리면 성능상의 저하도 없고 값 싸다 훨씬 빠르다. CSS 오브젝트만 변화시키면 다 적용이 되니까, 태그에는 미리 클래스를  정의해놔도 문제가 없으니까