글자태그

    제목글자<h1~>, 본문<p>, 앵커태그<a>, 글자 형태

 

1.  제목글자 태그

     제목글자 태그(heading)

  • 각각의 숫자는 크기 및 우선 순위를 나타낸다.
  • h1이 가장 크고, h6가 가장 작다.
태그명 설명
h1 첫번째 큰 제목 글자 태그
h2 두번째 큰 제목 글자 태그
h3 세번째 큰 제목 글자 태그
h4 네번째 큰 제목 글자 태그
h5 다섯번째 큰 제목 글자 태그
h6 여섯번째 큰 제목 글자 태그

 

<!DOCTYPE html>

<head>
    <html lang="ko">
    <meta charset="UTF-8">

    <title>Document</title>

    <script>
    </script>

    <style>
    </style>
</head>


<body>
    <h1>첫번째 큰 제목 글자 태그</h1>
    <h2>두번째 큰 제목 글자 태그</h2>
    <h3>세번째 큰 제목 글자 태그</h3>
    <h4>네번째 큰 제목 글자 태그</h4>
    <h5>다섯번째 큰 제목 글자 태그</h5>
    <h6>여섯번째 큰 제목 글자 태그</h6>
</body>

</html>

 

 

     본문 태그

태그명 설명
p 본문 글자 태그 (paragraph : 단락)
단락을 나눠주는 태그로 <p></p>태그 안에 들어간 내용은 모두 한줄로 작성된다.
br 줄바꿈 태그 
hr 수평 줄 태그 
<!DOCTYPE html>
<head>
    <html lang="ko">
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <p>p태그 안에는 엄청 긴 내용을 한줄로 작성할 수 있어요. paragraph : 단락을 나타내는 태그에요.</p>
    <br>br태그는 줄 <br>← 바꿈 태그에요.
    <hr>hr은 수평 줄을 만들어줘요.
</body>

</html>

 

 

     앵커 태그(Anchor)

  • 앵커태그는 서로 다른 웹 페이지를 이동하거나, 웹 페이지 내부에서 특정 위치로 이동할 때 사용하는 태그이다.
태그명 설명
a 앵커 태그
<a href="url, ./위치"></a>

동일 위치에 있는 파일을 연동할 때 ",/파일명"
상위 폴더에 위치한 파일을 연동할 때 "/파일명"

 

저작자표시

'Programming > html, css' 카테고리의 다른 글

HTML5 : 페이지 구조 - html, head  (0) 2023.03.29

 

    HTML5 페이지 구조

    html, head

 

1.  lang 속성값

  • 실제 웹브라우저가 동작하는데 어떠한 영향도 끼치지 않지만 구글과 같은 검색엔진에서 웹 페이지를 탐색할 때 어떤 페이지로 만들어져 있는지 쉽게 인식하기 위한 목적을 가지고 있다.
국가 속성값
한국 ko
일본 ja
중국 zh
미국 en
러시아어 ru
독일어 de

 

2. head 태그

  •  
태그명 설명
<!DOCTYPE html> 현재 웹 브라우저가 HTML5 문서임을 선언하는 태그
<html> html 태그는 모든 HTML 페이지의 루트 요소로 lang 속성을 입력할 수 있다.
<html lang = "ko">
meta 브라우저의 검색엔진이 작동 가능하도록 웹 페이지의 추가 정보 제공
title 브라우저의 검색엔진이 작동 가능하도록 웹 페이지의 제목 정보 제공
script 스크립트를 추가
link 웹 페이지에 link를 통해 파일을 추가
style 웹 페이지에 style 시트를 추가
base 웹 페이지의 기본 경로를 지정한다.
<base href="/images/" target="_blank" />

 

   meta tag 설명

속성명 설명
charset 문자코드 종류 설정
문자 깨짐이나 오류가 생길 수 있어 방지하기 위해 인코딩 선언한다.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Description 검색결과에 표시되는 설명
<meta name="discription" content="YI_DADA의 웹페이지입니다.">
Keywords 검색엔진에 검색되는 키워드
<meta name="keyword" content="YI_DADA">
author 웹페이지 제작자 명
<meta http-equiv="Author" content="홍길동">
publisher 제작사
<meta http-equiv="publisher" content="제작사">
other agent 웹 책임자
<meta http-equiv="other Agent" content="웹 책임자">
copyright 저작권
<meta http-equiv="copyright" content="저작권">
distribution 배포자
<meta http-equiv="distribution" content="배포자">
build, last-modified 제작년월일
<meta http-equiv="build" content="date">
<meta http-equiv="last-modified" content="Fri, 05 Jul 2020 20:07:00">
email, reply-to 이메일
<meta http-equiv="email" content="메일 주소">
<meta http-equiv="reply-to" content="메일 주소">
 title
문서 제목
<meta http-equiv="title" content="YI_DADA의 웹페이지">
viewport 모바일 반응 페이지
<meta name="viewport " content="width=device-width, initial-scale=1.0">
generator 제작도구
<meta http-equiv="generator" content="제작도구">
filename 파일명
<meta http-equiv="filename" content="파일명">
imagetoolbar 그림 위 마우스 오버 시 이미지 관련 툴바 생성하지 않는다.
<meta http-equiv="imagetoolbar" content="no">
cache-control 캐쉬를 가져오지않아 사용자에게 항상 바뀐 내용을 보여줄 수 있지만 페이지 출력 속도가
오래 걸리는 단점을 가지고 있다.
</meta http-equiv="cache-control" content="no-cache">
refresh
60초마다 새로고침
<meta http-equiv="refresh" content="60">
60초 후 설정 된 url 주소로 자동 이동 
</meta http-equiv="refresh" content="60; url="주소">
   

※ meta 태그 설명 출처(🏷️ 메타(meta) 태그 종류 & 사용법 (tistory.com))

 

<!DOCTYPE html>

<head>
    <html lang="ko">
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="styles.css">

    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>

    <style>
        h1 {
            color: red;
        }

        p {
            color: blue;
        }
    </style>
</head>


<body>
</body>

</html>

 

 

 

 

 

 

저작자표시

'Programming > html, css' 카테고리의 다른 글

HTML5 : 글자태그  (0) 2023.03.29

+ Recent posts

티스토리툴바