-
[HTML] HTML의 모든 것 - (마지막) HTML 스타일와 코딩 가이드STUDY/HTML.CSS.JS 2021. 3. 6. 20:58
1. 항상 Document Type을 명시한다.
<!DOCTYPE html>2. Element(요소) 이름에는 소문자를 사용한다.
HTML은 요소 이름에 대소문자를 모두 허용하기는 한다.
하지만, 대소문자를 혼용해서 사용하는 것은 보기 좋지 않고, 통상적으로 개발자들은 소문자 이름을 사용하고, 소문자가 보기에도 작성하기에도 쉽기에 소문자 사용을 권장한다.
3. 모든 Element를 닫아라.
HTML에는 <p>태그와 같이 종료 태그를 필수로 하지 않는 태그들이 있다.
그러나 이런 태그들이라도 종료 태그를 명시하는 것을 권장한다.
4. Attribute(속성) 이름에는 소문자를 사용한다.
태그들의 이름을 소문자로 작성하는 것과 동일한 이유이다.
5. 항상 Attribute(속성)의 Value(값)을 큰 따옴표로 감싼다.
HTML에서는 따옴표를 사용하지 않는 것을 허용한다.
그러나, 개발자들이 일반적으로 값을 표시하는데 큰 따옴표를 사용하고, 사용하는 것이 읽기 쉬우며, 값에 공백이 포함된다면 반드시 따옴표를 사용해야 하기 때문에 따옴표 사용을 권장한다.
6. 항상 이미지의 alt, width, height을 명시한다.
항상 이미지의 alt 속성을 지정하도록 하자. 어떠한 이유로 이미지가 표시되지 않을 경우에 중요한 속성으로 사용된다.
또한 width와 height도 지정하자. 이를 지정해야 브라우저가 로드하기 이전에 이미지를 위한 공간예약이 가능해 깜박거림을 줄일 수 있다.
7. 공백과 등호(=)
HTML은 등호 사이에 공백을 허용한다. 하지만, 최대한 공백을 줄이는 것이 읽기 쉽고, entitiy그룹을 정의하기 쉽다.
Good ▽
<link rel="stylesheet" href="styles.css">Bad ▽
<link rel = "stylesheet" href = "styles.css">8. 긴 코드를 피하자.
HTML 편집기에서 코드를 읽기위해 스크로을 좌우로 움직이는 것은 불편하다.
한 줄에 너무 길지 않은 코드를 작성하도록 하자.
9. 줄바꿈과 Indentiaion
아무런 이유 없이 공백이나 줄바꿈, indentation을 하지 말자.
가독성을 위해서는, 논리적인 코드 블럭 단위나 큰 코드 블럭은 빈 줄을 추가해서 구분하는것이 좋다.
들여쓰기를 할 때는, 탭 키를 사용하기 보다는 공백 2개를 사용하여 표현하자.
Good ▽
<body> <h1>Famous Cities</h1> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p> </body>Bad ▽
<body> <h1>Famous Cities</h1> <h2>Tokyo</h2> <p> Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family. </p> </body>10. <title>태그를 생략하지 말자.
title 태그는 HTML에서 반드시 필요하다.
문서의 제목은 검색 엔진 최적화에 가장 중요한 역할을 한다. 검색 엔진 알고리즘이 검색결과에 페이지를 나열할때 페이지의 title 태그를 이용해 순서를 결정한다.
11. <html>과 <body>, <head> 태그를 생략하지 말자.
물론 이 두 태그가 없어도 웹 페이지는 유효하다.
하지만, <body> 태그를 생략하면 오래된 버전의 브라우저에서는 에러가 발생할 수 있고,
<html>, <body> 태그를 생략하면 DOM과 XML 소프트웨어에서 충돌이 발생할 수 있다.
그러니 반드시 쓰도록 하자!
12. lang 속성을 추가하자.
검색 엔진과 브라우저 지원을 위해, <html> 태그 안에, lang 속성도 항상 추가해주는 것이 좋다. (웹 페이지의 언어를 정의해준다.)
13. Meta data 지정
올바른 해석과 검색엔진 인덱싱을 보장하려면 언어와 문자 인코딩을 명시하는 것이 바람직하다.
e.g <meta charset="UTF-8">
14. Viewport를 지정하자.
viewport는 사용자에게 시각적으로 보여지는 웹 페이지이다. (디바이스의 크기에 따라 다르다.)
<meta> 태그에 아래와 같은 내용을 포함해야한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">브라우저에게 페이지의 크기와 크기 조정에 대한 정보를 제공한다.
15. Style Sheet 사용
Style sheet를 사용하기 위한 구문
<link rel="stylesheet" href="styles.css">긴 CSS문의 형식
body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; }16. 소문자 파일 이름 사용
17. 파일 확장자
HTML은 .html or .htm
CSS는 .css
JavaScript는 .js
'STUDY > HTML.CSS.JS' 카테고리의 다른 글