웹 프론트 엔드 (44) 썸네일형 리스트형 무한스크롤(infinite-scroll) 무한스크롤(infinite-scroll)이란? - 많은 양의 데이터를 편리하게 보기 위한 페이징 방법 중 하나입니다. - 페이지 하단에 도달했을 때, 일정량의 콘텐츠를 로드시켜주는 UX 방식입니다. 무한 스크롤의 장점 - 사용자 접근성 및 콘텐츠 탐색이 쉽습니다. - 모바일일때 특히 더 나은 사용자 접근성을 제공합니다. - 다음 콘텐츠 탐색을 위한 추가클릭이 없으며, 더 짧은 로드시간을 제공합니다. 무한 스크롤의 단점 - 많은양의 데이터를 다루게 되므로 페이지 성능이 점점 떨어집니다. - 맨 아래영역, footer를 확인하려면 모든 콘텐츠를 로드해야하므로 힘들어집니다. - 특정 항목을 찾기 어려우며, 원래 위치로 되돌아가기 힘듭니다. 페이지네이션과의 차이 .. flex와 grid에 대한 비교 flex 와 gridflex 와 grid 의 공통점은 프론트엔드 레이아웃을 구성하는 속성이란 점 입니다.두 속성 모두 레이아웃을 어떻게 배치할지 정할 때 사용합니다.다만, 상황에 따라 더 좋은 속성을 사용하기 위해 두 속성의 차이점을 알아보도록 하겠습니다. 두 속성의 가장 큰 차이점은 배치 방식의 차이입니다.flex : 컨테이너를 가로나 세로, 하나의 방향으로 나열하는 배치속성flex-direction으로 레이아웃의 배치 방향을 지정합니다.grid에 비해 간단한 배치가 되지만,2차원 구성에는 grid만큼 세밀하게 적용되지는 않습니다. grid : 2차원으로 구성된 격자형식 배치속성2차원 격자를 만들기 위해 grid-template 속성으로 가로와 세로를 지정하고, 각 격자별 크기를 지정할 수도 있습니다... 폰트 로딩 최적화 텍스트렌더링 지연웹 사이트에 진입하게 되면, 글자가 늦게 나타나거나, 폰트가 나중에 적용되는 현상이 일어나는 경우가 있습니다.이는, 폰트 적용이 늦게 적용되서 발생하는 상황으로, 폰트 최적화를 수행하여 최소화 할 수 있습니다. 웹 폰트 최적화 방법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.. 이전 1 2 3 4 ··· 6 다음 목록 더보기
