[HTML5] 02. 웹 페이지 기본 구조와 작성 방법

유개미·2025년 4월 6일

HTML

목록 보기

2/4

가. HTML5 기본 용어

1. 태그와 요소

요소 : HTML 페이지를 구성하는 각 부품
태그 : 요소를 만들 때 사용하는 작성 방법

→ 요소와 태그는 구분하지 않고 사용한다.

내용은 텍스트가 될 수도 있고, 다른 요소가 될 수도 있다. 내용을 가질 수 있는 요소에 내용을 입력하지 않아도 된다.

2. 속성

→ 태그에 추가 정보를 부여할 때 사용하는 것

<!-- 웹 브라우저에 HTML5 문서라는 것을 알리기 위해 반드시 첫 행에 나와야 한다. -->
<!DOCTYPE html>
<html>
    <!-- body 태그에 필요한 스타일시트와 자바스크립트를 제공한다. -->
    <head>
        <!--title 태그(웹 브라우저에 표시하는 제목) -->
        <title>HTML5 Basic</title>
    </head>
    <!-- 사용자에게 실제로 보이는 부분을 작성하는 곳 -->
    <body>

    </body>
<!-- 모든 HTML 페이지의 기본 요소로, 모든 태그는 이 HTML 태그 내부에 작성한다. -->
</html>

나. HTML5 페이지의 작성과 실행

<!DOCTYPE html>
<html>
    <head>
        <!--title 태그-->
        <title>HTML5 Basic</title>
    </head>
    
        <body>
            <!--h1 태그-->
            <h1>Hello World..!</h1>
            <h2>HTML5 길라잡이</h2>
            <h3>20211806 김유겸</h3>
        </body>
</html>

다. 스타일시트 작성과 실행

• 내부 스타일시트 작성과 실행

<!DOCTYPE html>
<html>
    <!--head-->
    <head>
        <!--title 태그-->
        <title>HTML5 Bagic</title>
        <style>
            h1 {
            color: white;
            background: black;
            }
        </style>
    </head>
    <!--body-->
    <body>
            <!--h1 태그-->
            <h1>Hello World...!</h1>
    </body>
</html>

• 외부 스타일시트 작성과 실행

h1{
    color:white;
    background: black;
}

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 Basic</title>
        <Link rel="stylesheet" href="Style.css">
    </head>
    <body>
        <h1>Hello World...!</h1>
    </body>
</html>

라. 자바스크립트 작성과 실행

• 내부 자바스크립트 작성과 실행

<!DOCTYPE html>
<html>
    <head>
        <!--html 태그-->
    <title>HTML5 Basic</title>
    <script>
        // 경고 창을 출력합니다.
        alert('Hello JavaScript...!');
    </script>
    </head>
    <body>
        <!--h1 태그-->
        <h1>Hello World...!</h1>
    </body>
</html>

• 외부 자바스크립트 작성과 실행

alert('OuterScript')

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
    <script src="02-6_OuterJaveScript.js"></script>
</head>
<body>
    <h1>Hello World..!</h1>
</body>
</html>