본문 바로가기
728x90

분류 전체보기197

[검색엔진 최적화] JPG, PNG 파일을 WEBP로 무료 변환하는 방법 목 차1. WebP 파일이란?2. 특징2-1. 압축 방식2-2. 투명도 지원2-3. 애니메이션 지원2-4. 색상 표현2-5. 빠른 로딩3. 무료 변환 사이트 추천 1. WebP 파일이란? WebP는 Google이 개발한 이미지 파일 형식으로, 효율적인 압축을 통해 더 작은 파일 크기와 우수한 이미지 품질을 제공하는 것이 특징입니다. WebP 형식은 특히 웹 환경에서 이미지 로드 속도를 개선하고 대역폭을 절약할 수 있는 최적화된 이미지 포맷으로 사용됩니다.'차세대 형식을 사용해 이미지 제공하기', ' WebP 및 AVIF와 같은 이미지 형식은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다.'구글 검색엔진 최적화(SEO)에 요구되는 이미지 파일 형식입니다.   2. 특.. 2024. 10. 22.
[HTML] img 태그 목 차1. img 태그란?2. 속성2-1. src (source)2-2. alt (alternative text)2-3. width, height2-4. loading2-5. title2-6. srcset, sizes2-7. usemap, ismap3. 마무리 1. img 태그란?HTML의 태그는 웹 페이지에 이미지를 삽입할 때 사용됩니다. 이 태그는 단일 태그로 닫기 태그가 없습니다. 태그는 웹 페이지에 이미지 파일을 포함시킬 수 있는 가장 기본적인 방법입니다.  2. 속성2-1. src (source)이미지를 표시할 경로를 지정하는 필수 속성입니다.상대 경로 또는 절대 경로를 사용할 수 있습니다. 2-2. alt (alternative text)이미지가 로드되지 않거나 시각장애인이 화면 리더기를 .. 2024. 10. 21.
[HTML] ol 태그 목 차1. ol 태그란?2. 기본 구조3. 속성3-1. type 속성3-1-1. 기본값 (숫자 1, 2, 3, ...)3-1-2. 대문자 알파벳 (A, B, C, ...)3-1-3. 소문자 알파벳 (a, b, c, ...)3-1-4. 로마 숫자 대문자 (I, II, III, ...)3-1-5. 로마 숫자 소문자 (i, ii, iii, ...)3-2. start 속성3-3. reversed 속성4. CSS 스타일링4-1. decimal: 숫자 (기본값)4-2. decimal-leading-zero: 01, 02, 03과 같이 0으로 시작하는 숫자4-3. lower-alpha: 소문자 알파벳 (a, b, c)4-4. upper-alpha: 대문자 알파벳 (A, B, C)4-5. lower-roman: 소문자.. 2024. 10. 20.
[HTML] ul 태그 목 차1. ul 태그란?2. 기본 구조3. CSS 스타일링3-1. 기본 불릿 (●)3-2. 사각형 (■)3-3. 원형 (○)3-4. 불릿 없음4. 중첩 사용5. 마무리 1. ul 태그란?HTML의 ul 태그는 "순서가 없는 목록"(unordered list)을 생성할 때 사용하는 태그입니다. 이 태그는 항목의 순서가 중요하지 않은 목록을 표시할 때 적합하며, 각 항목은 보통 점(bullet)으로 표시됩니다. ul 태그는 목록 안에 여러 개의 li 태그(목록 항목)를 포함합니다.  2. 기본 구조 첫 번째 항목 두 번째 항목 세 번째 항목  3. CSS 스타일링 ul 태그 자체에는 특별한 속성이 없지만, 자주 사용되는 CSS 스타일 속성을 통해 목록의 모양을 다양하게 변경할 수 있습니다. 3-1. 기.. 2024. 10. 19.
[티스토리 글쓰기] 목차 만들기 (라이브러리 추가 없음) 목 차1. 시작하기 전에2. 티스토리 서식 만들기2-1. 서식 관리 페이지2-2. 서식 글쓰기 HTML 작성 모드3. 목차 적용해서 글쓰기4. 완성하기 1. 시작하기 전에검색엔진 상단 노출을 위해 찾아보던 중에 검색엔진 최적화(SEO) 작업에 글쓰기 할 때 목차를 작성하라는 내용의 글들이 많아 만들어 보기로 했다.티스토리에서 글쓰기 할 때 목차를 만드는 방법이 여러 가지 있었지만 검색엔지 최적화(SEO) 작업을 하고 있는 내 블로그에 굳이 라이브러리를 추가하면서까지 만들고 싶지 않았다.따라서 나는 그냥 자동적으로 생성되는 방식은 아니지만 누구나 충분히 커스텀 할 수 있는 목차를 만들어 보기로 했다.  2. 티스토리 서식 만들기2-1. 서식 관리 페이지[티스토리 관리자] - [서식 관리] 메뉴 우측 상단 .. 2024. 10. 18.
웹사이트 모바일 화면 확대/축소 설정하기 목 차1. Lighthouse 보고서2. 태그3. Viewport 태그의 주요 속성3-1. initial-scale3-2. maximum-scale & minimum-scale3-3. user-scalable4. HTML 적용하기5. 테스트 1. Lighthouse 보고서[user-scalable="no"]이(가) 요소에서 사용되거나 [maximum-scale] 속성이 5보다 작음모바일에서 웹사이트를 접속하여 확대/축소를 해보면 동작하지 않고 있었습니다.Lighthouse 보고서 설치 방법  2.  태그HTML 문서에서 페이지의 레이아웃을 다양한 기기에서 올바르게 표시하기 위해 사용되는 중요한 요소입니다. 특히 모바일 기기와 같이 화면 크기가 다양한 환경에서 페이지를 최적화하는 데 필수적인 역할을 합.. 2024. 10. 17.
728x90

티스토리툴바