HTML 정의
html은 웹사이트에서 사용하는 파일의 형식이며, .html이라는 확장자를 가집니다.
HTML은 Hyper Text Markup Language의 약자입니다. Hyper Text는 어떤 의미일까요? 하이퍼링크라는 말을 들어보신 적이 있을 것인데요, 그 말처럼 다른 문서나 사이트로 이동할 수 있는 링크입니다. 같은 맥락에서 이 Text도 다른 문서나 사이트로 이동이 가능한 텍스트가 됩니다. Markup은 태그로 볼 수 있고 HTML문서의 body 부분을 채워넣는 작업입니다.
마크업을 진행할 때, 약속된 표기법으로 작성하며 이 때 <> 꺽쇠표기된 태그를 사용합니다. 대부분 태그는 열고 닫는 태그가 하나의 쌍으로 존재합니다.
<h1>내용</h1>, <p></p>물론 일부 태그들은 닫는 것이 없거나 생략하기도 합니다.
<img>, <input>또한, <>로 이루어진 태그들은 각각 속성(옵션같은 것)이 존재해서, 속성값과 함께 사용합니다.
<img width="가로길이" height="세로길이" src="이미지경로" style="css관련 속성 ">태그 안에 태그를 포함할 때는 포함관계를 명확하게 명시해야 합니다. 이걸 위해서는 탭 키로 들여쓰기를 해주고 라인을 맞춰주면 구분하기 좋습니다. 아래는 div>a>p 순으로 포함관계를 나타낸 것입니다.
<div>
<a>
<p></p>
</a>
</div>HTML는 공백이나 특수문자들이 제대로 표시가 안되므로 치환할 수 있는 특수기호를 사용해서 표시할 수 있습니다.
HTML 문서 구조
아주아주 기본적인 HTML 문서에서 사용하는 태그를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- !DOCTYPE, html, head, body 태그는 문서의 시작과 끝을 표시합니다.
- !DOCTYPE은 문서의 유형을 정의하는 태그이고, 예를 들어 !DOCTYPE html라면, 현재 문서는 html5로 작성되는 문서라고 알 수 있습니다.
- html 태그는 웹 문서의 시작과 끝을 의미하며, lang 속성을 넣으면 문서 내 언어를 지정할 수 있습니다.
- head 태그는 브라우저에게 정보를 제공하며, 웹 문서에 대한 기본 설정들을 작성할 수 있습니다.
- title 태그는 웹 문서의 제목을 지정하며, 탭 제목을 정의합니다.
- meta 태그는 문자 인코딩 및 문서 키워드, 요약 정보 등을 설정합니다.
<meta charset="UTF-8">- body 태그는 화면에 실제로 표출되는 내용을 정의하는 부분을 말합니다.
웹 표준
웹 표준은 www(World Wide Web) 관점에서 작성하는 웹 문서의 공식 표준을 의미합니다. 작성된 웹 문서는 브라우저에 관련 없이 정상적으로 작동해야 합니다. 웹 표준에 맞게 작성된 웹 문서를 쓴다면, 누가 봐도 동일하게 보이므로 웹 개발자, 웹 디자이너가 사용하는 브라우저를 맞추지 않아도 수정이 가능하므로 시간을 절약할 수 있죠! 참고로, HTML로 작성되는 문서는 웹 표준을 지키는 게 기본입니다.
HTML5와 CSS3 장점
최신 웹 표준이므로 이에 맞는 웹 사이트와 앱을 제작할 수 있습니다. C, Java 등 고급 프로그래밍 언어 없이도 쉽게 웹페이지나 앱을 제작할 수 있습니다. 마지막으로 사용자 동작에 바로바로 반응하는 웹페이지 만들 수 있죠.
추가로, 웹 표준을 검사할 수 있는 페이지가 있어 소개합니다.
1) HTML문서의 웹 표준 검사 : w3 웹표준 검사 페이지
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
2) css 웹 표준 검사
CSS Validation Service
www.css-validator.org
위 검사내역을 돌려보면, 유명한 사이트도 Error가 등장합니다. 네이버를 한 번 넣어보겠습니다.
이렇게 url만 입력해서 간단하게 웹 표준 검사도 해볼 수 있습니다. Warning 정도는 넘어갈 수 있지만, Errors로 표기된 것은 고쳐야 합니다. 보고 싶은 사이트 검사결과가 있다면 한 번 넣어보면 어떨까요?
'네이버 클라우드 캠프 > HTML' 카테고리의 다른 글
| [HTML] form (2) (0) | 2023.05.12 |
|---|---|
| [HTML] form(1) (0) | 2023.05.04 |