시맨틱 웹?
기존 웹을 확장하여 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것
- SEO(검색엔진 최적화: Search Engine Optimization)
- 웹사이트는 검색엔진 노출이 매우 중요
- 검색엔진은 매일 전 세계의 웹사이트를 크롤링하며 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 인덱싱한다.
- 크롤링 : 로봇(Robot)이라는 프로그램을 통해 웹사이트의 정보를 수집
- 인덱싱 : 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만듦
=> 이때 HTML의 시맨틱 요소를 해석함
시맨틱 태그?
- 웹 페이지의 레이아웃만을 위한 별도의 태그 (Semantic : 의미)
- 개발자가 의도한 요소의 의미가 명확히 드러남
- 코드의 가독성과 유지보수가 쉽다
header: 헤더,nav: 네비게이션,section: 본문의 내용(article)을 포함하는 그룹덩어리,article: 본문의 주 내용 공간,footer: 푸터... 등...
예 ) 이미지를 넣는 두가지 방법
1. <img>태그를 이용
- 이미지가 의미가 있을 때
- 시맨틱 태그로 컴퓨터와 인간이 이미지라는것을 쉽게 알아볼 수 있음
- alt속성을 통해 이미지를 표시할 수 없을경우 대체 텍스트로 보여줌(이미지 최적화)
=> 웹 접근성 : 비장애인들은 이미지를 보면서 시각적으로 내용 인식이 되지만 시각적으로 인식이 불가능한 사용자들은 스크린 리더를 통해 청각적으로 내용을 인식할 수 있도록 text를 통해 도와줌
2. <div>와 같은 요소에 background-image를 이용
- 주로 배경으로 들어가며 화면 판독기는 구문 분석을 할 수 없으며 순전히 장식이어야 함
=> 스크린 리더는 배경이미지의 존재 유무도 알려주지 않음으로, 중요한 내용은 HTML 페이지의 일부여야 하며 배경에 포함되지 않아야 함 - 이미지 스프라이트 기법을 사용하여 수정이 편하고 이미지 용량이 줄어든다
=> 이미지 스프라이트 : 다수의 이미지를 하나의 이미지에 포함, 좌표과 크기지정을 통해 추출, repeat 속성으로 패턴으로 사용도 가능
공부하며 정리&기록하는 ._. 씅로그
Front-end