시맨틱구조2 HTML Semantic (시맨틱) 이해하기 쉽고 검색이 잘되게 만드는 구조 시맨틱 구조란 무엇인가? 시맨틱 구조는 의미를 전달하고 웹페이지의 구조를 정확하게 보여주는 방법입니다. 아래 그림은 Codecademy를 공부하면서 나온 사례인데요. 좌측이 Non-Semantic, 우측이 Semantic 구조입니다. 왼쪽, 오른쪽을 비교하니까 우측은 박스만 보더라도 웹페이지 구성이 어떻게 되는지 대략적으로 알 수 있네요! 시멘틱에 필요한 태그 위의 그림을 코드로 구성해본 다른 예시입니다. 모든 시맨틱 태그를 사용하지는 않았네요. : 웹 페이지 상단에 있는 소개 콘텐츠를 묶습니다 : 탐색 링크, 메뉴가 포함된 섹션입니다 : body 영역 중 메인 콘텐츠 영역입니다 : body 영역 중 하단 정보영역(푸터)를 묶습니다 : main 영역을 다시 나누어 그룹화합니다 : section과 연관된 .. 2023. 7. 12. HTML P 태그, 글을 구조화하고 가독성을 높이는 도구 P 태그란? 단락(paragraph)을 정의하는 데 사용됩니다. 태그는 텍스트를 단락으로 구분하며, 글을 작성할 때 각각의 문장과 문단은 구분하여 표시하는데 필요합니다, 사용법 TEXT P 태그 사이에 원하는 텍스트 작성하기 코드 작성 여기에 내용을 작성합니다. 결과 확인 왜 P 태그를 써야 하나? 태그를 사용하여 단락을 정의하면 다음과 같은 이점이 있습니다 텍스트의 구조를 검색 엔진이 내용을 이해하고 색인화하는 데 도움을 줍니다. 단락의 전후에 여백이 적용되어 가독성을 향상시킵니다. 태그는 글 작성에 필요요소입니다. See the Pen P TAG by 40's Programmer (@40sProgrammer) on CodePen. 위의 화면은 텍스트를 P태그로 감싼 경우와 감싸지 않은 경우인데요. 보.. 2023. 5. 28. 이전 1 다음
