Script House의 이전 튜토리얼에서 우리는 웹 페이지 HTML 파일을 의미 있게 만드는 것을 반복해서 강조했습니다. 모양에 따라 선택하기보다는 웹 페이지의 HTML 문서 구조에 따라 가장 적합한 HTML 또는 XHTML 태그를 선택해야 합니다. 줄 바꿈 효과를 얻기 위해 P 태그를 사용하는 대신 단락을 정의하려면 P 태그를 사용하십시오. 텍스트 크기와 굵은 효과를 얻기 위해 h1-h6 태그를 사용하는 대신 제목을 표시하는 데 사용합니다.
예를 들어 제목은 h1을 사용하여 정의할 수 있습니다.
기사 제목은 여기에 적었습니다
이를 정의하기 위해 다른 방법을 사용하는 대신:
기사 제목은 여기에 적었습니다
Script House의 이전 기사에서는 XHTML1.0에서 허용되는 모든 태그를 나열했는데 실제로 선택할 수 있는 요소 태그가 거의 없다는 것을 알 수 있습니다. 그러나 우리는 또한 이렇게 정제된 요소 표시가 더 명확한 의미를 갖고 있다는 것도 분명히 알고 있습니다. 태그할 올바른 요소를 실제로 찾을 수 없는 경우 일반 div 및span 태그를 사용할 수 있습니다.
페이지에서 div 및span 태그를 사용하는 것은 새로운 문제이며 우리는 이를 너무 많이 사용하는 경향이 있습니다. div를 필요하고 합리적으로 사용하면 문서 구조가 크게 향상될 수 있습니다. HTML 문서를 보고 많은 div와 범위가 있는 것을 발견하면 다른 관점에서 문제를 보아야 합니다. 남용이 있습니까? 이를 대체할 수 있는 더 좋은 마커가 있습니까? h1이 표시된 콘텐츠를 더 잘 표현할 수 있다면 이를 정의하기 위해 p 또는 범위를 포기해야 합니다.
어쩌면 이것은 모순이어서 올바른 사용법을 파악하기 어렵거나 명쾌한 답을 전혀 얻지 못할 수도 있습니다. 하지만 한 가지 분명히 해야 할 것은 문서가 명확한 논리적 구조를 갖고 스타일을 적용하기 쉽게 만들어야 한다는 것입니다. div를 단지 컨테이너 또는 문서의 "일부"로 생각할 수 있습니다. 우리는 너무 많은 컨테이너를 사용하는데 이는 현명한 패턴이 아닙니다. 그리고 딱 맞고 합리적인 위치에 있는 컨테이너는 전체 문서를 정리된 것처럼 보이게 할 수 있습니다.
다음 코드가 더 합리적이고 효과적입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
