1 분 소요

01 HTML 기본 다지기

01 HTML 기본 문서구조

태그, 이것은 꼭 알아 두어야 합니다.

< />입니다. 태그는 <로 시작해서="">로 닫아주는 형식입니다.

태그는 소문자를 사용합니다.

꼭 그래야하는 것은 아니지만 HTML5 표준 명세에서는 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사용할 것을 권장 합니다.

02 문서구조 살펴보기

빈 html문서를 생성한 뒤에 !를 쓰고 tab을 누르면 자동 완성이 됩니다.

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

<!DOCTYPE html> - 문서 유형을 지정하는 선언문

문서 유형이란 웹 브라우저에게 ‘이제 부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라’라고 알려주는 것입니다.

<html> 태그 - 웹 문서 시작을 알리는 태그

<html lang="ko"> lang이라는 속성을 사용해해 문서에 지정할 수 있습니다.

코드 언어
de 독일어
en 영어
fr 프랑스어
ja 일본어
ko 한국어
zh 중국어

언어를 따로 설정하는 이유는 검색 사이트에서 특정언어로 검색할 때 제한될 수 있기 때문입니다.

<head> 태그 - 브라우저에게 정보를 주는 태그

웹 브라우저 화면에 보이지는 않지만 웹 브라우저가 알아야 할 정보들 은 보두 <head> 부분에 입력합니다. 문서에서 하용할 외부 파일들도 이곳에서 링크합니다.

<title>태그 - 문서 제목 title태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측합니다.

<meta> 태그 - 문자 세트를 비롯한 문서 정보

데이터에 대한 데이터를 보통 메타 데이터라고 말하는데 이와 유사합니다. 메타 태그는 웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보들을 지정합니다.

문자 세트 지정하기

화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정할지 지정하는 것입니다. 웹 서버는 영어를 기본으로 하기 때무에 영어 이외의 문자를 화면에 표시하기 위해 미리 약속된 문자 세트를 사용해야 하는데 이때 HTML 5에서는 utf-8이라는 문자세트를 사용합니다.

<meta charset ="UTF-8">

모바일 기기 고려하기

모바일 기기에서 접속해서도 잘 적용되서 보이기 위해서

<meta name="viewport" content="width=device-width, initial-scale=1.0">

웹 문서에서 특수 문자 및 특수 기호 사용하기

HTML문서에서는 한글이나 영문, 숫자 등 사용자가 키보드로 입력하는 텍스트를 화면에 보여줍니다.

대표적인 특수 문자들을 몇가지 외워두는 것이 편합니다.

nbsp; : 공백

<br/>: 한 줄 띄어쓰기

&lang;: <

WC3에서 제공하는 엔티티 코드표 https://dev.w3.org/html5/html-author/charref 에서 확인 가능합니다.

업데이트:

댓글남기기