CSS3
-
반응형 작업 시 미디어쿼리를 최소화로 잡는 방법CSS3 2023. 12. 3. 16:59
미디어 쿼리란(Media Query)? 뷰포트 크기에 따라 서로 다른 레이아웃을 만들 수 있기 때문에 웹 디자인의 핵심 부분이다. 미디어 쿼리는 스크린 해상도 크기에 따라 CSS 스타일을 적용하도록 분기 처리해주는 모듈이다. 적용하는 방법 1. link태그로 연결하는 방법 2. 스타일 시트 내에서 @media를 사용하는 방법 import url("css/tablet.css") only screen and (min-width:321px) and (max-width:768px); 반응형 작업 시 미디어쿼리를 최소화로 잡는 방법 1. 상대길이 단위 사용하기(vw,vh 사용하기) rem, em, vw, vh와 같은 상대길이 단위를 활용하여 스타일을 설정합니다. 이는 화면 크기에 따라 자동으로 조정되기 때문에 미..
-
animation 최적화 기법CSS3 2023. 12. 3. 16:51
1. CSS animation 최적화 하는 이유? 애니메이션을 구현하다보면 jank현상(스크롤 떨림, 지연, 끊김 등)이 나타난다. 이를 해결하기 위해 애니메이션 최적화가 필요하다. 애니메이션 최적화는 웹 사이트의 성능을 향상시킬 수 있고, 시스템을 절약하여 좋은 사용자 경험을 제공할 수 있다. 2.CSS animation 최적화 하는 방법 position 사용 포지션 속성을 사용하면 리플로우 과정을 줄일 수 있다. 포지션을 absolute나 fixed로 잡아서 다른 요소에 영향을 끼치지 않고 해당 요소에만 발생하게 되어 리플로우를 줄일 수 있는 방법이다. transform에서 3d 사용하기 transform은 부모 요소의 영향을 받지 않으면서 독자적으로 요소의 위치 및 확대, 축소, 회전이 가능한 cs..
-
Flex와 Grid에 대해서 비교CSS3 2023. 11. 26. 17:34
Flex는 일차원적인 레이아웃, gird는 이차원적인 레이아웃을 만드는 것입니다 Flex는 주축과 교차축에 따라 아이템들을 배치하고 정렬할 수 있습니다 유연한 박스 모델로서, 아이템들의 크기와 간격을 자동으로 조절할 수 있습니다. 반응형 웹 디자인에 적합하여, 단순한 레이아웃에 사용하기 좋습니다 Grid는 행과 열로 이루어진 격자 모양의 레이아웃을 제공합니다. 복잡한 레이아웃에 사용하기 좋으며, 아이템들의 위치나 크기를 정확하게 지정할 수 있습니다. 픽셀 단위뿐만 아니라 fr(분수) 단위나 repeat() 함수 등을 사용하여 유연하게 레이아웃을 구성할 수 있습니다 flex와 grid의 장, 단점에 대해서 설명하겠어용 flex grid 장점 1. 유연하고 간단한 레이아웃 구성 가능 2. 반응형 웹 디자인에..
-
[Font Preload]Font를 Preload 하는 방법CSS3 2023. 11. 19. 15:48
Font Preload란? 웹 폰트의 로딩 속도를 향상시키기 위한 웹 성능 최적화 기술입니다. 로컬 폰트는 사용자의 기기에 이미 다운되어 있는 폰트를 사용하기 때문에 로딩 자체의 속도가 빠르지만, 만약 해당 폰트가 사용자의 기기에 없다면 대체 폰트를 사용하게 되어 페이지의 디자인이 깨질 수 있다는 단점이 있다. 또한 웹 폰트는 서버에서 제공되는 폰트 파일을 사용해 렌더링 하기 때문에 로딩 시간이 있다. 그래서, 웹 폰트의 단점을 보안하기 위해 Font Preload의 방법을 사용하는데, preload 속성을 사용하여 폰트 파일을 미리 다운로드 받아 놓는다면, 사이트에 방문할 때마다 폰트를 렌더링 하지 않아도 되서 로딩 속도가 항상 되는 것이다 FOIT(Flash of Invisible Text)란? 웹 ..