HTML 시작하기
발행: (2026년 4월 8일 오후 08:33 GMT+9)
2 분 소요
원문: Dev.to
Source: Dev.to
소개
이것은 나의 첫 DevPost 글입니다. 나는 웹 페이지의 구조를 브라우저에 전달하는 마크업 언어인 HTML을 배우고 있습니다. 프로그래밍 언어와 달리 마크업 언어는 텍스트, 이미지, 비디오, 링크와 같은 콘텐츠가 어떻게 조직되고 표시되는지를 정의합니다.
HTML 기본
HTML은 태그를 사용해 페이지를 구조화합니다. 흔히 사용되는 태그는 다음과 같습니다:
- “ – 루트 요소
- “ – 메타 정보, 제목, 스타일시트 링크를 포함
- “ – 화면에 보이는 콘텐츠를 담음
- “ – 폼 필드를 생성
- “ – 클릭 가능한 버튼을 생성
간단한 로그인 페이지 만들기
아래는 HTML로 만든 기본 로그인 페이지 예시입니다. 사용자 이름과 비밀번호 입력 필드, 그리고 제출 버튼이 포함되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
/* Simple CSS to style the form */
body {
font-family: Arial, sans-serif;
margin: 2rem;
}
.login-form {
max-width: 300px;
margin: auto;
}
.login-form input,
.login-form button {
width: 100%;
padding: 0.5rem;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button type="submit">Submit</button>
</div>
</body>
</html>이 페이지는 기본 HTML 태그로 구조를 정의하고 작은 CSS 블록으로 폼을 스타일링합니다. 이를 통해 HTML과 CSS가 어떻게 함께 작동하여 기능적이고 보기 좋은 로그인 인터페이스를 만드는지 보여줍니다.