HTML 정리(1)

HTML이란

HTML(Hyper Text Markup Language)

웹 페이지의 구조를 담당하는 마크업 언어
문서의 구조나 내용들을 담당하고, 문서의 틀을 만드는 언어
tag들의 집합이며, TREE 구조로 되어있다.

TREE 구조

HTML 문서로 시작 / head / title
body / h1, div / span

!DOCTYPE html = 이 문서가 HTML 문서임을 명시
HTML /HTML = html 시작 태그로, 문서 전체의 틀을 구성 , </태그이름> 은 해당 태그가 끝났음을 의미
head /head = head 태그는 문서의 메타데이터? 를 선언
title /title = 문서의 제목, 브라우저의 탭에 보여짐
body /body = body 태그는 문서의 내용을 담는 곳

메타데이터란?

메타 데이터란 "데이터를 위한 데이터" 라고 말하며 '데이터에 관한 구조화된 데이터', '다른 데이터를 설명해 주는 데이터' 이다.

목적으로는
1. 데이터를 표현하기 위한 목적
2. 데이터를 빨리 찾기 위한 목적

가장 좋은 예가 HTML 태그이다.
데이터에 관한 구조화라는 것은 HTML 태그 안에 head나 body가 있으며,body 안에는 table이 올 수 있고,
table 안에는 tr이, tr 안에는 td가 올 수 있는 것처럼 데이터가 상위에서 하위로 나무(tree) 형태의 구조를 이루고 있다는 의미이다.

인라인 요소와 블록 요소

HTML 태그는 크게 인라인 요소와 블록 요소로 나누어 진다. 이 부분을 명확히 이해하고 있어야 CSS 를 사용하는데 어려움이 없다.

각 두 요소 모두 적용되는 CSS가 별도로 존재한다. 예를 들어,

인라인 요소는 height 가 적용되지 않는다.
인라인 요소는 width 가 적용되지 않는다.
블록 요소는 vertical-align 이 적용되지 않는다.
블록 요소는 text-align 이 적용되지 않는다.

Inline-element

인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소 안에 다른 인라인 요소가 포함될 수 있다.

그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다. 그래서 임의로 width, hegith 로 변형을 줄 수가 없다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙, 좌우측 정렬을 할 수 있다. 그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 된다.

즉, 글자를 만들기 위한 요소입니다.

block-element

블록 요소는 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함 할 수 있다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다. 그리고 블록 요소 다음에는 줄바꿈이 이루어진다.

display: inline css 프로퍼티로 블록 요소를 인라인 요소의 속성으로 변경할 수 있다.

즉, 상자(레이아웃)을 만들기 위한 요소입니다.

Inline-block-element

인라인 요소의 특징과 블록 요소의 특징이 합쳐진 요소.

인라인 요소 처럼 수평으로 배치할 수 있고 블록 요소처럼 크기값과 상하좌우 마진을 가질 수 있다.

ex) input 태그

시맨틱 요소

HTML5에서는 시맨틱 웹이 중시되면서 여러 시맨틴 요소가 새롭게 만들어 졌습니다.

시맨틱이란 '의미가 있는,의미론적인' 이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다.

시맨틱 요소를 사용해야 하는 이유

검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다.
여러 개발자가 함께 작업할 때

시맨틱 요소의 종류

article : 독립적이고 자체 포함된 콘텐츠를 지정합니다.

aside : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지
않은 부분에 사용됩니다.

header : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다.
선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.

nav : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다.
보통은 안에 ul을 넣어 목록 형태로 사용합니다.

main : 문서의 주된 콘텐츠를 표시합니다.

크로스 브라우징(cross browsing)이란?

웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말합니다.
HTML5, CSS3, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법입니다.