본문 바로가기
728x90
반응형

전체 글166

[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.
[SEO] 검색엔진 최적화 확인하는 방법 (Lighthouse) 목 차1. Lighthouse 확장 프로그램2. Lighthouse 설치3. Lighthouse 사용 방법4. 주요 기능4-1. 성능 (Performance)4-2. 접근성 (Accessibility)4-3. Best Practices4-4. SEO (Search Engine Optimization)4-5. 진보적 웹 애플리케이션 (Progressive Web App, PWA)5. 요약 1. Lighthouse 확장 프로그램 Lighthouse는 구글 크롬에 내장된 오픈 소스 자동화 도구로, 웹 페이지의 성능, 접근성, SEO(검색 엔진 최적화) 등을 분석하고 개선할 수 있는 권장 사항을 제공하는 확장 프로그램입니다. 주로 웹 개발자와 디지털 마케터가 페이지 최적화를 위해 사용하며, 웹 애플리케이션이나 .. 2024. 10. 16.
728x90
반응형

티스토리툴바