STUDY/CSS5 [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
