본문 바로가기

css8

[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-CLIP-PATH MAKER] CSS polygon 만들어주는 사이트 https://bennettfeely.com/clippy/ Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com css 에서 좌표나 위치 지정해서 무언가 효과를 줘야 하거나 작업을 해야 할때, polygon을 사용 하게 된다.. 2023. 1. 30.
[GRADIENT] 그레디언트 조합이 어려울때 https://uigradients.com 그레디언트 조합을 추천해주는 사이트다. .bg{ background: #EDE574; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #E1F5C4, #EDE574); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #E1F5C4, #EDE574); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } 코드표를 클릭하면 그 색상만 따로 복사를 할 수도 있고, 코드 블럭 모양 아이콘을 클릭하면 해당 부분 css.. 2022. 12. 2.
[CDN] reset.css Reset 홈페이지를 작업 할때, 기본적인 css 세팅이란걸 해야한다. html 페이지 자체는 기본적으로 여백(margin , padding) 이 들어가 있기도하고, a태그 같은 경우에는 링크 속성이 들어가게 되면 파란색 글씨와 밑줄이 나오게 되는데 이런 부분들은 다 없애고 필요한 규격으로 맞춰줘야 하기 때문이다. ( 내가 필요하기 때문에 ) 1. CDN reset link 2. 직접 파일로 만드는경우 (URL) URL - https://meyerweb.com/eric/tools/css/reset 링크를 들어가면 나오는 홈페이지에 내부 내용을 복사하여 직접 reset.css 폴더를 만들어서 넣어준다. 3. CDN 적용보다 직접 만드는 reset 파일이 더 좋은이유 기본적인 리셋에 대한 부분에서 적용이 안.. 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.
[BOX-SHADOW] 그림자효과가 어려울때 https://getcssscan.com/css-box-shadow-examples css로 박스쉐도우 주기 까다롭거나 이쁘게주는 방법을 모르겠을때, 가끔씩 이용하는 사이트이다. .text{ box-shadow: rgba(100,100,111,0.2) 0 7px 29px 0px; } 원하는 효과 스타일의 그림자가 표현된 박스를 클릭하면 값이 복사가 되는데, [ctrl+v] 를 하면 box-shadow 값을 가지고 올 수 있는 것을 볼 수 있다. 2022. 11. 25.
728x90

티스토리툴바