본문 바로가기
HTML

[HTML] 기본 개념

횲 2021. 10. 9. 18:16
728x90

01 HTML 기본 용어

  • 태그와 요소

- 요소 : HTML 페이지를 구성하는 각 부품(제목, 본문, 이미지 등)

- 태그 : 요소를 만들 때 사용하는 작성 방법

 

생성 방법에 따른 요소 구분

요소 구분 형태 예
내용을 가질 수 있는 요소 <요소 이름>내용</요소 이름> <h1>Hello HTML5</h1>
<p>즐거운 웹 프로그래밍 입문</p>
<audio></audio>
내용을 가질 수 없는 요소 <요소 이름> <img>
<br>
<hr>

 

<h1>Hello HTML5</h1>

<h1> : 시작 태그

</h1> : 끝 태그

 

내용 구분 예
텍스트인 경우 <h1>Hello HTML5</h1>
<p>즐거운 웹 프로그래밍 입문</p>
다른 태그인 경우 <div>
        <h1>Hello HTML5</h1>
        <p>즐거운 웹 프로그래밍 입문</p>
</div>
내용을 입력하지 않은 경우 <div></div>
<audio src=""></audio>
<video src=""></video>

 

  • 속성

- 속성 : 태그에 추가 정보를 부여할 때 사용하는 것

- 속성 이름 = "속성의 값"

 

<img> -> X, 어떤 이미지를 불러올지, 파일명이 필요

 

  • 주석

- 주석 : 코드 설명 기록(프로그램의 실행에 영향을 미치지 않음)

<!-- 주석 -->

 

  • HTML5 페이지의 구조

- <html> 태그

 - 웹 페이지의 사용 언어를 구글 검색 엔진에 제공

 

- html 태그의 lang 속성

<html lang="ko">

 

lang 속성 값 언어
ko 한국어
en 영어
ja 일본어
ru 러시아어
zh 중국어
de 독일어

 

- head 태그 내부에 넣을 수 있는 태그

태그 설명
meta 웹 페이지에 추가 정보 전달
title 페이지 제목 지정
script 웹 페이지에 스크립트 추가(자바 스크립트)
link 웹 페이지에 다른 파일 추가(CSS)
style 웹 페이지에 스타일시트 추가(CSS)
base 웹 페이지의 기본 경로 지정

 

  • HTML5 페이지의 작성과 실행 1 : 코드 작성 후 파일로 저장

- [파일]-[다른 이름으로 저장]

- OO.html 또는 OO.htm 형식으로 저장

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 BASIC</title>
</head>
<body>
    HTML5
    CSS3
    <h1>CSS3</h1> <!--제목, 자동 줄 바꿈, 글씨 크게, 진하게-->
    Java <br> Script <!--줄 바꿈-->
</body>
</html>

 

02 HTML5 페이지 구조와 작성법

  • 스타일시트 작성과 실행

내부 스타일

- HTML 페이지 내부에서 style 태그를 사용해 스타일시트를 직접 입력

- 스타일시트가 짧은 경우

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 BASIC</title>
    <!-- 스타일 시트 적용하기 -->
    <!-- 내부 스타일 -->
    <style>
        h1{
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
    <h1>CSS3</h1>
</body>
</html>

 

 

외부 스타일

- 스타일시트를 별도로 생성하고 link태그의 href 속성을 사용해 불러옴

- 협업 업무나 프로젝트의 규모가 클 경우 사용

 

html 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 BASIC</title>
    <!-- 스타일 시트 적용하기 -->
    <!-- 외부 스타일 -->
    <link rel="stylesheet" href="h2.css">
</head>
<body>
    <h2>HTML5</h2>
</body>
</html>

 

css 파일

h2{
    color:red;
    background-color: greenyellow;
}

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

내부 자바스크립트

- <script> 태그를 이용해 HTML 페이지 내부에 코드 작성

 

외부 자바스크립트

- <script> 태그의 src 속성에 파일 경로를 입력해 HTML 페이지로 불러옴

 

728x90

'HTML' 카테고리의 다른 글

[CSS] 레이아웃 구성  (0) 2021.10.28
[CSS] CSS3 속성  (0) 2021.10.11
[CSS] CSS3 기초 : 선택자와 단위  (0) 2021.10.10
[HTML] 입력 양식 태그와 구조화 태그  (0) 2021.10.10
[HTML] HTML5 기본 태그  (0) 2021.10.09

'HTML' Related Articles

티스토리툴바