HTML이란 무엇일까요? 웹 개발을 하기 위해서는 기본기 중에서도 가장 첫 단계인 html의 기본용어, 구조에 대한 기초적인 이해가 필요합니다. 아래에서 개념 및 기본 용어들에 대해 소개 하도록 하겠습니다.
HTML이란?
HTML은 Hyper Text Markup Language의 약자로 웹 콘텐츠의 기본 구성 요소를 뜻하며 웹페이지의 요소를 구조화 하는 마크업 언어 역할을 합니다. 또한 콘텐츠를 생성하고 표시하는데 필요한 프레임워크를 제공해 줍니다. 이 HTML은 웹 페이지의 구조를 형성하는 데 중심적인 역할을 하며, 레이아웃, 형식 및 요소 등을 정의해 다양한 브라우저와 장치에서 원활하고 표준화 된 화면을 보여줍니다. 텍스트와 이미지에서 멀티미디어에 이르는 콘텐츠는 HTML 태그 내에 폴더화 되어 편리한 사용자 경험을 제공해 줍니다.
그리고 HTML 문서는 DTD(문서 유형 정의)라는 다양한 유형으로 제공되는데 지정된 DTD는 브라우저가 HTML 콘텐츠를 해석하고 랜더링 하는 방법에 영향을 주게 됩니다. 일반적인 문서 유형으로는 HTML5, HTML4.01, XHTML이 포함됩니다.
HTML 기본 언어
- tag 태그 : HTML은 태그를 이용해 웹페이지의 다양한 요소를 만들어 냅니다. 태그는 ‘<>’ 모양의 꺾쇠괄호로 묶여 있으며 여는 태그는 시작을 의미하고 닫는 태그는 요소의 끝을 의미합니다. 예를 들어 <p>로 표시하는 것은 문장의 단락을 의미하고 <h1>은 제목 태그, <img>는 이미지 태그를 나타냅니다.
- 속성 : html 요소에는 해당 요소에 대한 추가 정보를 제공하는 속성이 있을 수도 있는데요. 속성은 여는 태그 내에 포함되며 요소의 기능 또는 모양을 향상시킵니다. <a> 태그의 ‘href’ 속성이 있을 경우 링크를 연결하는 하이퍼링크 대상을 지정해 주는 역할을 합니다.
- 중첩 : 각 요소들을 서로 중첩할 수 있습니다. 이런 계층적 구조는 콘텐츠의 구성과 표현에 기여하며 목록을 나타내는 <u1> 태그에는 중첩된 목록 항목인 <li>가 포함될 수 있습니다.
요소 목록
| 요소 | 뜻 |
|---|---|
| <html> | root 요소, 전체 HTML 문서 캡슐화 |
| <head> | HTML에 대한 메타 정보가 포함된 영역 |
| <title> | HTML 문서 제목 설정 |
| <body> | HTML 문서의 내용 부분을 포함 |
| <h1>, <h2> ~ <h6> | 제목 요소로 h1부터 가장 큰 순서 |
| <p> | 단락 |
| <a> | 앵커, 하이퍼링크 생성 |
| <img> | 이미지 |
| <u1> | 순서 없는 목록 |
| <o1> | 주문 목록 |
| <li> | 목록의 항목 요소 |
| <div> | 영역, 그룹화 및 스타일 지정 시 사용되는 구분 |
| <span> | 텍스트 or 기타 인라인 요소를 위한 컨테이너 |
| <table> | 테이블 |
| <tr> | 테이블 행 |
| <th> | 테이블 헤더 셀 |
| <td> | 테이블 데이터 셀 |
| <form> | 양식 |
| <input> | 입력 필드 |
| <textarea> | 여러 줄 입력을 위한 텍스트 영역 |
| <button> | 버튼 |
| <select> | 선택 목록 |
| <label> | 양식 요소에 대한 레이블 |
결론
이렇게 html은 개발의 중심 뼈대를 형성하며 온라인 콘텐츠 제작에 대한 표준화 및 구조화 된 형식을 제공해 줍니다. 앞으로 개발을 시작하면 서 html에 대한 기본 개념을 잘 익혀 두시기 바라겠습니다.