고정 헤더 영역
상세 컨텐츠
본문
HTML이란?
HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 기본적인 언어로 뤱사이트에서 볼 수있는 모든 컨텐츠는 HTML을 사용해 구조화함.
HTML의 역할
- 웹 페이지의 구조를 정의
- 텍스트, 이미지, 링크, 동영상 등을 포함하는 요소 배치
- CSS, JavaScript 같은 다른 기술과 결합하여 더 강력한 기능 제공
HTML 기본구조
<!DOCTYPE html>
<html>
<head>
<title>내 첫 번째 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>HTML을 배우고 있습니다.</p>
</body>
</html>
- <!DOCTYPE html> : 문서 유형을 HTML5로 선언
- <html> : HTML 문서의 시작과 끝을 나타냄
- <head> : 문서의 메타데이터(제목, 문자 인코딩 등)를 포함
- <title> : 웹 브라우저 탭에 표시될 제목을 설정
- <body> : 실제 화면에 표시될 내용을 포함
- <h1> : 제목을 나타내는 태그
- <p> : 단락을 나타내는 태그
HTML 주요 태그
1) 제목 태그 : <h1> ~ <h6> (숫자가 작을수록 글자가 커짐)
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>2) 문단 태그 : <p>
<p>이것은 문단입니다.</p>3) 링크 태그 : <a>
<a href="https://www.google.com">구글로 이동</a>4) 이미지 태그 : <img>
<img src="image.jpg" alt="설명 텍스트">5) 목록 태그
- 순서 없는 목록 (<ul> - unordered list)
- 순서 있는 목록 (<ol> - ordered list)
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
<ol>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
</ol>
HTML 주요 속성
태그에는 추가적인 정보를 제공하는 속성이 있음. (ex. <a> 태그의 href 속성은 이동할 URL을 지정)
- href : 링크의 대상 URL을 지정 (ex. <a> 태그)
- src : 이미지 또는 외부 리소스 경로 지정 (ex. <img> 태그)
- alt : 이미지가 표시되지 않을 경우 대체 텍스트 제공 (ex. <img> 태그)
- target : 링크 클릭 시 열리는 위치 지정 (_blank는 새 창에서 열림)
CSS와 JavaScript
HTML은 구조를 담당하지만, 스타일과 동적인 기능을 추가하려면 CSS와 JavaScript가 필요함
- HTML: 웹 페이지의 구조 (뼈대)
- CSS: 스타일 (색상, 크기, 레이아웃)
- JavaScript: 동적 기능 (버튼 클릭, 애니메이션)
간단한 HTML 페이지 예제
<!DOCTYPE html>
<html>
<head>
<title>HTML 연습</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<h1>HTML 공부 중!</h1>
<p>이 페이지는 HTML 기본 문법을 배우기 위해 작성되었습니다.</p>
<a href="https://www.google.com">구글로 이동</a>
</body>
</html>728x90
'기초 > IT 기본 지식' 카테고리의 다른 글
| #13 CSS (0) | 2025.02.05 |
|---|---|
| #11 프롬프트 엔지니어링 (1) | 2025.01.01 |
| #10 풀스택 개발 (1) | 2024.12.04 |
| #9 백앤드 개발 (0) | 2024.12.02 |
| #8 프런트앤드 개발 (2) | 2024.11.06 |
