HTML 구조-1

앞서 알아보았던 Web을 구조화, 즉 작성하기 위한 언어이다.

HTML은 Hyper Text Markup Language의 약어이다. 대체 이게 뭘까?

1. Hyper Text
   • 참조(하이퍼링크)를 이용하여 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
   • 문서와 문서를 이을 수 있는 기술
2. MarkUp language
   • 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어
   • <h>제목</h>, <p>내용</p>와 같이 구성

본격적인 내용에 들어가기 전에 HTML의 기본 구조를 파악하고 가보자!

• html: 문서의 최상위(root) 요소
• head:  문서 제목, 인코딩, 스타일, 외부 파일 로딩 등 일반적으로 브라우저에 나타나지 않는 내용으로 구성
• body: 실제 화면 구성과 관련된 내용으로 구성

 

위의 사진을 보면 HTML은 전부 요소(element)라고 하는 것으로 이루어져 있고 요소는 태그와 내용(contents)으로 구성되어 있다.

<h1>contents</h1>이라는 구문이 있을 때 <h1></h1>이 태그, contents가 내용이다.

태그와 내용의 역할을 눈치채신 분들도 있겠지만 간단히 설명하면 각각 성격과 의미를 나타낸다.

• 요소들의 중첩(nested)을 통하여 하나의 문서를 구조화하기 때문에 여는 태그와 닫는 태그의 쌍을 잘 확인하여야 한다.
• br, hr, img, input, link, meta와 같이 닫는 태그가 없는 내용이 없는 태그들도 존재함으로 주의하자!

이게 끝이라면 좋겠지만 속성(attribute)이라는 녀석도 알아둬야 한다.

<a href="https//google.com"></a> 여기서 href가 속성의 이름이고, " "안의 내용들 속성 값이다.

• 속성을 통하여 태그의 부가적인 정보를 설정
• 경로나 크기와 같은 추가적인 정보를 제공
• 요소의 시작 태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재

마지막으로 HTML Global Attribute라고 불리는 태그와 상관없이 사용 가능한 속성에 대해 간단히 알아보자.

1. id : 문서 전체에서 유일한 고유 식별자 지정
2. class : 공백으로 구분된 해당 요소의 클래스 목록 (CSS, JS에서 요소를 선택하거나 접근)
3. data-* : 페이지에 개인 사용자 정의 데이터를 저장하기 위해 사용
4. style : inline 스타일
5. title : 요소에 대한 추가 정보 지정
6. tabindex : 요소의 탭 순서

지금까지 알아본 HTML 코드의 예시

이렇게 봐도 뭐가 뭔지 잘 이해가 되지 않을 것이지만 괜찮다! 나중에 직접 쳐보며 눈으로 확인한다면 금방 이해가 될 것이다.

 

가볍게 HTML의 기본 구조 중에 기본에 대해 알아보았다. 다음 시간엔 태그에 대한 세부 내용을 공부하며 HTML을 더 알아가 보자!