[TIL] 9.30

1. Design Pattern

 

디자인 패턴의 유형 정리
https://daunje0.tistory.com/156

[Design Patterns] 0. 디자인 패턴의 유형, 간단 설명

 

2. CSS

 

2-1 ) 화면을 좌우 중앙에 위치하게 하는 법

- 좌우 margin auto

<div class="container" >
	좌우 중앙 정렬 시킬 모든 태그들
<div>

 

<style>
.container{
  width: 800px;
  margin: 0 auto; // 요소가 2개만 있으면 첫번째가 상하, 두번째가 좌우 
  margin-left: auto;
  margin-right: auto;  // 4번라인은 5, 6 번 라인의 단축표현이다
}
</ style>

 

 

 

2-2) 버튼 태그 border  ( border: none )

https://daunje0.tistory.com/158

[CSS] button border ( border: none )

 

3. 이미지 최적화 방법

3-1. 적절한 이미지 형식 선택

 

• JPEG: 사진이나 그라데이션이 있는 이미지에 적합
• PNG: 투명도가 필요한 이미지나 텍스트가 포함된 이미지에 적합
• WebP: 최신 브라우저에서 지원되며 높은 압축률 제공
• SVG: 로고나 아이콘 등 벡터 그래픽에 적합

 

웹WebP는 JPEG나 PNG 에 비해 약 30% 전후의 압축률을 보여줍니다

 

장점

1. 압축률이 높음:
   JPEG나 PNG에 비해 더 작은 파일 크기로 비슷한 화질을 유지할 수 있습니다.
   웹 페이지 로딩 속도를 향상시킬 수 있습니다.
2. 손실/무손실 압축 지원:
   용도에 따라 손실 또는 무손실 압축을 선택할 수 있습니다.
3. 애니메이션 지원:
   GIF와 같이 애니메이션을 지원하면서도 더 나은 압축률을 제공합니다.
4. 알파 채널 지원:
   PNG처럼 투명도를 지원하면서도 더 작은 파일 크기를 유지합니다.

단점

1. 브라우저 호환성:
   일부 오래된 브라우저에서는 지원되지 않을 수 있습니다.
   IE에서는 지원되지 않습니다.
2. 편집의 어려움:
   일반적인 이미지 편집 도구에서 WebP 형식을 직접 지원하지 않는 경우가 많습니다.
3. 품질 손실:
   높은 압축률을 위해 손실 압축을 사용할 경우 이미지 품질이 저하될 수 있습니다.
4. 인코딩/디코딩 시간:
   다른 형식에 비해 인코딩과 디코딩에 더 많은 시간이 소요될 수 있습니다.
5. 메타데이터 제한:
   EXIF 데이터와 같은 메타데이터 지원이 제한적일 수 있습니다.

3-2) 반응형 이미지 사용

https://daunje0.tistory.com/159

[HTML] srcset 속성이란?