Study Record

HTML5과의 첫 만남 본문

웹/HTML + CSS

HTML5과의 첫 만남

초코초코초코 2025. 1. 26. 21:48
728x90

HTML 이란 무엇일까?

컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있다.

웹에서는 웹에 맞는 형식인 *.html(또는 *.htm)로 문서를 저장해야 한다.

텍스트뿐만 아니라 이미지, 링크 등 여러 요소들을 다루고 표시할 수 있어야 한다.

웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML 이다.

HTML은 하이퍼텍스트 마크업 랭귀지(HyperText Markup Language)의 줄임말로 하이퍼텍스트를 마크업하는 언어이다.

하이퍼텍스트란 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말하고 마크업이란 태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 사진인지 링크인지 표시하는 것을 말합니다. 즉 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML 입니다.

 

 

웹 편집기

웹 브라우저에 보여지는 웹 문서를 작성하는 프로그램

 

어느 부분이 제목이고 어느 부분이 본문인지 알려주는 것이 태그이며 태그를 사용하는 약속의 언어가 HTML 이다.

 

웹 표준이란 무엇일까?

웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것

웹 표준을 지켜 사이츠를 제작하면 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있다.

웹 표준으로 문서 하나를 만들면 어떤 기기에서나 볼 수 있기 때문에 웹 개발자와 디자이너의 시간을 절약할 수 있다.

HTML5로 문서를 만드는 것은 웹 표준을 지킨 문서를 만드는 것과 같다.

대부분의 웹 브라우저에서 HTML5를 지원하게 되면서 현재 HTML5의 공식 명칭은 HTML이다.

HTML5 표준안부터는 웹 브라우저 업체들이 함께 참여하고 있기 때문에 표준안이 업그레이드 될 때마다 웹 브라우저 업체에서 발 빠르게 수용하고 지원하며 살아있는 표준안이 되고 있다.

HTML5.1 , HTML5.2 등 새로운 HTML5 가 업그레이드 되고 있다.

 

 

웹 표준을 지켜야 하는 이유

유지 보수가 쉽습니다.

웹 접근성을 확보할 수 있습니다.(웹에 있는 콘텐츠를 누구나 구애받지 않고 사용할 수 있도록 제작해야 한다는 것이 웹 접근성이다.)

 

 

웹 브라우저

- 크롬

- 파이어폭스

- 인터넷 익스플로러 -> 잘 사용되지 않음

- 엣지

 

* 사용 중인 웹 브라우저가 HTML5를 얼마나 지원하는지 확인하려면 http/html5test.com 사이트에 접속하면 된다.

 

 

웹 편집기

- 텍스트 편집기

- 웹 전용 편집기 (ex. 비주얼 스튜디오 코드)

- 통합 개발 환경(IDE)

- 웹 기반 코드 편집

 

 

* 비주얼 스튜디오 코드 

기본 폼 불러오기 : ! + 엔터

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

코드 자동 정렬 : Windows : Shift + Alt + F

 

 

* HTML 검사기

문법에 맞게 작성되었는지 웹 표준에 어긋나는 부분은 없는지 확인할 수 있는 페이지이다.

 

https://validator.w3.org/

 

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

 

728x90

'웹 > HTML + CSS' 카테고리의 다른 글

웹 호스팅 서비스  (0) 2025.02.04
HTML 특수기호와 특수문자 입력하기  (0) 2025.02.04
HTML5의 문서구조  (0) 2025.01.31
HTML 이미지와 하이퍼링크와 앵커  (0) 2025.01.27
HTML 기본 구조와 텍스트 관련 태그  (0) 2025.01.26
'웹/HTML + CSS' Related Articles more