HTML 사용법

1.HTML 개요

Hyper Text Markup Language

• Web Page 를 만드는 Markup Language
• Hyer Text = Link
• 확장자가 html
• 본디 신속하게 문서 및 정보를 공유하기 위해 고안됨

참고 자료 페이지

HTML 기초 자료

2.HTML 문법

태그 (Tag)

무언가를 표시하는 꼬리표, 이름표 라는 의미가 있으며,
HTML 에서도 비슷한 의미로 해석된다

XML, SGML, XHTML 같은 다른 Markup 언어도 HTML 과 같은 태그 작성 문법을 사용한다.

HTML 요소 레퍼런스

속성 (Attribute)

Tag 에 추가로 정보를 제공하거나, Tag 의 동작이나 표현을 제어할 수 있는 설정값.

시작 태그에서 태그 이름 뒤에 공백으로 구분 후,
속성 이름 = "속성값" 으로 표현.

공백으로 태그와 속성값을 구분하게 되어 있기에,
속성 이름 = 부분에는 공백을 쓰면 안 됩니다.

속성값은 홀따옴표(') 혹은 쌍따옴표 (") 로 감싸 표현합니다.
' 으로 시작했으면 ' 으로, " 으로 시작했으면 " 로 닫아야 한다는 데 주의해 주세요.

1개의 태그에 여러 개의 속성을 추가할 수도 있습니다.

의미와 용도에 따라, 여러 속성이 존재하며
하나의 태그에 여러 속성을 선언할 수도 있습니다.
여러 속성을 선언할 때는 공백으로 구분해서 사용합니다.

속성의 선언 순서는 태그에 영향을 미치지 않습니다.

태그의 중첩

태그 안에 또 다른 태그를 사용하는 것

중첩을 통해, 부모 태그와 자식 태그의 관계가 만들어집니다.

중첩에서는, 태그가 열리고 닫히는 시점이 중요하니 주의합시다.

기본적으론 중첩이 얼마나 되든, 어떤 태그를 쓰든 문제 없으나, 가끔 정해진 태그만 중첩할 수 있는 경우도 있습니다. (블록, 인라인 참조)

빈 태그 (Empty Tag)

일반적 태그와 달리, 내용이 없는 태그입니다.
내용이 없기에 종료 태그가 필요 없으며, 중첩이 불가합니다.

빈 태그는 내용만 비어 있을 뿐,
속성을 통해 화면에 오브젝트를 나타내거나,
화면에 표시하지 않더라도 다른 용도로 쓰일 수 있는 태그입니다.

공백

HTML 공백은 일반 텍스트 공백과는 차이가 있습니다.

HTML 은 2칸 이상의 공백을 모두 무시합니다.

HTML은 두 칸 이상의 공백과 개행을 모두 무시하기 때문에 위 세가지 모두 같은 텍스트가 화면에 나타나게 됩니다.

이 공백처리 방식은 CSS 로 수정할 수 있습니다.

주석

문서 구조

HTML 문서 구조는 웹 페이지 제작의 기초입니다.

인터넷 브라우저는 HTML 문서 구조를 통해 HTML 버전, 문서의 제목, 정보, 내용 등을 파악합니다.

HTML 문서 구조 주요 타입

!DOCTYPE
HTML 문서의 버전을 브라우저에 알려 줍니다.
반드시 문서의 최상단에 서술되어야 합니다.
doctype 자체는 대문자로 써도, 소문자로 써도 괜찮습니다. 뒤의 html 버전만 주의해서 써 주세요.

잘못 서술할 경우, 브라우저에서 해당 페이지를 비표준 형식으로 인식할 수 있습니다.

html
해당 문서가 어떤 국가의 언어로 작성되었는지 표시합니다.
예 > en, ko

head
문서의 기본 시트 설정이나, 문서 타이틀, 문자, 인코딩 방식,
외부에서 불러오는 JavaScript 파일 링크 등을 표시합니다.

body
태그 등을 활용해 웹 페이지 문서의 내용을 작성합니다.

meta
Empty Tag 의 일종으로, utf-8 등 유니코드 설정 등을 기록합니다.