반응형 CSS5 리플로우를 줄이는 CSS작성 1. 브라우저 렌더링 렌더링 엔진 : DOM 트리, CSSOM 트리를 해석하여 렌더트리 생성 이 과정에서 렌더링이 일어난다. html을 파싱하여 dom tree 생성, css 파싱하여 cssom tree 생성 Layout (Reflow) : 배치가 조금이라도 바뀌면 발생한다. 배치가 바뀌지 않으면 생략 Paint (Repaint) : 그리기 - 이 과정은 피할 수 없음 DOM 변경하면?? Render Tree를 변화시킨다. -> reflow가 일어나면 결과적으로 추가 렌더링 Repaint : 한 요소의 속성값에 변화가 있지만 전체 레이아웃에는 영향이 없을 때 visibility, outline, background-color 등 Repaint 과정에서 문서내 DOM Tree의 다른 노드들의 속성도 검증 .. 2022. 3. 6. position : absolute 이전에 absolute는 relative안에서 움직인다는 글을 썼다. https://wnsdufdl.tistory.com/174?category=1012887 position : relative와 absolute relative안에서 absolute가 움직인다. 1. relative : 화면전체 , absolute : 위에서 20% 내려옴(top:20%;) 2. relative : 위에서 400px내려옴(top : 400px;) , absolute : 위에서 20% 내려옴(top:20%;) 3. rela.. wnsdufdl.tistory.com 오늘 position:absolute를 적용하면 다른 엘리먼트들이 position:absolute를 적용한 엘리먼트의 공간을 무시한다. 글로쓰니 뭔소린지 모르겠다.. 2021. 11. 6. CSS flex box 1. flex box flex { display : flex } : 항목이 행으로 나열된다. div 태그는 한줄을 다 차지하는 태그이지만, { display : flex } 속성을 추가하면, height와 width가 내용의 크기만큼만 늘어난다. inline-flex 컨테이너가 컨테이너 주변 요소들과의 조화를 생각할때 사용하면 된다. flex를 추가하면 컨테이너가 한 줄 전체를 차지한다. .container { background-color: aqua; display: flex; /* display: inline-flex; */ } inline-flex를 차지하면 컨테이너는 내부 요소들의 width만큼만 자리를 차지한다. .container { background-color: aqua; /* displa.. 2021. 8. 1. 웹 폰트 사용법 웹 폰트 사용자의 컴퓨터에 설치 여부와 상관없이 온라인으로 다운받아 사용할 수 있는 폰트들이다. 웹 폰트는 font-family 속성을 사용하지만, @font-face 라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드 할 것을 알리면서 사용할 수 있다. 사용법 1. 아래 홈페이지에서 원하는 웹폰트를 다운받고 CSS파일이 있는 폴더에 저장한다. https://fonts.google.com/?subset=korean [ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ](https://fonts.google.com/?subset=korean) 나는 왼쪽에 있는.. 2021. 7. 26. 이전 1 2 다음 반응형
