HTML 스타일 안내

일관되고 깨끗하고 정돈된 HTML 코드를 사용하면 다른 사람이 사용자의 코드를 더 쉽게 읽고 이해할 수 있다.
다음은 좋은 HTML 코드를 만들기 위한 몇 가지 지침과 팁이다.

항상 문서 유형을 선언

항상 문서 유형을 문서의 첫 번째 줄로 선언한다.

HTML의 올바른 문서 유형은 다음과 같다:

<!DOCTYPE html>

소문자로 요소 이름을 사용

HTML을 사용하면 요소 이름에 대문자와 소문자를 혼합할 수 있다.

그러나 다음과 같은 이유로 소문자 요소 이름을 사용하는 것이 좋다:

대문자와 소문자 이름을 혼합하면 잘못 표시됨
개발자는 일반적으로 소문자 이름을 사용합니다
소문자가 더 깨끗해 보입니다
소문자가 쓰기 더 쉽습니다

좋은 예	나쁜 예
<body> <p>This is a paragraph.</p> </body>	<BODY> <P>This is a paragraph.</P> </BODY>

모든 HTML요소 닫기

HTML에서 모든 요소(예: <p> 요소)를 닫을 필요는 없다.

그러나 다음과 같은 모든 HTML 요소를 닫는 것이 좋다:

좋은 예	나쁜 예
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>	<section> <p>This is a paragraph. <p>This is a paragraph. </section>

소문자로 속성 이름을 사용

HTML을 사용하면 특성 이름에 대문자와 소문자를 혼합할 수 있다.

그러나 다음과 같은 이유로 소문자 특성 이름을 사용하는 것이 좋다:

대문자와 소문자 이름을 혼합하면 잘못 표시됨
개발자는 일반적으로 소문자 이름을 사용합니다
소문자가 더 깨끗해 보입니다
소문자가 쓰기 더 쉽습니다

좋은 예	나쁜 예
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>	<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

속성값 항상 따옴표로 묶기

HTML에서는 따옴표 없이 속성 값을 사용할 수 있다.

그러나 다음과 같은 이유로 속성 값을 인용하는 것이 좋다:

개발자는 일반적으로 속성 값을 따옴표로 묶습니다
따옴표로 묶인 값이 읽기 더 쉽습니다
값에 공백이 포함된 경우 따옴표를 사용해야 합니다

좋은 예	나쁜 예
<table class="striped">	<table class=striped>

이미지에 대해 항상 alt, width 및 height 속성을 지정

항상 이미지의 alt 속성을 지정한다.

이 속성은 어떤 이유로 이미지를 표시할 수 없는 경우에 중요하다.

또한 항상 이미지의 너비와 높이를 정의한다. 이렇게 하면 브라우저가 로드하기 전에 이미지에 대한 공간을 예약할 수 있으므로 깜박임이 줄어든다.

좋은 예	나쁜 예
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">	<img src="html5.gif">

공백과 등호 부호(Space & Equal Signs)

HTML은 등호 주위에 공백을 허용한다.

그러나 공백이 없는 것은 읽기 쉽고 엔티티를 더 잘 그룹화한다.

좋은 예	나쁜 예
<link rel="stylesheet" href="styles.css">	<link rel = "stylesheet" href = "styles.css">

긴 코드를 피하라

HTML 편집기를 사용할 때, HTML 코드를 읽기 위해 좌우로 스크롤하는 것은 편리하지 않다.

코드 줄이 너무 길면 안된다.

빈 선 및 들여쓰기

이유 없이 빈 줄, 공백 또는 들여쓰기를 추가하지 마시오.
읽기 쉽도록 큰 코드 블록이나 논리 코드 블록을 구분하기 위해 빈 줄을 추가한다.
읽기 쉽도록 들여쓰기 공간을 두 개 추가합니다. 탭 키를 사용하지 마시오.

<title> 요소를 건너뛰지 않음

HTML에서는 <title> 요소가 필요하다.

페이지 제목의 내용은 검색 엔진 최적화(SEO)에 매우 중요하다!

페이지 제목은 검색 엔진 알고리즘에서 검색 결과에 페이지를 나열할 때 순서를 결정하는 데 사용됩니다.

<title> 요소:

브라우저 도구 모음에서 제목 정의
즐겨찾기에 추가된 페이지의 제목을 제공한다
검색 엔진 결과에 페이지 제목 표시
따라서 제목을 가능한 한 정확하고 의미 있게 만드시오:

