웹 프론트 엔드 (42) 썸네일형 리스트형 무한스크롤(infinite-scroll) 무한스크롤(infinite-scroll)이란? - 많은 양의 데이터를 편리하게 보기 위한 페이징 방법 중 하나입니다. - 페이지 하단에 도달했을 때, 일정량의 콘텐츠를 로드시켜주는 UX 방식입니다. 무한 스크롤의 장점 - 사용자 접근성 및 콘텐츠 탐색이 쉽습니다. - 모바일일때 특히 더 나은 사용자 접근성을 제공합니다. - 다음 콘텐츠 탐색을 위한 추가클릭이 없으며, 더 짧은 로드시간을 제공합니다. 무한 스크롤의 단점 - 많은양의 데이터를 다루게 되므로 페이지 성능이 점점 떨어집니다. - 맨 아래영역, footer를 확인하려면 모든 콘텐츠를 로드해야하므로 힘들어집니다. - 특정 항목을 찾기 어려우며, 원래 위치로 되돌아가기 힘듭니다. 페이지네이션과의 차이 .. 폰트 로딩 최적화 텍스트렌더링 지연웹 사이트에 진입하게 되면, 글자가 늦게 나타나거나, 폰트가 나중에 적용되는 현상이 일어나는 경우가 있습니다.이는, 폰트 적용이 늦게 적용되서 발생하는 상황으로, 폰트 최적화를 수행하여 최소화 할 수 있습니다. 웹 폰트 최적화 방법1) Font PreLoading ( 폰트 미리 로드하기 )Font PreLoading이란?웹 페이지 폰트를 외부 폰트로 설정하는 경우, 텍스트 렌더링까지 시간이 걸리는 경우가 있습니다.Font Preloading 은 이를 우선적으로 수행하여 텍스트렌더링 지연시간을 최소화 할 수 있게 합니다. Font Preload 적용방법1-1. HTML - HTML 섹션에 코드를 추가하는 방법입니다. - link 요소에서 rel 속성을 preload로 a.. Sass(Scss) 더 알아보기 Sass 7-1 패턴 - 7개의 폴더, 1개의 파일 이란 뜻으로, 7개의 폴더를 나눠 최종 산출물을 한 파일로 만든다는 뜻입니다. - 다른 프레임워크에서는 프레임워크에 맞춰 작업하기도 합니다. - 7 folder 1) base/ : 가장 기본이 되는 스타일이 들어가있습니다. 2) components/ : 버튼이나 드롭다운 등 각각의 스타일을 정의합니다. 3) layout/ : header, footer, sidebar 등의 레이아웃 스타일을 관리합니다. 4) pages/ : component와 layout을 묶어 페이지의 스타일을 관리합니다. 5) themes/ : 다크모드 등의 테마를 관리합니다. 6) abstracts/ : Sass 함수, 변수 등을 관리합니다. 7) vendors/ : bootstr.. SASS https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com Sass 란? Syntactically Awesome StyleSheets 의 약자로, 컴파일에서 Css 파일을 만드는 스타일 시트 언어입니다. Sass를 사용함으로서, 가독성, 유지보수, 성능, 중복코드 방지 등 다양한 면에서 이점을 얻을 수 있습니다. - nesting 구조 /* css */ p{ color: red; } p span { color: blue; } a:hover, a:.. CSS 반응형 디자인 PC와 모바일의 화면 비율은 다릅니다. 따라서 PC에 맞춘 웹 디자인은 모바일에서 보기 적합하지 않습니다. 반면, 모바일에 맞춘 웹 디자인 또한 PC에서 사용하기는 적합하지 않은경우가 많습니다. 따라서 화면의 비율에 따라 디자인이 바뀌는것을 반응형 디자인이라고 합니다. 다른 디자인 방법으로는 적응형디자인이 존재하는데, 적응형 디자인 같은 경우는 디바이스에 따라 웹 페이지를 따로 만드는 한편, 반응형 디자인은 웹의 크기에 따라 디자인이 변화합니다. Media Query - @media @media media-type and {media-feature-rule} { /* CSS rules */ } /* 예시 */ body{ background-color: blanchedalmond; } @media scre.. CSS Grid - 단위 fr - fraction, grid의 가로 길이와 세로의 길이를 비율로 나눌때 사용합니다. - 1:3:2 의 비율로 grid를 구성하려면 1fr 3fr 2fr 의 형식으로 만들 수 있습니다. - 절대길이와 함께 명시한다면, 남은 길이를 나눠갖게 됩니다. 예를 들어 100px 1fr 2fr 이라고 하면 100px을 제외한 나머지 길이를 1:2 로 나눠갖게 됩니다. min-content - 최소 content, 가장 최소한으로 차지할 수 있는 길이값입니다. - 내부 item의 크기에 딱 맞는 크기의 값만큼만 할당됩니다. mas-content - 최대 content, 차지할 수 있는 최대한의 크기를 지정할 때 사용합니다. - 부모값에서 가장 최대한으로 차지할 수 있는 값을 얻습니다. grid-template-.. CSS Grid - 단일 아이템 속성 grid-row & grid-column /* 1행부터 3행까지 차지하는 item */ grid-row-start : 1; grid-row-end: 4; /* 4행까지 늘어나는 item */ grid-row-start: span 4; /* grid 이름을 이용한 확장 */ grid-row-start: [grid_name] 2; - grid-[ row | column ]-start 와 grid-[ row | column ]-end 의 단축속성입니다. - grid의 선을 기준으로 작동합니다. grid-row-start & grid-column-start - 행/열 내 item에 설정하는 옵션입니다. - 지정한 숫자의 선이 item의 시작을 의미합니다. - n 번째 행/열부터 시작하는 item을 지정하려면 n.. CSS Grid - 컨테이너 설정 justify-content & align-content - 바깥쪽 컨테이너가 안쪽 컨테이너보다 커서 남는 여백이 존재해야 적용됩니다. - flex 레이아웃에서는 각자 주축/교차축 에 대한 정렬방법을 지정했습니다. - grid 레이아웃에서는 행 / 열에 대한 item들의 배치방법을 결정합니다. justify-content - columns의 배치 방법을 설정합니다. - start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용할 수 있습니다. align-items - rows의 배치 방법을 결정합니다. - start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용.. 이전 1 2 3 4 ··· 6 다음
