티스토리 뷰

코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML

HTML 문서 구조 및 속성

더불어숲2 2020. 4. 10. 13:47
반응형

HTML 문서구조 및 속성

HTML 문서구조

문서 구조

HTML 구조는 html 요소 안에 head와 body로 이루어져 있습니다.
  • HTML 구조는 독타입 선언을 해주어야 하나의 웹 문서가 완성됩니다.
  • HTML 문서는 상하 관계가 존재하는 계층적인 구조로 되어 있습니다. 상위에 있는 요소와 하위에 있는 요소는 부모 자식 관계로 표현하며, 이러한 구조를 DOM구조라고 합니다.
  • head 요소에는 제목, 사이트 정보, 스크립트, 스타일 시트, 메타 정보 등을 제공합니다.
  • body 요소에는 문서 본문에 해당하는 콘텐츠 영역입니다.
<!DOCTYPE html>  
<html lang="KO">
<head>
    
</head>
<body>
    
</body>
</html>

HTML 요소 구조

HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공합니다. 또한, HTML 요소는 시작 태그로 시작해서 종료 태그로 끝납니다.

  • 속성은 HTML 요소 중에서도 언제나 시작태그 내에서만 정의되며, 속성 이름과 속성값(value)으로 표현됩니다.
  • 속성 이름은 언제나 소문자로 작성합니다.
  • 속성값은 언제나 따옴표로 감쌉니다.

DTD(Document Type Definition-문서 형식 정의)

DTD란 문서 형식 정의(Document Type Definition)라는 뜻으로 이 문서의 형식이 어떤 형식인지 정의하는 DTD 확장자의 파일에 연결함으로서 이 문서의 형식을 정의하는 것이다. XML에서 주로 사용되던 부분인데 XML의 경우 무한정 개인이 소스를 만들어 사용할 수 있어 이 부분이 반드시 필요했다. HTML의 경우 버전에 맞는 브라우저 상의 구현을 위해서 이전 버전들부터 해오던 규칙이다.

  • 독타입을 설정하지 않거나 잘못 설정하면 브라우저에 따라 화면이 다르게 나오거나 렌더링이 달리지기 때문에 독타입을 설정해야 합니다.
<!-- HTML 4.01 Strict -->            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

<!-- HTML 4.01 Transitional  -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

<!-- XHTML 1.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- HTML5 -->
<!DOCTYPE html>

위와 같이 HTML5에서는 <!DOCTYPE html> 라고 쓰면 독타입에 대한 선언이 끝난다.

HTML5 Shiv

HTML5 Shiv은 새로운 HTML5 섹셔닝 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x 에서도 작동하도록 해주는 라이브러리입니다.
  • 이 기능은 HTML5의 새로운 요소를 지원해주지 못하는 브라우저나 구 버전의 익스플로러가 HTML5 요소를 지원해주는 기능입니다.
  • HTML5에 추가된 header, section, article, footer, nav, aside, figure, figcaption, main, content 등의 요소를 구 버전의 익스플로러(ie6~8)은 inline요소(한 줄로 나열)로 인식하기 때문에 레이아웃 작업에 문제가 됩니다. 이럴 때 HTML5shiv 기능을 사용하면 해결할 수 있습니다.

블록요소와 인라인 요소

블록요소는 박스, 인라인 요소 텍스트를 의미합니다.
  • 블록 엘리먼트 (Block Element)
    • 독립된 박스 영역으로 한줄에 하나의 블록 요소만 표현할 수 있습니다.
    • 블록 요소는 vertical-align, text-align이 적용되지 않습니다.
    • 블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블록 요소 다음에는 줄바꿈이 이루어 집니다.
    • HTML5의 블록요소 종류 : address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video
  • 인라인 엘리먼트 (Inline Element)
    • 독립된 텍스트 영역으로 한 줄에 여러개의 이날인 요쇼를 표현할 수 있습니다.
    • 인라인 요소에는 블록요소가 포함 될 수 없지만 인라인요소는 포함 할 수 있습니다.
    • 인라인 요소는 height, width가 적용되지 않습니다.
    • 인라인 요소는 임의로 width, height로 변형을 줄 수가 없습니다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 종앙, 좌,우측 정렬을 할 수 있습니다. 그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 됩니다.
    • HTML5의 인라인 요소 종류 : a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

참고 : TCP School.com

반응형

UP NEXT : 코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML

댓글
© 2019 Eun's