<title>HTML Style Guide and Coding Conventions</title>

<html>과 <body>를 생략할까요?

HTML 페이지는 <html> 및 <body> 태그 없이 유효성을 검사한다:

<!DOCTYPE html>
<head>
<title>페이지 제목</title>
</head>

<h1>이것은 제목</h1>
<p>이것은 단락.</p>

그러나 항상 <html> 및 <body> 태그를 추가하는 것이 좋다!

<body>를 생략하면 이전 브라우저에서 오류가 발생할 수 있다.

<html> 및 <body>를 생략하면 DOM 및 XML 소프트웨어도 손상될 수 있다.

<head> 생략?

HTML <head> 태그도 생략할 수 있다.

브라우저는 기본 <헤드> 요소에 <본문> 앞의 모든 요소를 추가한다.

<!DOCTYPE html>
<html>
<title>페이지 제목</title>
<body>

<h1>이것은 제목</h1>
<p>이것은 단락.</p>

</body>
</html>

그러나 <head> 태그를 사용하는 것이 좋다.

빈 HTML 요소를 닫으시겠습니까?

HTML에서 빈 요소를 닫는 것은 선택 사항이다.

XML/XHTML 소프트웨어가 페이지에 액세스할 것으로 예상되는 경우 닫는 슬래시(/)는 XML 및 XHTML에 필요하므로 유지한다.

lang 속성 추가

웹 페이지의 언어를 선언하려면 항상 <html> 태그 안에 lang 속성을 포함해야 한다.

이것은 검색 엔진과 브라우저를 지원하기 위한 것이다.

<!DOCTYPE html>
<html lang="ko-ko">
<head>
<title>페이지 제목</title>
</head>
<body>

<h1>이것은 제목이다</h1>
<p>이것은 단락이다.</p>

</body>
</html>

메타 데이터(Meta Data)

올바른 해석과 올바른 검색 엔진 인덱싱을 위해 언어와 문자 인코딩 <http charset="charset">을 HTML 문서에서 가능한 한 빨리 정의해야 한다:

<!DOCTYPE html>
<html lang="ko-ko">
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
</head>
<body>

<h1>이것은 제목이다</h1>
<p>이것은 단락이다.</p>

</body>
</html>

뷰포트(Viewport) 설정

뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역이다.

그리고 사용자에게 보여지는 것은 장치에 따라 다르다. 컴퓨터 화면보다 휴대 전화에서 더 작다.

모든 웹 페이지에 다음과 같은 <메타> 요소를 포함해야 한다:

페이지 크기 및 크기 조정을 제어하는 방법에 대한 지침이 브라우저에 제공된다.
width= device-width 부분은 장치의 화면 너비를 따르도록 페이지 너비를 설정한다(장치에 따라 다름).
initial-scale= 1.0 부분은 페이지가 브라우저에 의해 처음 로드될 때 초기 확대/축소 수준을 설정한다.
다음은 뷰포트 메타 태그가 없는 웹 페이지와 뷰포트 메타 태그가 있는 동일한 웹 페이지의 예이다:

팁: 스마트폰이나 태블릿으로 이 페이지를 탐색하는 경우 아래 두 링크를 클릭하여 차이점을 확인할 수 있다.

HTML 주석

짧은 설명은 다음과 같이 한 줄로 작성해야 한다:

두 줄 이상에 걸쳐 있는 주석은 다음과 같이 작성해야 한다:

긴 주석은 두 개의 공백으로 들여쓰기된 경우 관찰하기가 더 쉽다.

스타일 시트 사용(Style Sheets)

스타일 시트에 연결하기 위해 간단한 구문 사용(유형 속성은 필요하지 않음):

짧은 CSS 규칙은 다음과 같이 압축될 수 있다:

p.intro {font-family:Verdana;font-size:16em;}

긴 CSS 규칙은 여러 줄로 작성해야 한다:

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

셀렉터와 동일한 라인에 오프닝 브래킷을 배치합니다
개구부 브래킷 앞에 한 공간 사용\
들여쓰기 공간 두 개 사용
마지막을 포함하여 각 속성-값 쌍 뒤에 세미콜론 사용
값에 공백이 포함된 경우 값 주위에만 따옴표 사용
닫는 괄호를 새 줄에 공백 없이 배치합니다

HTML에서 자바스크립트 불러오기

외부 스크립트를 로드하는 데 단순 구문 사용(유형 특성이 필요하지 않음):

자바스크립트에서 HTML 요소 접근

