전체 글22 웹성능최적화를 위한 <picture> 태그 사용법 요소는 다양한 이미지 형식을 지원하는 웹 페이지에서 사용되는 HTML 태그입니다. 이 요소를 사용하면 웹 페이지에서 다양한 미디어 쿼리를 사용하여 브라우저에서 지원하는 이미지 형식을 감지하고, 해당 이미지 형식으로 최적화된 이미지를 제공할 수 있습니다. 요소는 요소와 유사하지만, 이미지 파일의 경로를 직접 지정하는 대신, 요소를 사용하여 이미지 파일의 경로와 해당 이미지 형식을 지정합니다. 예를 들어, 다음과 같은 요소는 WebP와 JPEG 이미지를 모두 지원하는 웹 페이지에서 사용할 수 있습니다. 위의 코드에서, 요소에서 type 속성을 사용하여 이미지 형식을 지정하고, srcset 속성을 사용하여 해당 이미지 형식의 최적화된 이미지 파일 경로를 지정합니다. 요소에서는 src 속성을 사용하여 모든 브라.. 2023. 5. 6. CLS의 원인과 해결 방법1 - FOIT / FOUT CLS(Cumulative Layout Shift)는 웹 페이지의 시각적 안정성을 나타내는 지표입니다. 페이지가 로드될 때 레이아웃이 변경되는 정도를 측정하며, 이를 계산할 때는 뷰포트에서 발생한 모든 레이아웃 변화의 크기와 빈도를 곱한 값을 누적하여 계산합니다. CLS는 사용자 경험을 크게 저해할 수 있으므로 최소화해야 합니다. 다음은 CLS를 발생시키는 사례입니다. DOM 추가 DOM(Document Object Model)은 웹 페이지의 구조를 나타내는 계층 구조로, 웹 페이지의 HTML 요소를 표현합니다. 웹 페이지가 로드될 때 JavaScript를 사용하여 DOM 요소를 동적으로 추가하면, 이전에 로드된 콘텐츠와 충돌하여 레이아웃 변화가 발생할 수 있습니다. 이러한 경우에는 미리 요소의 크기를 .. 2023. 5. 5. css 가상선택자 :where(), :is() CSS에서의 :where()와 :is()는 CSS 선택자에서 사용할 수 있는 가상 선택자입니다. :where() where() 가상 선택자는 CSS의 범용 선택자(*)와 비슷한 역할을 합니다. 그러나 where()는 구체성이 없는 선택자(*)와 달리 구체성을 지정할 수 있습니다. where() 내부의 선택자가 모두 참인 경우, 해당 요소에 스타일이 적용됩니다. where()를 사용하여 규칙의 중복을 줄이고 선택자의 가독성을 향상시킬 수 있습니다. 예시: /* 두 선택자 모두 적용됨 */ :where(h1, h2, h3, h4, h5, h6) { color: red; } /* h1 요소에만 적용됨 */ h1:where(:not(.no-color)) { color: blue; } 위 예시에서 첫 번째 규칙은.. 2023. 4. 29. css 작성법 (expanded, compact, nested, compressed) CSS(카스케이딩 스타일 시트)는 HTML 요소들의 스타일을 정의하고 적용하는 데 사용되는 스타일 시트 언어입니다. 여러 가지 작성 방법이 있습니다. CSS 는 아래와 같이 네가지의 작성법이 있습니다. Expanded Expanded 방법은 각각의 스타일 규칙을 개별적으로 작성하는 방법입니다. 각 스타일 규칙은 하나의 라인에 작성되며, 속성은 콜론(:)으로 구분됩니다. 또한 각 스타일 규칙은 세미콜론(;)으로 끝나야 합니다. 장점: 가독성이 좋아 유지보수가 쉽고 코드를 이해하기 쉽습니다. 단점: 코드 양이 많아 파일 크기가 크며, 로딩 속도가 느려질 수 있습니다. .container { width: 100%; margin: 0 auto; padding: 20px; background-color: #f2f.. 2023. 4. 29. 이전 1 2 3 4 ··· 6 다음
