웹 개발자가 꼭 알아야 할 15가지 코딩 원칙

HTML은 거의 20년에 걸쳐 개발되었습니다. HTML4에서 XHTML, 그리고 최근 매우 인기 있는 HTML5에 이르기까지 전체 인터넷의 발전을 거의 목격했습니다. 그러나 지금도 개발자가 세심한 주의를 기울여야 할 기본 개념과 원칙이 많이 있습니다. 아래에서는 반드시 지켜야 할 개발 원칙을 소개하겠습니다.

1. 레이아웃에 DIV를 잘 활용하세요

웹페이지를 개발할 때 가장 먼저 고려해야 할 것은 페이지의 초점을 구분하는 것입니다. DIV 태그에 이러한 내용을 포함하면 페이지의 코드가 깔끔하고 잘 들여쓰기되어 표시됩니다.

<div id="header"></div> 
<div id="body-container"> 
        <div id="content"> <!-- Content -- > </div>   
        <div id="right-side-bar"> <!-- Right Side Bar Content Area -- ></div> 
</div>   
<div id="footer"></div>

2. HTML 태그와 CSS 스타일 시트를 분리하세요

좋은 페이지는 HTML 태그와 CSS 스타일 시트를 분리해야 합니다. 이는 모든 웹 개발자가 처음 웹 개발을 접할 때 알아야 할 원칙입니다. 그러나 오늘날까지도 이 원칙을 엄격하게 따르지 않는 개발자가 여전히 많습니다.

HTML 태그에 스타일시트 코드를 삽입하지 마세요. 개발자는 CSS 스타일 시트를 저장하기 위해 별도의 파일을 만드는 습관을 길러야 합니다. 또한 이를 통해 다른 개발자가 코드를 수정할 때 작업을 더 쉽게 완료할 수 있습니다.

<p style="color: #CCC; font-size:16px; font-family: arial">
　　　　An example to illustrate inline style in html</p>

3. CSS 코드 최적화

요즘에는 웹사이트에 여러 CSS 파일을 추가하는 것이 매우 일반적입니다. 그러나 웹사이트에 CSS 파일이 너무 많으면 웹사이트의 응답 속도가 느려집니다. 해결책은 코드를 간소화하고 여러 CSS 파일을 최적화하여 하나의 파일로 병합하는 것입니다. 이 방법을 사용하면 웹사이트 로딩 속도를 크게 향상시킬 수 있습니다. 또한 CSS Optimizer, Clean CSS 등과 같이 CSS 파일을 최적화하는 데 사용할 수 있는 많은 도구가 있습니다.

CSS의 경우 꼭 알아야 할 9가지 우수한 CSS 프레임워크도 추천해 드립니다. CSS 프레임워크의 유형과 관련 사용법을 배울 수 있습니다.

4. Javascript 파일을 최적화하여 페이지 하단에 배치합니다.

CSS처럼 여러 Javascript 파일을 페이지에 추가하는 것도 일반적입니다. 하지만 이렇게 하면 웹사이트의 응답 속도도 느려집니다. 이러한 이유로 개발자는 이러한 Javascript 파일을 간소화하고 최적화해야 합니다.

하지만 CSS와 다른 점은 브라우저가 일반적으로 병렬 로딩을 지원하지 않는다는 것입니다. 즉, 브라우저가 Javascript 파일을 로드할 때 더 이상 다른 콘텐츠를 동시에 로드하지 않습니다. 이로 인해 페이지 로딩 속도가 느려지는 것처럼 보입니다.

좋은 해결책은 Javascript 파일의 로딩 순서를 마지막에 두는 것입니다. 이를 달성하기 위해 개발자는 HTML 문서 하단에 Javascript 코드를 배치할 수 있으며 가장 좋은 위치는