왜 HTML 기본기를 알아야 할까요?
초보자분들이 웹 개발을 시작할 때 가장 먼저 마주하는 것이 바로 HTML입니다. HTML은 웹 페이지를 구성하는 기본적인 언어로, 인터넷에 떠 있는 모든 웹사이트의 뼈대 역할을 합니다. 이 글에서는 HTML의 기본 구조부터 간단한 웹 페이지를 만드는 방법까지 차근차근 안내해드리겠습니다.
HTML의 기본 구조 이해하기
HTML 문서는 크게 <!DOCTYPE html> 선언부터 시작해 <html>, <head>, <body> 태그로 나뉩니다. <!DOCTYPE html>은 문서가 HTML5임을 브라우저에 알려주며, <html> 태그는 그 안의 모든 내용이 HTML 문서임을 나타냅니다.
<head> 부분에는 문서의 메타 정보, 문자 인코딩, 타이틀 등이 들어가고, <body>는 실제 사용자가 보는 콘텐츠가 위치합니다. 이 기본 구조만 알면 어떤 웹 페이지든 시작할 수 있답니다.
간단한 웹 페이지 작성 예제
아래 예제를 통해 직접 HTML 문서를 만들어보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 웹 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 간단한 HTML 웹 페이지 예제입니다.</p>
</body>
</html>
이 코드를 복사하여 메모장 등 텍스트 에디터에 붙여넣고, 파일 이름을 index.html로 저장한 후 웹 브라우저에서 열어보세요. 제목과 첫 번째 문단이 화면에 표시되는 것을 확인할 수 있습니다.
HTML 태그와 역할 간단 정리
<h1> ~ <h6>: 제목 표시 태그로, 숫자가 커질수록 크기가 작아집니다.<p>: 문단을 의미합니다.<a>: 하이퍼링크를 걸 때 사용합니다.<img>: 이미지 삽입에 사용되며, 꼭alt속성을 넣어 접근성을 고려해야 해요.<ul>, <ol>, <li>: 리스트(순서 없는/있는, 항목)를 만듭니다.
이런 기본 태그들을 활용해 내용을 다양하게 구성할 수 있습니다.
마치며: HTML 공부의 출발점으로
HTML은 웹 개발의 시작점이자 가장 중요한 언어입니다. 기본 구조와 간단한 웹 페이지 작성법을 익힌 후에는 CSS와 자바스크립트 같은 다른 웹 기술도 차근차근 배우는 걸 추천드려요. 이 글을 통해 HTML의 기본 개념을 탄탄히 다지셨다면, 실제로 코드를 작성하면서 연습하는 것도 꼭 해보시길 바랍니다.
더 깊이 있는 웹 개발 지식을 원하신다면 HTML 태그별 활용법, 최신 웹 표준, 반응형 웹 디자인 등 관련 자료도 함께 찾아보시면 도움이 될 거예요.
#HTML기초 #웹개발 #웹페이지만들기 #프론트엔드 #웹코딩
