반응형
웹 개발을 시작하시는 모든 분들을 환영합니다! 오늘은 웹 페이지를 만드는 데 필수적인 HTML 코드에 대해 초보자들을 위한 가이드를 제공하려고 합니다.
HTML이란 무엇일까요?
HTML은 HyperText Markup Language의 약자로 웹 페이지의 구조와 내용을 정의하는 데 사용되는 표준 마크업 언어입니다. 텍스트, 이미지, 동영상 등 다양한 요소를 배치하고 서로 연결하는 역할을 하며, 브라우저가 웹 페이지를 해석하고 표시하도록 지시합니다.
HTML 코드 작성을 위한 준비
HTML 코드를 작성하기 위해서는 텍스트 편집기만 있으면 됩니다. 대부분의 운영 체제에는 메모장과 같은 기본 텍스트 편집기가 미리 설치되어 있습니다. 하지만, 코드 작성 편의성을 위해 Visual Studio Code나 Sublime Text와 같은 무료 코드 편집기를 사용하는 것을 추천합니다.
HTML 코드 기본 구조
모든 HTML 문서는 다음과 같은 기본 구조를 가지고 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html>: HTML5 문서임을 선언
- <html>: HTML 문서의 시작
- <head>: 웹 페이지의 제목, 메타 정보 등을 포함
- <title>: 웹 페이지의 제목을 지정
- <body>: 웹 페이지에 표시될 실제 내용을 포함
- </html>: HTML 문서의 끝
HTML 요소 및 속성
HTML 코드는 다양한 요소를 사용하여 웹 페이지의 구조를 구성합니다. 각 요소는 마치 웹 페이지의 블록처럼 역할하며, 서로 다른 속성을 사용하여 스타일, 동작 등을 정의할 수 있습니다.
- 기본 요소: 제목 (<h1>, <h2>, <h3>, ...), 단락 (<p>), 이미지 (<img>), 링크 (<a>), 목록 (<ul>, <ol>), 표 (<table>) 등이 있습니다.
- 속성: 요소의 특성을 정의하는 데 사용됩니다. 예를 들어, <img> 요소의 src 속성은 이미지 파일의 경로를 지정합니다.
예제: 간단한 웹 페이지 만들기
다음은 간단한 웹 페이지를 만드는 HTML 코드 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<h1>제목</h1>
<p>본문 내용 작성</p>
<img src="image.jpg" alt="이미지 설명">
<a href="https://www.예시.com">링크</a>
</body>
</html>
p, img, 등의 기본 코드 설명은 여기를 클릭 > HTML 기본 요소 코드 설명
반응형