HTML(Hypertext Markup Language)은 웹 페이지의 구조를 만드는 기초 마크업 언어임.
1. 기본 문서 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
<!-- CSS 링크 또는 스타일 정의 -->
</head>
<body>
<!-- 실제 화면에 표시될 내용 -->
</body>
</html><!DOCTYPE html>: HTML5 문서임을 선언<html>: 문서의 루트 요소<head>: 메타데이터(제목, 문자셋, 스타일 등) 포함<body>: 사용자에게 보여질 콘텐츠 영역
2. 기본 태그(Tag)
텍스트 관련
<h1>~<h6>제목</h1> <!-- 제목 (h1이 가장 큼) -->
<p>문단 텍스트</p> <!-- 문단 -->
<strong>강조 텍스트</strong> <!-- 강한 강조 (볼드) -->
<em>기울임 텍스트</em> <!-- 약한 강조 (이탤릭) -->
<br> <!-- 줄바꿈 (닫힘 태그 없음) -->링크 & 이미지
<a href="https://example.com">링크 텍스트</a>
<img src="image.jpg" alt="이미지 설명">리스트
<ul> <!-- 순서 없는 리스트 -->
<li>항목1</li>
<li>항목2</li>
</ul>
<ol> <!-- 순서 있는 리스트 -->
<li>첫 번째</li>
<li>두 번째</li>
</ol>그룹화
<div>블록 요소 그룹화</div> <!-- 블록 레벨 -->
<span>인라인 요소 그룹화</span> <!-- 인라인 레벨 -->3. 속성(Attributes)
<태그명 속성="값" 속성2="값2">- 예시:
<a href="https://naver.com" target="_blank">네이버</a> <input type="text" id="username" class="input-field">
4. 입력 폼(Form)
<form action="/submit" method="POST">
<label for="name">이름:</label>
<input type="text" id="name" name="username">
<input type="password" name="password">
<textarea rows="4" cols="50"></textarea>
<input type="radio" name="gender" value="male"> 남성
<input type="checkbox" name="hobby" value="reading"> 독서
<button type="submit">제출</button>
</form>5. 주석(Comment)
<!-- 이 부분은 사용자에게 보이지 않습니다 -->6. 중첩 규칙
- 태그는 올바른 순서로 중첩되어야 함
올바른 예:<p><strong>텍스트</strong></p>
잘못된 예:<p><strong>텍스트</p></strong>
7. 시맨틱 태그 (HTML5)
<header>머리말</header>
<nav>내비게이션</nav>
<main>주요 콘텐츠</main>
<article>독립된 글</article>
<section>구역 나누기</section>
<aside>부가 정보</aside>
<footer>바닥글</footer>간단한 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<title>첫 번째 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 <strong>HTML</strong> 예제입니다.</p>
<a href="https://google.com">구글 방문</a>
</body>
</html>주의사항
- 태그는 대소문자 구분 없지만 소문자 권장
- 속성값은 따옴표로 감싸기 (
" "또는' ') - 닫는 태그를 빠뜨리지 않기 (단,
<img>,<br>등은 예외)
HTML은 웹 개발의 기초임.
태그를 조합해 구조를 만들고,
CSS로 디자인,
JavaScript로 동작을 추가하는 것.
'Programming > HTML+CSS+JavaScript' 카테고리의 다른 글
| JavaScript 문법 정리 (0) | 2025.02.12 |
|---|---|
| CSS 문법 정리 (0) | 2025.02.12 |
| 웹개발+앱개발 풀스택 개발자 공부순서 추천 (0) | 2025.02.12 |
| Java, JavaScript 차이점 (0) | 2025.02.12 |
| JavaScript 프로그래밍 기초 배우는 법 (0) | 2025.02.12 |