#12 HTML

2^7 2025. 2. 4. 21:00

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

저작자표시 비영리 변경금지 (새창열림)