본문 바로가기

전체 글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.
BEM으로 클래스명 정하기 장점: - 가독성이 뛰어나다. - 재사용성이 높다. - 유지보수가 쉽다. - 검색 엔진 최적화(SEO)에 도움이 된다. 단점: - 클래스 이름이 길어질 수 있다. - 다른 클래스 네이밍 규칙과 다르므로 협업 시 일관성 유지가 어렵다. - 모든 프로젝트에 적용하기에는 지나치게 복잡할 수 있다.BEM은 무엇인가요?BEM(Block Element Modifier)은 웹 개발에서 사용되는 CSS 클래스 네이밍 규칙 중 하나입니다. BEM은 모듈식 CSS 아키텍처를 사용하여 CSS 클래스 이름을 구조화합니다. 클래스 이름은 블록, 요소 및 수정자로 구성됩니다.BEM의 명명규칙[block]__[element]--[modifier]블록(Block): 페이지 상에서 독립적으로 존재하는 블록의 이름을 나타냅니다.블록 이.. 2023. 4. 28.
이미지 포맷선택 (jpg, png, webp, avif ), webp/avif로 변환하는 방법 (SEO) 이미지 형식(jpg, png, webp, avif)은 모두 다른 특징과 용도를 가지고 있습니다. 각각의 장단점과 SEO 관점에서 어떤 것이 좋은지, 그리고 크로스 브라우징 방법에 대해 설명해보겠습니다. JPG(JPEG) JPG(JPEG)은 손실 압축 이미지 형식으로, 색상 수를 줄이면서 파일 크기를 줄입니다. 이는 대부분의 사진에 적합합니다. JPG 이미지는 압축률을 높일수록 이미지 품질이 떨어지므로, 이미지 품질이 중요한 경우에는 PNG, WebP, AVIF 형식을 고려해보는 것이 좋습니다. 장점: 파일 크기를 줄일 수 있습니다. 대부분의 브라우저에서 지원됩니다. 단점: 손실 압축 방식으로 이미지 품질이 떨어질 수 있습니다. 투명도를 지원하지 않습니다. PNG PNG는 비손실 압축 이미지 형식으로, 투.. 2023. 4. 28.

티스토리툴바