Html의 기본구조

안녕하세요 아기크롱입니다.

작성된 글을 읽으시면서 빼먹은 부족한 부분은 댓글고고^^ 

그럼 시작합시다

 

" HTML이란, 무엇이며......... 왜 알아야 하는 것인가!!!!!! "

 

HTML(Hyper Text Markup Language)이란, 

브라우저가 해석할 수 있도록 만들어놓은 Markup Language입니다. (웹브라우저 위에서 동작하는 언어)

(때문에, 브라우저는 HTML 읽으면서 텍스트 주위에 있는 모든 태그들을 해석하여 제목문단그림 등등을 지정해 줍니다.)

 

HT : 문서와 문서가 링크로 연결되어 있다.

M  : 태그로 이루어져 있다.
L  : 언어

 

이는 인터넷 서비스의 하나인 월드 와이드 웹을 통해   있는 문서를 만들  사용하는 프로그래밍 언어의  종류이다. 특히 하이퍼텍스트 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의  페이지들은 HTML 작성된다.

 

그렇다면,

HTML5이란?? 

 하이퍼링크, 텍스트만 표시하던 HTML이 멀티미디어외 다양한 앱까지 표현되는 언어.

- 기존의 HTML로 구현이 불가능했던 웹 서비스의 클라이언트와 서버통신이 가능해짐.

- Ativie-x와 같은 plug-ins를 사용않고 웹 서비스를 제공할 수 있게 기능 추가됨. 


 

HTML에서 사용하는 명령어를 태그(tag)라고 하는데 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있다. 또한 HTML 작성된 문서를 HTML문서라 하며  HTML 작성된 문서를  브라우저가 해석하여 이용자에게 보여주게 된다.

 

<태그명 속성명= "속성값"/> 또는 <태그명 속성명="속성값> 내용 </태그명>

ex) <h1 style="color:red; font-family:verdana;"> 글씨체를 크게 키우겠습니다 <h1>

 

 

HTML실행과정

-> javaEE  -> Dynamic web project -> new Runtime -> apache8.0 -> 경로설정  -> version 2.5고정 

-> Context root선택적 변경 (원래 프로젝트명은 놔두고 보여지는 별칭을 만드는 것이다) 

-> webContent설정을 해야 .java가 아닌 .html파일을 넣는 폴더까지 생성할 수 있다. 

-> webContent에서 임의의 html파일을 생성하고 실행. 

 

 

문서구조

<!DOCTYPE html> //html5임을 알 수 있다.

<html> //html내 head와 body가 있다.

<head> 앞으로 문서를 설명하는 제목, 키워드, Css와 같은 정보를 담는다 </head> 

<body> 문서의 내용 </body>

</html>

※ 대체적으로 html문서는 html 또는 htm으로 끝난다. 

 

 

HTML기능은 다음과 같이 정리할  있습니다.

  1) 태그란 <>사이에 오는 단어나 문자를 말합니다. <head>, <p> 등등

  2) 공백은 하나만을 인식합니다. 또한 Enter 하나의 공백으로 인식합니다.

  3) 파일명과 디렉토리명은 항상 영문소문자 사용하도록 하자!!

  4) HTML 문서는 <head> <body> 부분으로 하고 제목과 본문에 해당된다.

  5)  heading에는 <h1>부터<h6>까지를 지원하지만 <h3>이상은 거의 사용 X이다.

  6) <html>태그는 생략하여도 무방하지만 고성능(로딩이 빠른) HTML 위해서 반드시 사용O

  7) <head>영역과 <body>영역으로 제목과 본문을 분리할  있습니다.

  8) 주석은 <!-- 주석 --> 같은 형태로 처리합니다.

  9) HTML 작성할수 있는 프로그램은 text 입력할  있는 모든 프로그램입니다.

 10) 확장자.html 혹은 3자리 확장자만을 지원하는 운영체제를 위하여 .htm로 사용가능.

 11) <p>단락을 분리하는 태그입니다.

 12) 열엇던 태그는 stack처럼 닫는다.

    <body> <h1> 내용물 </h1> </body>  o

    <body> <h1> 내용물></body></h1>   x


 13) 대소문자 구별 x : html, sql, (자바는 대소문자 구별o)

 14) ""와 ''사용의 구별이 없다.(다만, 짝은 맞춰야한다)


 15) utf-8(3byte)를 변경해주는 것이 좋다.

   WebContent = > htmlfile만들때 자동으로 utf-8로 작성되기위해 

   window => web = > html file => utf-8 (자주 사용되기 때문에 사전에 변경한다.)


 16)크롬을 이용하는 것이 좋습니다. 웹브라우저중에서 크롬이 접근성과 호환성이 가장 좋습니다.

 17) 기본태그(1) : <title> 웹페이지 상단에 표시되는 제목입니다 </title>

 


html 태그의 lang 속성

html 4.01 기준으로 html 태그에는 xmlns lang, dir 속성이 있습니다.

xmlns 작성된 페이지가 XHTML 작성되었음을 알려주는 것은 XHTML 네임스페이스를 정해주는 겁니다. 네임스페이스를 지정해 줌으로서 확장성 있는 XML 형식의 문서를 지원할  있게 됩니다.

** 네임스페이스가 뭔가요?

? 네임스페이스가 필요하게 되었는지, 그리고 어떻게 유일성을 지닌 XML 이름을 만들  있을지에 대해서 알아보겠습니다. XML 성격상 어떤 단체 혹은 개인이라도 자신의 고유한 용어로 XML 문서를 제작할  있습니다. 만약 모든 XML 문서 개발자들이 그들의 프로젝트를 위한 개인적인 XML 어휘를 생성한다면 당장 혼란이 발생할 것을 짐작할  있습니다. 이름 위해 정해지는 XML 태그를 규정한다라는 이야기입니다.

lang 속성은 현재 문서의 언어 정보를 제공합니다. 그리고  정보는 브라우저나 검색 엔진에서 활용 됩니다. 게다기 음성 장치(speech synthesizers)에서도 활용된다고 하니 가급적이면 명시하는 것이 좋을  같습니다.

lang 속성에는 어떤 값들을 설정할  있는 문서는 ISO639 명시되어 있습니다. 참고로 한글은 "ko"이라는 값을 사용합니다.

그리고 XHTML 1.0 경우 xml:lang 속성을 지정할  있는데  경우 xml:lang 속성이 lang 속성보다 우선순위가 높다고 합니다.


block element와 inline element 구분

block inline 구별하는 방법은 크기를 가질  있는지 없는지 입니다.

  1) block : <p>, <ul>, <ol>, <li>, <table>

  2) inline : <span>, <em>, <strong>

'WEB 기초 > HTML' 카테고리의 다른 글

[ul/ol Tag] 리스트 태그와 정렬태그  (0) 2018.11.15
멀티미디어(이미지, 오디오, 비디오) 태그  (0) 2018.11.15
[font Tag] 글자체 태그  (0) 2018.11.15
[a Tag] 링크 태그  (0) 2018.11.15
웹표준이란?  (0) 2018.11.15