프론트엔드/HTML 심화4 HTML과 SEO: 웹사이트 최적화의 기본 최종 수정 : 2025.05.09HTML과 SEOHTML (HyperText Markup Language)웹페이지의 구조와 내용을 정의하는 마크업 언어검색 엔진 최적화(SEO)의 기반이 된다. SEO (Search Engine Organization)검색 엔진은 웹사이트의 HTML 코드를 크롤링하고 분석하여 콘텐츠의 의미와 관련성을 파악한다.■ SEO를 위한 HTML 핵심 요소1) 타이틀 태그SEO에서 가장 중요한 요소 중 하나핵심 키워드가 포함된 간결하고 설명적인 제목 | 브랜드명 2) 메타 설명 태그검색 결과 페이지에 표시되는 설명문 3) 해딩 태그의 계층적 구조검색 엔진은 제목 태그를 통해 콘텐츠의 구조와 중요도를 파악한다.페이지의 주제목 (페이지당 하나만 사용)주요 섹션 제목 하위 섹션 제목 .. 2025. 5. 9. HTML의 ARIA 속성 최종 수정 : 2025.05.09HTML의 ARIA 속성AIRA(Accessible Rich Internet Applications)W3C의 웹 접근성 이니셔티브(WAI)에서 개발한 기술 사양동적 콘텐츠와 복잡한 사용자 인터페이스를 보저 기술(스크린 리더 등)을 사용하는 사람들에게도 접근 가능하게 만든다.특히 JS로 만든 동적 콘텐츠나 표준 HTML만으로는 접근성을 완벽하기 보장하기 어려운 복잡한 위젯에서 중요■ ARIA 사용의 5가지 핵심 원칙1) 기본 HTML 우선가능하다면 ARIA보다 시맨틱 HTML 요소를 먼저 사용하라.클릭클릭 2) 필요할 때만 사용접근성이 이미 잘 구현된 요소에는 불필요하다. 3) 키보드 접근성 보장사용자 인터렉션이 필요한 ARIA요소는 키보드로 조작 가능해야 한다.제출 4) .. 2025. 5. 9. input 태그에 대한 공부 최종 수정 : 2024-04-02 input의 특징 form 태그 안에서 label태그와 함께 작성하는 것이 좋다. label 태그의 for의 속성 값과 input의 id 속성 값을 갖게 설정해줘야, 화면리더기에 하나의 쌍으로 해석한다. content 자주 사용하는 타입 분류 타입 이름 설명 입력 text 기본 타입 email text 타입처럼 보이지만, 유효성 검사 및 여러 기기에 동적 키보드를 지원 password 값이 가려진 텍스트 필드 사이트가 안전하지 않은 경우 경고창을 띄어준다. 값 선택 checkbox 하나의 값에 대한 선택여부를 체크 radio 여러 값에 대한 선택 날짜 선택 date 날짜 선택 업로드 file 파일을 업로드할 수 있도록 지원 image 사진을 업도드할 수 있도록 지원 버튼.. 2024. 4. 1. 메타 태그(meta tag) 최종 수정일 : 2024-03-31 메타 태그를 공부하기 해서는 head 태그에 대한 이해가 필요하다. HTML의 구조를 이루는 태그 중 많은 태그는 속성으로 http-equiv, charset, name, content를 갖는다. http-euqiv="항목명" - 웹 브라우저가 서버에 내리는 속성 - name 속성을 대신하여 사용될 수 있다. content="정보 값" charset="값" - HTML5에서 추가됐다. 이전에는 http-equiv="UTF-8"로 작성했다. name="정보 이름" - 지정하지 않으면 http-equiv와 같은 기능을 한다. - 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려준다. - 종류 Keywords : 검색 엔진에 검색되는 단어를 지정 Description : 검.. 2024. 3. 31. 이전 1 다음