"untidy" HTML 코드를 사용하면 JavaScript 오류가 발생할 수 있다.

이 두 JavaScript 문은 서로 다른 결과를 생성한다:

<!DOCTYPE html>
<html>
<body>

<p id="Demo">이것은 단락이다 1.</p>
<p id="demo">이것은 단락이다 2.</p>

<script>
// Only paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

소문자 파일 이름 사용

일부 웹 서버(Apache, Unix)는 파일 이름에 대해 대소문자를 구분한다. "london.jpg"는 "London.jpg"로 액세스할 수 없다.

다른 웹 서버(Microsoft, IIS)는 대소문자를 구분하지 않는다. "london.jpg"는 "London.jpg"로 액세스할 수 있다.

만약 당신이 대문자와 소문자를 혼합해서 사용한다면, 당신은 이것을 알아야 한다.

대/소문자를 구분하지 않는 서버에서 대/소문자를 구분하지 않는 서버로 이동하면 작은 오류라도 웹을 손상시킬 수 있다!

이러한 문제를 방지하려면 항상 소문자 파일 이름을 사용하시오!

파일 확장자

HTML 파일의 확장자는 .html(.htm 허용)이어야 한다.
CSS 파일의 확장자는 .css여야 한다.
JavaScript 파일의 확장자는 .js여야 한다.

.htm과 ,html의 차이

.htm 파일 확장자와 .html 파일 확장자 사이에는 차이가 없다!

웹 브라우저와 웹 서버에서 둘 다 HTML로 처리된다.

기본 파일이름들

URL이 끝에 파일 이름을 지정하지 않은 경우(예: "https://www.w3schools.com/ "), "index.htm", "default.htm" 또는 "default.htm"과 같은 기본 파일 이름만 추가한다.

서버가 "index.html"만 기본 파일 이름으로 구성된 경우, 파일 이름은 "default.html"이 아닌 "index.html"이어야 한다.

그러나 서버는 둘 이상의 기본 파일 이름으로 구성될 수 있으며, 일반적으로 원하는 수의 기본 파일 이름을 설정할 수 있다.

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML 심볼(Symbols) (0)	2023.05.31
HTML 엔티티(HTML Entities) (0)	2023.05.30
HTML 시멘틱 요소(Semantic elements) (0)	2023.05.28
HTML 컴퓨터 코드 요소 (0)	2023.05.27
HTML 반응형 웹 디자인 (0)	2023.05.26

enjoyCoding

HTML 스타일 안내

항상 문서 유형을 선언

소문자로 요소 이름을 사용

모든 HTML요소 닫기

소문자로 속성 이름을 사용

속성값 항상 따옴표로 묶기

이미지에 대해 항상 alt, width 및 height 속성을 지정

공백과 등호 부호(Space & Equal Signs)

긴 코드를 피하라

빈 선 및 들여쓰기

<title> 요소를 건너뛰지 않음

<html>과 <body>를 생략할까요?

<head> 생략?

빈 HTML 요소를 닫으시겠습니까?

lang 속성 추가

메타 데이터(Meta Data)

뷰포트(Viewport) 설정

HTML 주석

스타일 시트 사용(Style Sheets)

HTML에서 자바스크립트 불러오기

자바스크립트에서 HTML 요소 접근

소문자 파일 이름 사용

파일 확장자

.htm과 ,html의 차이

기본 파일이름들

'HTML > HTML 기본문법' 카테고리의 다른 글

댓글

티스토리툴바

HTML 스타일 안내

항상 문서 유형을 선언

소문자로 요소 이름을 사용

모든 HTML요소 닫기

소문자로 속성 이름을 사용

속성값 항상 따옴표로 묶기

이미지에 대해 항상 alt, width 및 height 속성을 지정

공백과 등호 부호(Space & Equal Signs)

긴 코드를 피하라

빈 선 및 들여쓰기

<title> 요소를 건너뛰지 않음

<html>과 <body>를 생략할까요?

<head> 생략?

빈 HTML 요소를 닫으시겠습니까?

lang 속성 추가

메타 데이터(Meta Data)

뷰포트(Viewport) 설정

HTML 주석

스타일 시트 사용(Style Sheets)

HTML에서 자바스크립트 불러오기

자바스크립트에서 HTML 요소 접근

소문자 파일 이름 사용

파일 확장자

.htm과 ,html의 차이

기본 파일이름들

'HTML > HTML 기본문법' 카테고리의 다른 글

관련글

댓글

티스토리툴바