Flex를 사용하는 경우

1. 요소와 내부 아이템을 수직, 수평 정렬할 때 (justify-content, align-items 등)

2. 유연한 크기 조절이 필요할 때 (flex-grow, flex-shrink 등)

3. 아이템의 순서를 동적으로 변경할 필요가 있을 때 (order)

 

 

Grid를 사용하는 경우

1. 비교적 유연하지 않고 복잡하며, 고정된 레이아웃이 필요할 때

2. 화면을 큰 단위로 분할할 때

3. 요소와 내부 아이템을 수직, 수평 정렬할 때 (justify-item, align-items 등)

4. 라인 기반의 위치 지정이 필요할 때

 

순서에 맞춰 작성하기

보통 작은 화면 (모바일 등) 에서 큰 화면 (모니터 등) 순으로 작성한다.

/* Small device */
@media only screen and (max-width: 600px) {
    /* 스타일 작성*/
}

/* Medium device */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* 스타일 작성 */
}

/* Large device */
@media only screen and (min-width: 1025px) {
    /* 스타일 작성 */
}

 

최소 너비 (min-width) 사용

@media only screen and (max-width: 600px) {
    /* 스타일 작성*/
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* 스타일 작성*/
}

@media only screen and (min-width: 1025px) {
    /* 스타일 작성 */
}

 

공통된 미디어 쿼리로 스타일 공유

/* 공통 스타일 */
@media only screen and (max-width: 600px),
       only screen and (min-width: 601px) and (max-width: 1024px),
       only screen and (min-width: 1025px) {
    /* 스타일 작성*/
}

/* 나머지  스타일 추가 */
@media only screen and (max-width: 600px) {
    /* 추가 스타일 */
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* 추가 스타일 */
}

@media only screen and (min-width: 1025px) {
    /* 추가 스타일 */
}

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

HTML의 noreferrer, nopener, nofollow  (0) 2024.01.21
Flex와 Grid  (0) 2024.01.21
CSS 애니메이션 최적화  (0) 2024.01.21
CSS 3D 활용  (0) 2024.01.21
Font의 Preload  (0) 2024.01.12

 

하드웨어 가속 활용

애니메이션 대상에 Transform 속성, Opacity 등을 명시적으로 사용하여 GPU 가속을 활용한다.

 

최적화된 이미지 사용

PNG, JPG 등 지원되는 형식과 적합한 크기 및 해상도의 이미지를 사용한다.

 

과한 애니메이션 조절

지나치게 많은 애니메이션을 동시에 실행하지 않도록 필요한 애니메이션을 선택한다.

 

will-change 속성 활용

브라우저에게 요소가 변경할 속성에 대해 미리 알려주어 성능을 향상시킨다.

.box {
	will-change : transform;
}

 

자바스크립트 requestAnimationFrame 활용

브라우저의 리페인트 주기에 맞춰 애니메이션을 업테이트하여 보다 부드럽게 표현한다.

function animate() {
    requestAnimationFrame(animate);
}
animate();

 

애니메이션 속도 조절

transition-timing-function으로 속도를 조절한다.

.animated-element {
    transition-timing-function: ease-in;
}
.animated-element {
    transition-timing-function: ease-out;
}
.animated-element {
    transition-timing-function: ease-in-out;
}

 

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

Flex와 Grid  (0) 2024.01.21
반응형 작업과 mediaquery 최소화  (0) 2024.01.21
CSS 3D 활용  (0) 2024.01.21
Font의 Preload  (0) 2024.01.12
자바스크립트의 배열  (0) 2024.01.08

 

Transform 3D

 

X축 (가로) 과 Y축 (세로) 에 더불어

사용자가 화면을 보는 방향, 즉 눈과 모니터 방향의 축이 Z축이다.

스크린 표면이 0점이라고 가정한다면, 모니터 방향이 음수, 사용자 방향이 양수이다.

 

이를 통해 3차원 애니메이션을 구현할 수 있다.

 

또한 Perspective 값으로 원근감을 표현할 수 있다.

Z > 0 일 때 Othographic에 가까워지고, Z < 0 일 때 왜곡도가 높아진다.

 

perspective : none; /*원근 없음*/
persepective : 100px; /*100px 바깥에 사용자가 있다고 가정하여 원근 표현*/
perspective-origin : 50% 50%; /*부여된 값으로 원근 효과의 기준점을 지정. (50% 50%이 default)*/

backface-visibility : visible; /* = backface cull */
backface-visibility : hidden /* = show backface */

/*사용 예*/
.box {
    transform: rotateY(45deg) translateZ(100px);
}

 

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

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

 

 

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

 

 

로컬 폰트 로딩

로컬에 폰트 파일이 이미 있는 경우, 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