HTML

HTML이란?

Hyper Text Markup Language의 약자이며 WWW 문서를 작성하는 Markup Language입니다.
하이퍼 텍스트(Hyper Text)란 하나의 문서(Text)로 두는 것이 아닌 문서와 문서를 상호 연결하여 접근 방식을 다양화 시킨 문서를 의미합니다.
HTML은 여러 태그로 구성되어 있으며, 각 태그를 사용하여 원하는 문서를 만들 수 있습니다.

태그란?

Tag

  • 태그란 정보를 정의하는 형식입니다.
  • 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의합니다.
  • 태그는 시작과 끝이 존재합니다.
    ex) <body></body>
  • 닫히는 태그가 필요없는 태그도 있습니다. 이런경우 <태그명/>과 같이 사용합니다.
    ex) <br/>

HTML의 기본구조


<HTML>

     <HEAD>문서의 머리 부분</HEAD>

     <BODY>

         문서의 몸통 부분

     </BODY>

</HTML>

HTML로 쓰여진 문서를 브라우저에서 열면 렌더링 처리 된 웹페이지를 열람할 수 있습니다.

CSS

디자인을 적용하는 CSS

CSS(Cascading Style Sheets)는 HTML 각 요소를 어떻게 표시할지를 지시하는 것으로, 스타일 시트라고 불리는 사양중 하나입니다.
CSS는 문서의 구조와 디자인을 분리한다는 이념에서 만들어졋습니다.
아래는 CSS의 한 예입니다.

.logo{
    padding:20px;
    text-align:center;
}

.logo라는 셀렉터리 지정된 범위에 {} 블록에서 지정한 스타일이 반영됩니다.
셀렉터는 스타일이 적용되는 범위로 HTML 요소나 특정 클래스, ID등을 지정할 수 있습니다.

다이나믹 HTML

다이나믹 HTML

정적인 HTML 내용을 클라이언트 사이드 스크립트를 이용하여 동적으로 변경하는 기술을 말합니다.
클릭하면 펼쳐지는 메뉴, 지도에 스크롤 등에서 다이나믹 HTML이 사용되고 있습니다.
다이나믹 HTML 기술은 HTML등으로 만들어진 웹 페이지를 JavaScript등의 클라이언트 사이드 스크립트로 조작하여 동적으로 변환하며, 바꾸고싶은 HTML을 지정하기 위하여 DOM이라는 구조를 사용합니다.

DOM

Document Object Model(이하 DOM)은 HTML문서와 XML문서를 위한 API(Application Programming Interface)입니다.
HTML 내의 요소를 오브젝트로 다룰 수 있기 때문에 요소 내 문자열 추출, CSS 프로퍼티로 변경하여 디자인 수정 등을 할 수 있습니다.

DOM에는 여러가지 메소드가 준비되어 있어 메소드를 사용하면 HTML의 각 요소를 참조할 수 있습니다.
Dom Method:w3s

마치며

서로 밀접한 연관이 있는 HTML과 CSS에 대해서 알아보았습니다.
다음 포스트에서는 웹 어플리케이션(Web Application)에 대해서 알아보겠습니다


저작자표시