티스토리 뷰

Front-End-Web/html+css

제3강_html5기본태그와 구조

jsBae 2022. 10. 8. 00:03

tag 표기법

<START TAG> CONTENT </END TAG>

1. html heading

  • HTML 제목은 <h1> ~  <h6>태그로 정의됩니다.
  • <h1>가장 중요한 제목을 정의합니다. <h6>가장 덜 중요한 제목을 정의합니다. 
  • h1의 경우 한 문서에 1개 - 보통은 사이트명이나 페이지명으로 사용한다.
  • 시만텝 웹에서는 <hn> 태그의 의미를 파악한다.
  • Hn 태그 순서를 건너 작성해도 오류는 아니나 순서대로 일관성 있게 작성하자.
  • 따라서<h1>헤딩은 주 헤딩에 사용하고, 그 다음에<h2>헤딩, 그 다음은 덜 중요한 <h3>등을 사용해야 한다.
  • 자동으로 크기와 bold로 강조 되며, 블록태그이다.
제목이 중요합니다
검색 엔진은 제목을 사용하여 웹 페이지의 구조와 내용을 색인화합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML Headings</title>
<meta charset="UTF-8">
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>

2. HTML 문단

<p> ~ </p> paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다.

  • 문단은 항상 새로운 줄에서 시작하며, 블록형태로 모양을 가진다.
  • <p> ~ </p>를 기준으로 앞뒤로 여분의 공백을 가진다.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML Headings</title>
<meta charset="UTF-8">
</head>
<body>
<p>첫문단</p>
<p>두번째 문단</p>
<p>세번째 문단 <br>
안녕하세요. html 쉽죠!!
</p>
</body>
</html>

위의 결과화면처럼, 문단은 새로운 줄에서 시작하며 문단과 문단사이에 일정한 공백이 존재한다.

3. HTML Line Break <br>

  • HTML <br>요소는 줄 바꿈을 정의합니다.
  • <br>새 단락을 시작하지 않고 줄 바꿈(새 줄)을 원하는 경우 사용 합니다.
  • 태그 는 <br>끝 태그가 없음을 의미하는 빈 태그입니다.
<p>This is<br>a paragraph<br>with line breaks.</p>

4. HTML Horizontal Rules <hr>

  • 태그 는 <hr>HTML 페이지에서 주제별 구분을 정의하며 가장 자주 가로 규칙으로 표시됩니다.
  • <hr>요소는 HTML 페이지에서 콘텐츠를 분리(또는 변경 정의)하는 데 사용됩니다 .
  • 태그 는 <hr>끝 태그가 없음을 의미하는 빈 태그입니다.
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

 

5. HTML preformatted Text <pre>~</pre>

  • HTML <pre>요소는 미리 형식이 지정된 텍스트를 정의합니다.
  • 요소 내부의 텍스트 <pre>는 고정 너비 글꼴(보통 Courier)로 표시되며 공백과 줄 바꿈을 모두 유지합니다.
<pre>
운주사 와불님을 뵙고 
돌아오는 길에
그대 가슴의 처마 끝에
풍경을 달고 돌아왔다
먼데서 바람 불어와
풍경소리 들리면,
보고 싶은 내마음이
찾아간 줄 알아라
</pre>

6.<blockquote> 태그 – 인용문 넣기

  • HTML <blockquote>요소는 다른 소스에서 인용된 섹션을 정의합니다.
  • 브라우저는 일반적으로 요소를 들여씁니다 <blockquote>.
<blockquote>
성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로 1961년 11월 말 제주시 한림읍 금악리에 세워 양돈 사업을 실시하였으며 면양을 사육하였던 것으로 알려져 있다. 이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토문화전자대전)
</blockquote>

짧은 인용문을 위한 HTML <q>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

 

주소를 인용하는 <address>

<address>
부산시 해운대구 양운로~~~~
</address>

실습

  • 좋아하는 시를 작성 해 보자.
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>연습1_3</title>
 </head>
 <body>
  <h1> 풍경소리 </h1>
  <p align="right"> 작가 정호승 <br>
  작성일 : 2022-10-13</p>
  <hr color="red" width="100%">
  <pre>
운주사 와불님을 뵙고 
돌아오는 길에
그대 가슴의 처마 끝에
풍경을 달고 돌아왔다
먼데서 바람 불어와
풍경소리 들리면,
보고 싶은 내마음이
찾아간 줄 알아라
  </pre>
      <blockquote>
      정호승 :대한민국의 시인. 경상남도 하동군 출생. 다만, 성장한 곳은 대구광역시다. 종교는 천주교이며, 세례명은 프란치스코다.(나무위키)
    </blockquote>

 </body>
</html>

 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형