STUDY/CSS6 가상돔(Virtual DOM) Virtual DOM웹 성능 최적화를 위한 DOM관리 방법으로 웹 어플리케이션의 상태 변경 시 ,객체 형태의 가상 DOM을 통해 변경된 부분만 찾아내어 실제 DOM에 적용하는 것.Virtual DOM의 동작순서Diffing 이란?가상 돔에서 변경점을 찾아내는 과정Reconciliation 이란?Diffing 으로 찾아낸 변경 점을 실제 돔에 적용 하는 과정Virtual DOM의 동작예시어플리케이션이 렌더링 될 때, 어플리케이션의 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성한다.어플리케이션이 실행되면서 state나 props가 변경되는 부분이 있는 경우 새로운 버전의 Virtual DOM을 메모리 상에 하나 더 생성합니다.새로운 돔이 생성 된 후 이전 버전의 Virtual DOM과 비교.. 2024. 8. 1. [CSS] font-display 이란? font-display 속성이란? 웹 폰트를 로드 할 때 사용 하는 CSS 속성이다. 사이트를 들어 갈 때, 웹 폰트 렌더링 속도가 느려 글자가 안보였다 나타나거나, 기본 폰트에서 바뀌는 경우를 본 적 있을 것이다. 그러한 경우에 웹 폰트의 로딩 동작을 제어하여 사용자 경험을 개선 할 수 있게 해준다. 폰트 로딩 동안 빈 텍스트나 다른 대체 폰트로 표기 할 수 있기 때문이다. 주로 사용 되는 경우 1. 로딩 지연을 최소화 할 때 웹 폰트 중 일부는 다운로드 시간이 많이 걸려 느리게 출력 되는 문제 2. FOIT (Flash of Invisible Text) 를 해결 해야 할 때 FOIT는 브라우저에서 웹 폰트가 다운로드 되지 않아 텍스트가 안 보이는 문제 FOUT (Flash of Unstyled Tex.. 2023. 7. 6. [CSS]UI 요소 1. 아코디언메뉴 (Accordion) 각 섹션을 클릭하여 펼쳐 컨텐츠를 확인 할 수 있는 인터페이스 시스템이다. 많은 양의 정보를 한정된 공간에 담을 때 주로 사용 한다. 2. 메뉴 버튼(Menu Button) 벤토메뉴 (Bento Menu) 도시락 메뉴 도시락 박스라고 불리는 이것은 그리드 목록으로 나열 된 메뉴를 뜻한다. 햄버거메뉴 (drawer Menu) 주로 앱이나 모바일 상단에 사용되는ui 로 주로 nav 목록 메뉴를 뜻한다. 되네르메뉴 (Döner Menu) 햄버거 메뉴의 바리에이션으로 목록이나 그룹의 필터링을 뜻한다. 케밥 메뉴 (Kebab Menu) 세로 형태의 원으로 구성된 메뉴로 미트볼 메뉴와 유사하다. 컨트롤에서 더 작은 메뉴를 열거나 추가 옵션이 있는 메뉴를 확인할때 주로 사용 한.. 2023. 2. 14. [CSS] box-shodow로 inline으로 border 만들기 box-shadow : inset border의 경우는 px 을 지정하게 되면, 그만큼의 값이 block 속성에 포함되서 크기가 150px 이라고 하면 151px로 잡히게 된다. 그때는 width:149px; border 만큼의 크기를 width height 에서 빼줘야 하는데, 해당 방법 사용이외에 다른 방법이 뭐가 있을가에 대한 고민으로 찾아본 결과 box-shadow : inset 속성을 사용하면, width 값을 줄이지 않고도 사용 할 수가 있게 된다. div { width: 150px; height: 50px; background-color: green; box-shadow: 0 0 0 3px #000 inset; } HTML 삽입 미리보기할 수 없는 소스 2022. 11. 25. [CSS] 제목 줄 넘어가는 부분 ... 처리 · 이미지 박스에서 제목이 밖으로 빠져나갈때 상황 (한줄처리) 제목이 들어가는 이미지 게시판이라던가, 한줄로 쓰고 싶거나, 박스 안에서 내용이 넘쳐 밑으로 빠지는 경우들이 있을것이다. 01. white-space : nowrap white-space 는 요소 안에서 공백을 설정 해준다. nowrap 속성은 공백을 1개만 표시하고 제외 다른 공백을 하나로 합쳐준다. 02. overflow : hidden overflow 는 요소 안에서 내용의 표시 방식을 설정 해준다. hiddend 속성은 요소의 크기를 넘기는 내용을 잘라 보여지지 않게 해준다. 03. text-overflow : ellipsis text-overflow 는 요소 안에서 텍스트의 표시 방식을 설정 해준다. ellipsis 속성.. 2022. 11. 25. [CSS] 스크롤바 없애기 -ms-overflow-style: none; ::-webkit-scrollbar {display: none;} 풀 페이지나 스크롤 바 부분이 없었으면 하는 상황에서 유용한 코드이다. 기능은 그대로이나 보이지 않게 설정 할 수 있다. 2022. 11. 25. 이전 1 다음 728x90
