프론트엔드의 기본, HTML 기초에 대한 설명

HTML/CSS/JS

웹 개발의 세 가지 핵심 기술로, HTML은 웹 페이지의 구조를 정의하고, CSS는 웹 페이지의 스타일을 꾸미고, 자바스크립트는 웹 페이지의 동작을 구현합니다.

 

이번 포스트에서는 HTML의 기초에 대해 알아보겠습니다.

 

 

HTML

HTML(HyperText Markup Language)은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. 웹 브라우저는 HTML 문서를 해석하여 사용자에게 보여줍니다.

 

HTML은 프로그래밍 언어는 아니지만, 파이썬, C++, JAVA 같은 언어만큼이나 IT 생태계에서 강력하게 동작하고 있습니다.

 

HEAD

HTML 문서의 첫 번째 구성 요소로서, 문서의 메타데이터(문자 인코딩, 제목, 스타일 시트 등)를 포함합니다.

 

 

BODY

HTML 문서의 두 번째 구성 요소로서, 실제 웹 페이지에 표시되는 콘텐츠를 포함합니다.

 

 

레이아웃

웹 페이지의 레이아웃은 헤더, 메인, 사이드바, 푸터 등의 영역으로 구성됩니다. HTML 태그를 사용하여 이러한 영역을 정의하고, CSS를 사용하여 스타일링합니다.

 

 

콘텐츠

웹 페이지의 콘텐츠는 텍스트, 이미지, 링크 등 다양한 요소로 구성됩니다. 각 요소는 해당하는 HTML 태그를 사용하여 표시합니다.

 

멀티미디어 콘텐츠(비디오, 오디오, 애니메이션 등)는 <video>, <audio>, <canvas> 등의 태그를 사용하여 삽입할 수 있습니다.

 

리스트는 순서가 있는 리스트(<ol> 태그)와 순서가 없는 리스트(<ul> 태그)로 나뉩니다. 각 항목은 <li> 태그를 사용하여 표시합니다.

 

표는 <table> 태그를 사용하여 만들며, <tr>(행), <th>(헤더 셀), <td>(데이터 셀) 태그를 사용하여 구성합니다.

 

아이프레임은 <iframe> 태그를 사용하여 다른 웹 페이지를 현재 웹 페이지에 삽입할 수 있습니다.

 

양식 태그 `<form>` 태그는 사용자 입력을 수집하는 웹 양식을 만드는데 사용됩니다. 양식은 다양한 입력 요소(텍스트 입력, 버튼, 체크박스 등)를 포함할 수 있습니다.

 

설명과 입력(label), 버튼 <label> 태그는 양식 요소에 설명을 추가하는데 사용되며, 해당 요소와 연결되어야 합니다. <input> 태그는 다양한 유형의 입력 필드를 생성하는데 사용되고, <button> 태그는 버튼을 생성합니다.

 

HTML 주의사항

HTML 작성 시 주의해야 할 사항들은 다음과 같습니다.

• 모든 태그는 소문자로 작성해야 합니다.
• 태그는 올바른 중첩 구조로 작성해야 합니다.
• 일부 태그는 닫는 태그 없이 사용할 수 있지만, 명확한 구조를 위해 닫는 태그를 사용하는 것이 좋습니다.
• 속성은 항상 따옴표로 묶어야 하며, 속성 값은 대소문자를 구분합니다.

HTML 기초에 대한 설명은 여기까지입니다. 웹 페이지를 만들기 위해 이러한 기초를 활용하여 다양한 콘텐츠를 구성할 수 있습니다.