웹 페이지의 성능을 향상하기 위한 방법 중 하나로, 폰트를 선택적으로 미리 불러옴으로써 다운로드 시간을 단축한다.

 

 

로컬 폰트 로딩

로컬에 폰트 파일이 이미 있는 경우, CSS를 통해 폰트 파일을 불러온다.

@font-face {
  font-family: 'MyLocalFont'; /* 원하는 폰트 이름 */
  src: url('path/roboto.woff2') format('woff2'), /* 웹킷 브라우저를 위한 포맷 */
       url('path.roboto.woff') format('woff'); /* 대부분의 브라우저를 위한 포맷 */
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyLocalFont', sans-serif; /* 로컬 폰트를 기본 폰트로 설정 */
}

 

웹 폰트 로딩

웹 폰트 서비스 (예: Google Fonts, Adobe Fonts 등)를 사용하여 웹 폰트를 불러온다.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

/*display=swap : 웹 페이지의 텍스트 내용이 렌더링되는 동안 사용자에게 기본 폰트로 적용되게 하는 기능*/

 

3. HTML 문서의 head 태그 내 preload 링크를 사용

 

웹 페이지의 성능을 최적화하기 위해 폰트를 미리 불러온다.

<link> 태그의 rel="preload" 속성을 사용한다.

 

<head>
<link rel="preload" href="/roboto.woff2" as="font" type="font/woff2">

<!-- preload 함으로써 FOUT(Flash of Unstyled Text)현상을 방지한다. -->

</head>

 

브라우저는 폰트 스타일 시트를 먼저 로드하고, 페이지가 렌더링될 때 해당 폰트 스타일이 적용된다.

 

*FOUT(Flash of Unstyled Text) : 폰트가 로딩되기 전 텍스트 내용이 보여지는 현상.

'개념 정리' 카테고리의 다른 글

반응형 작업과 mediaquery 최소화  (0) 2024.01.21
CSS 애니메이션 최적화  (0) 2024.01.21
CSS 3D 활용  (0) 2024.01.21
자바스크립트의 배열  (0) 2024.01.08
시멘틱 태그와 웹 표준  (0) 2023.12.26

 

 

 

자바스크립트의 배열

 

 

 

 

'배열' 이라는 번역어보다 loop로 이해하니 좀 더 빠르게 숙지할 수 있었다.

 

 

 

 

 

for : 가장 기본적인 loop. 배열의 각 요소에 대해 반복문을 수행한다.

for (let i = 0;   // i 라는 변수를 0으로 초기화. i는 arr의 index. 반복문의 시작점 설정 //
     i < arr.length;  // 반복문의 조건. arr.length는 arr의 요소 개수. // 
     i++) {      // 반복문이 끝날 때마다 i의 값이 1씩 증가. 다음 배열로 이동. //
 console.log(arr[i]);  // arr[i]는 배열 arr의 i번째 요소를 참조. //
}

 

 

forEach : 배열의 각 요소에 지정된 함수를 실행한다. (콜백 함수를 인자로 받는다.)

arr.forEach(function(element)) {
  console.log(element);
});

 

 

map : 배열의 모든 요소에 새로운 배열을 생성한다.

const newArr = arr.map(function(element)) {  // function(element)는 map에 전달되는 콜백함수. //
   return element * 2;  // 콜백함수 내부에서 실행되는 코드. 반환된 값은 새로운 배열로 저장된다. //
});

 

 

some : 배열의 요소 중 하나라도 조건을 만족하면 true를 반환한다.

const hasNegative = arr.some(function(element)) {
	return element < 0;   // 현재 요소 element가 0보다 작으면 true, 아니면 false //
});

 

 

every : 배열의 모든 요소가 조건을 만족하면 true를 반환한다.

const allPositive = arr.every(function(element) {
	return element > 0;
});

 

 

filter : 주어진 함수의 조건을 만족하는 모든 요소를 포함하는 새로운 배열을 반환한다.

const postitiveNumbers = arr.filter(function(element)) {
	return element > 0;
});

 

 

reduce : 배열의 모든 요소에 대해 콜백 함수를 실행하고, 하나의 결과값을 반환한다. (주로 배열의 요소를 합치거나 변형할 때 사용한다)

const sum = arr.reduce(function(accumulator, currentValue)) {
	return accumulator + currentValue;
}, 0);      // 초기값 0부터 시작하도록 설정 //

'개념 정리' 카테고리의 다른 글

반응형 작업과 mediaquery 최소화  (0) 2024.01.21
CSS 애니메이션 최적화  (0) 2024.01.21
CSS 3D 활용  (0) 2024.01.21
Font의 Preload  (0) 2024.01.12
시멘틱 태그와 웹 표준  (0) 2023.12.26

Semantic Tag

Semantic Web이란 의미론적 웹, 즉 직관적인 의미를 부여하여 데이터를 정리하는 개념이다.

사람과 기계가 모두 이해할 수 있는 데이터 구축이 목표이기 때문에, HTML5 와 같은 마크업 언어를 통해 문서의 의미를 보다 명시적이고 직관적인 용어로 전달한다.

 

위와 같은 이유로 Semantic Tag는

  • 직관적인 구조를 통해 콘텐츠를 정의함으로써, 코드의 의미를 쉽게 이해할 수 있다.
  • 우수한 가독성으로 유지 및 보수가 용이하다.
  • 스크린 리더 등 보조 기술이 해당 웹페이지를 읽도록 하는 등 접근성이 높다.
  • 검색 엔진이 콘텐츠를 이해하고 색인화할 수 있어, 검색 엔진의 최적화를 돕는다.

등의 장점을 가진다.

 

웹 표준

W3C (표준화 단체) 가 정한 표준안에 따른 웹 페이지 작성법.

OS, 또는 브라우저의 종류 및 버전과 관계 없이 기술을 동일하게 호환시키는 기술을 말한다. 

  • 다양한 웹 브라우저에서 동일한 기능에 접근할 수 있다.
  • 다양한 장비에 대응할 수 있어, 접근성을 향상한다.
  • HTML과 CSS를 분리하여 유지 및 보수의 효율성이 증가한다.
  • 오래된 브라우저에서도 컨텐츠를 읽을 수 있다.

'개념 정리' 카테고리의 다른 글

반응형 작업과 mediaquery 최소화  (0) 2024.01.21
CSS 애니메이션 최적화  (0) 2024.01.21
CSS 3D 활용  (0) 2024.01.21
Font의 Preload  (0) 2024.01.12
자바스크립트의 배열  (0) 2024.01.08

+ Recent posts

티스토리툴바