피해야 할 HTML 코드의 10가지 실수
게시 됨: 2020-12-15현재 온라인 트래픽은 사상 최고 수준입니다. 특히 글로벌 잠금으로 인해 사람들은 컴퓨터에서 훨씬 더 많은 시간을 보냅니다. 당연히 이에 따라 웹 개발 요구 사항이 증가합니다.
요구 사항을 충족하고 작업을 더 쉽게 만들기 위해 HTML 코드로 작업할 때 가장 피해야 할 10가지 실수에 대해 간략히 설명합니다.
모든 웹 개발자가 알고 있듯이 작업을 쉽게 하기 위해 고안된 매우 다양한 콘텐츠 관리 시스템이 있습니다. 이러한 프로그램의 도움으로 웹 사이트 생성 프로세스 및 유지 관리가 가능한 한 간단해질 수 있습니다. 그러나 웹 사이트가 점점 더 미묘해지고 복잡해지고 모든 유형의 사용자 정의 기능을 제공하는 것도 사실입니다. 일반적으로 콘텐츠 시스템은 간단한 문제를 처리하는 데 적합하지만 고급 웹 개발 요구 사항을 충족하는 프로그램을 찾기가 어려울 수 있습니다. 반면에 HTML 코드가 어떻게 작동하는지 잘 알고 있다면 모든 문이 열려 있습니다. HTML은 프로그래밍 언어이지만 마크업 언어라는 점에 유의해야 합니다. 복잡한 웹 사이트를 만들고 유지 관리하며 Mr. Bet Slots와 같은 본격적인 게임을 만들 수도 있습니다. HTML 코드 기본 사항이 있으면 기회는 끝이 없습니다. 그러나 이러한 유형의 코딩은 매우 복잡하고 숙달에 이르는 과정에서 실수를 범할 수 있습니다. 전문가들도 그렇게 하기 때문에 부끄러운 일이 아닙니다. 확실히 코딩 여정의 시작부터 실수를 최소화하는 것이 가장 좋습니다. 토대를 마련하려면 HTML 코딩을 연습할 때 피하는 것이 가장 좋은 방법을 이해해야 합니다. 주의해야 할 사항을 알고 있을 때 쉽게 피할 수 있는 가장 일반적인 오류 10가지 목록을 제공합니다. 목록을 자세히 살펴보고 각 실수를 하나씩 살펴보겠습니다.
HTML 코드 가이드 – 피해야 할 10가지 실수
태그를 닫지 않음
HTML 코드 메모장에서 작업할 때 <html/> 대신 <html>을 작성하는 것이 충분히 간단해 보일 수 있습니다. 결국 슬래시가 포함되었는지 여부에 관계없이 둘 다 겉보기에는 동일한 작업을 수행합니다. 이것은 초보자가 하기 쉬운 일반적인 함정입니다. 코드가 매우 길면 태그를 닫지 않는 것이 큰 문제가 될 수 있습니다. 특히 오류를 찾아야 하는 경우. <head> 태그를 <body> 태그에 열어 두면 코드의 전체 부분이 쓸모 없게 됩니다. 브라우저는 이것을 전체 코드를 하나로 묶는 방향으로 받아들입니다. 열고 닫기가 필요한 태그와 해당 태그를 항상 확인해야 합니다. 모든 태그 사이를 빠르게 탐색할 수 있도록 전체 언어를 시도하고 구성하는 것이 가장 좋습니다. 이를 달성하는 좋은 방법은 들여쓰기를 사용하는 것입니다.
IDE로 작업하면 최상의 결과를 얻을 수 있다는 생각
IDE는 통합 개발 환경을 의미합니다. 통합 HTML 코드 편집기, 디버깅 도구 및 자동화 도구로 인해 웹 개발을 보다 쉽게 하기 위한 소프트웨어 솔루션입니다. 그들은 실제로 다소 과장되어 있습니다. IDE는 어떤 식으로든 코드를 특별하게 만들지 않고 단순히 프로세스를 더 쉽게 만드는 것을 목표로 합니다. 당신이 초보자라면, 그들은 당신에게 불리할 수 있습니다. IDE를 워크플로에 통합하는 것은 기본 사항이 갖추어진 나중 단계에서 이루어집니다. 그렇지 않으면 과도한 추가 기능으로 인해 워크플로가 불필요하게 복잡해집니다. HTML 코드는 메모장이나 메모장++로 작성할 수 있으며 초보자는 여기에서 시작해야 합니다. 일반적인 의견과 달리 IDE HTML 코드 미리보기 기능은 웹사이트가 작동하는지 확인하는 데 필요하지 않습니다. 웹사이트 호스팅 서비스나 서버를 통해 코드를 실행할 수 있으며, 이는 HTML 코드 테스트 목적으로도 잘 작동합니다. 초보자는 초기 단계에서 가능한 한 단순하게 유지해야 합니다.
텍스트 편집기 선택에 시간 보내기
어떤 텍스트 편집기가 다른 것보다 더 나은지에 대해 많은 논쟁이 있음을 알 수 있습니다. 이것은 크게 걱정할 필요가 없습니다. 기본 HTML 구문을 다룰 때 적절한 옵션을 선택하면 됩니다. 유일한 중요한 것은 HTML 코드를 항상 file.html이어야 하는 올바른 형식으로 저장하는 것입니다. 메모장++과 같이 구문을 강조 표시하여 삶을 더 쉽게 만들어주는 텍스트 편집기가 있습니다. 이것은 오류가 있는지 코드를 살펴봐야 할 때 유용합니다.
동일한 파일에서 JavaScript와 CSS 사용
또 다른 일반적인 초보자 실수는 동일한 최종 파일에서 JavaScript, HTML 코드 및 CSS를 모두 사용하는 것입니다. 오류를 수정하기 위해 코딩을 거쳐야 할 가능성이 가장 높으며 코딩 언어의 집합체로 인해 필요한 것보다 더 어려워질 것입니다. 주요 문제는 모든 코드가 동일한 단일 최종 파일에 통합되어 있기 때문에 오류 오류를 찾을 수 없다는 것입니다. 대안은 각 코드를 다른 파일에 저장하는 것입니다. 필요한 경우 항상 <head> 요소에 있는 <link> 태그를 통해 파일을 가져옵니다. 이것은 외부 CSS를 통해 수행되어야 합니다. 오류를 더 쉽게 찾을 수 있습니다. 그러나 초보자로서 CSS 없이 HTML 코드를 동일한 최종 파일에 보관하는 것이 가장 좋습니다.
생각하는 댓글은 중요하지 않습니다
종종 주석은 불필요하다고 생각됩니다. 이것은 코드가 길어지면 <div> 함수를 이해하기 어렵게 만들기 때문에 올바른 방법이 아닙니다. 게다가 다른 사람들이 파일로 작업해야 하는 경우 매우 불편할 것입니다. 모든 것을 깔끔하게 유지하고 주석을 추가하여 사용하는 모든 태그와 웹 개발 프로세스에서 태그가 수행하는 역할을 추적하는 것이 가장 좋습니다. 전반적으로 주석은 당신이나 파일을 샅샅이 뒤져야 하는 누군가를 위해 장기적으로 오류를 찾는 것을 훨씬 더 간단하게 만듭니다. 코멘트를 짧게 유지하고, 요점에서, 긴 코멘트는 상황을 불편하게 만들 수도 있습니다.
네이밍에 일관성이 없다
HTML 코드를 전체적으로 타이트하게 만드는 데 도움이 되는 가장 중요한 것 중 하나는 이름 지정 프로세스에서 일관성을 유지하는 것입니다. 클래스, ID 및 변수 이름은 의미가 있어야 하며 전체 코드에서 동일하게 유지되어야 합니다. 이것은 HTML 코드 출력을 명확하고 이해하기 쉽게 유지하는 데 매우 중요합니다. 특히 프로그래머에게 보내는 경우에는 더욱 그렇습니다. 명명 규칙을 창의적으로 사용하지 않는 것이 가장 좋습니다. 명명 규칙은 오류를 찾는 데 큰 역할을 하기 때문입니다. 정확하고 간결한 이름 지정 프로세스는 코드를 확장할 때 HTML 기본 사항을 더 잘 이해하는 데 도움이 됩니다.
페이지 구조에 주의를 기울이지 않음
HTML 코딩은 처음부터 간단하지 않습니다. 코드를 완성하는 데 많은 시간을 투자해야 하며, 구조화 프로세스가 좋지 않아 일이 잘 풀리지 않는 것은 부끄러운 일입니다. 우리는 신인들이 이 간단한 실수를 하는 것을 보았지만 쉽게 피할 수 있습니다. 태그가 어디에 속하는지 반드시 숙지하고 어떠한 경우에도 표준 구조를 유지하십시오. <span> 및 <div>와 같은 것은 매우 유사한 방식으로 작동할 수 있지만 구조화 프로세스에서 이들이 어디에 속하는지, 그리고 그것들이 어떻게 다른지 미묘한 방식으로 아는 것이 가장 중요합니다. 태그와 구조를 배우는 것은 철자를 아는 것과 같습니다. 코딩 여정의 시작부터 바로 이해했는지 확인하는 것이 가장 좋습니다.
디자인 프로세스에서 독점적으로 HTML 사용
HTML 코드를 디자인 프로세스의 주요 도구로 보는 것은 권장되지 않습니다. 기본 디자인에 가장 적합하지만 너무 복잡하고 예술적인 디자인이 되면 항상 CSS를 선택하세요. 텍스트를 굵게 또는 기울임꼴로 만드는 것과 같은 간단한 작업은 HTML로 쉽게 수행할 수 있지만 스타일화된 글꼴의 경우 CSS가 올바른 방법입니다. CSS는 HTML 코드를 사용하여 원하는 거의 모든 스타일을 구현하기 위해 적용될 수 있습니다. 이를 달성하는 데 도움이 되는 템플릿은 웹에서 찾을 수 있으므로 디자인 프로세스가 매우 간단합니다. 외부 CSS 시트는 항상 특정 요구 사항을 추적, 유지 관리 및 구성하기가 더 쉽습니다. 앞서 언급했듯이 코딩 확장에 대해 다른 파일을 사용하면 오류 검색이 훨씬 더 간단해집니다.
줄 바꿈으로 목록 정의
목록을 구현해야 하는 경우 HTML 코드(예: <br/>)에 넣는 모든 단일 항목 뒤에 줄 바꿈 태그를 넣을 필요는 없습니다. 목록을 만드는 일반적인 방법은 <ul> 또는 <ol> 태그를 사용하는 것입니다. 이를 사용하면 자동으로 수행되기 때문에 연속된 각 줄을 끊을 필요가 없습니다. 모든 줄 뒤에 중단을 두는 것은 태그를 잘못 사용하는 것입니다. <ul> 또는 <ol> 변형을 사용하는 경우 <li> 태그를 사용하여 모든 단일 항목을 목록에 정의해야 합니다. <li>와 </li> 사이에 있는 목록의 각 항목은 다른 작업을 수행할 필요 없이 새 줄에 맞춰집니다.
여러 줄 바꿈 사용
줄 바꿈의 사용을 명확하게 하기 위해 <br/> 태그는 텍스트의 긴 단락이 있을 때만 사용해야 하며 다음 줄에 단어를 넣어야 합니다. HTML 코드에서 일련의 요소 사이에 간격을 만들기 위해 줄 바꿈을 사용하는 것은 일반적인 실수입니다. 간격을 삽입하는 올바른 방법은 텍스트를 여러 단락으로 나누고 CSS를 사용하여 적절한 여백을 관리하는 것입니다. 올바른 방식으로 이를 달성하려면 깨끗하고 정확한 단락 간격을 보장하는 <p> 태그를 사용하는 것이 가장 좋습니다.
결론
HTML 코드를 다룰 때 일종의 오류가 발생하기 마련입니다. 본격적인 프로가 아니면 실수가 생기기 쉽습니다. HTML 코드의 오류를 최소화하려면 코드를 잘 정렬하고 쉽게 탐색할 수 있는지 확인하는 것이 중요합니다. 특히 초보 웹 개발자라면 코딩을 깔끔하게 유지하는 방법을 배우는 데 시간을 할애해야 합니다. HTML은 시작에 불과하지만 JavaScript, CSS, PHP 및 XML을 통합하기 시작하면 코드가 점점 더 길어지고 복잡해집니다. 이 블로그의 팁을 따르면 가장 흔한 초보자 실수를 피할 수 있습니다. 시간이 지남에 따라 모든 코딩 규칙은 표준 절차가 됩니다. 모든 것이 그렇듯이 연습은 당신을 완벽하게 만들 것입니다. HTML 코드, XLM, CSS 또는 기타 웹 개발 관련 조언이 있는 경우 아래 의견에 의견을 공유해 주시면 감사하겠습니다. 코딩 작업에 행운을 빕니다!