웹 개발은 현대 사회에서 더이상 빠질 수 없는 필수 기술로 자리매김하고 있습니다. 그 중에서도 HTML은 웹 페이지를 구성하는 데 필수적인 언어로, 웹 개발자라면 반드시 숙지해야 하는 기초 중의 기초입니다. 이 글에서는 HTML의 기초부터 심화까지 다양한 측면에서 살펴보겠습니다.
HTML의 기초
HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어입니다. 간단한 텍스트 에디터를 이용하여 작성할 수 있으며, 다음은 기본적인 HTML 문서의 구조입니다.
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 HTML 문서</title>
</head>
<body>
<h1>안녕, HTML!</h1>
<p>HTML은 웹의 기초입니다. 이 문서는 간단한 예제입니다.</p>
</body>
</html>- <!DOCTYPE html>: 문서의 형식을 HTML5로 지정합니다.
- <html>: HTML 문서의 시작을 나타냅니다.
- <head>: 문서의 메타 정보, 스타일 시트, 스크립트 등을 정의합니다.
- <title>: 문서의 제목을 나타냅니다.
- <body>: 웹 페이지의 내용을 나타냅니다.
- <h1>, <p>: 각각 제목과 단락을 나타내는 태그입니다.
HTML 요소와 속성
HTML 문서는 다양한 요소로 구성되며, 각 요소는 속성을 가질 수 있습니다. 예를 들어, 링크를 생성하는 <a> 태그는 href 속성을 가지고 있습니다.
<a href="https://www.example.com">예제 웹사이트</a>
이처럼 HTML은 요소와 속성을 통해 문서의 구조를 정의하고 데이터를 표현합니다. 이를 이용해 웹 페이지를 구성하는 다양한 요소들을 조합할 수 있습니다.
HTML 양식과 입력 요소
사용자와의 상호 작용을 위해 HTML은 다양한 입력 요소를 제공합니다. 텍스트 입력을 받기 위한 <input> 요소부터 선택 목록을 생성하는 <select> 요소까지 다양한 양식 요소를 활용할 수 있습니다.
<form action="/submit" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="제출">
</form>
위의 예제는 간단한 로그인 양식을 나타냅니다. <form> 요소는 사용자 입력을 감싸고, action과 method 속성은 해당 양식이 제출될 때의 동작을 정의합니다.
CSS와의 결합
HTML은 구조를 정의하는 언어이지만, 디자인적인 요소는 CSS (Cascading Style Sheets)를 통해 구현됩니다. 각 요소에 스타일을 적용하기 위해 클래스와 ID를 사용하거나, 인라인 스타일을 직접 정의할 수 있습니다.
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
<p class="highlight">이 텍스트는 강조되어 표시됩니다.</p>JavaScript 통합
HTML은 동적인 웹 페이지를 구현하기 위해 JavaScript와도 통합됩니다. <script> 태그를 이용하여 JavaScript 코드를 삽입할 수 있습니다. JavaScript는 클라이언트 측 스크립팅 언어로, 웹 페이지를 동적으로 만들고 제어하는 데 사용됩니다. HTML 문서 안에 JavaScript 코드를 통합하기 위해서는 <script> 태그를 사용합니다. 이 태그는 페이지의 <head> 또는 <body> 섹션에 배치될 수 있습니다.
<script>
function greet() {
alert('안녕하세요!');
}
</script>
<button onclick="greet()">인사 버튼</button>
'◆기타 > etc' 카테고리의 다른 글
| 비전공자를 위한 웹개발 용어와 단계 총 정리! (1) | 2023.11.14 |
|---|---|
| 모바일 AR 앱 개발자를 위한 AR Core와 AR Kit 비교 (0) | 2023.11.09 |
| 객체 지향 프로그래밍에서의 상속, 가상 함수, 그리고 인터페이스 (0) | 2023.11.07 |
| 프로그래밍에서의 상수와 변수: 불변성과 유연성의 차이 (0) | 2023.11.07 |
| Unity에서의 Normal Map 활용 (0) | 2023.11.06 |