시맨틱필요1 HTML Semantic (시맨틱) 이해하기 쉽고 검색이 잘되게 만드는 구조 시맨틱 구조란 무엇인가? 시맨틱 구조는 의미를 전달하고 웹페이지의 구조를 정확하게 보여주는 방법입니다. 아래 그림은 Codecademy를 공부하면서 나온 사례인데요. 좌측이 Non-Semantic, 우측이 Semantic 구조입니다. 왼쪽, 오른쪽을 비교하니까 우측은 박스만 보더라도 웹페이지 구성이 어떻게 되는지 대략적으로 알 수 있네요! 시멘틱에 필요한 태그 위의 그림을 코드로 구성해본 다른 예시입니다. 모든 시맨틱 태그를 사용하지는 않았네요. : 웹 페이지 상단에 있는 소개 콘텐츠를 묶습니다 : 탐색 링크, 메뉴가 포함된 섹션입니다 : body 영역 중 메인 콘텐츠 영역입니다 : body 영역 중 하단 정보영역(푸터)를 묶습니다 : main 영역을 다시 나누어 그룹화합니다 : section과 연관된 .. 2023. 7. 12. 이전 1 다음
