Junsuboy

Junsuboy

Trying to be always nice

[HTML/CSS] HTML의 정의, HTML 태그 종류

HTML이란?

  • 컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있다.
  • 웹에서는 웹에 맞는 형식인 _.html(또는 _.htm)로 문서를 저장해야 한다.
  • 텍스트뿐만 아니라 이미지, 링크 등 여러 요소들을 다루고 표시할 수 있어야 한다.
  • 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML



참조할만한 링크



HTML 기본 문서 구조

HTML 문서와 DOCTYPE

<!doctype> - 웹 브라우저에게 ‘이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.라고 알려주는 것

<!DOCTYPE html> 또는 <!doctype html>



<html> 태그 – 웹 문서 시작을 알리는 태그

  • 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
  • lang이라는 속성을 사용해 문서에서 사용할 언어 지정 가능
  • 문서 정보를 지정하는 <head> 부분과 실제 화면에 보이는 문서 내용을 입력하는 <body> 부분


브라우저에게 정보를 주는 <head> 태그

  • 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들 입력
  • 문서에서 사용할 외부 파일들 링크


<title> 태그 : 브라우저의 제목 표시줄에 표시되는 내용.

<title> 문서 제목 </title>

<meta> 태그 : 문자 인코딩 방법 및 문서의 키워드와 요약 정보를 지정

<meta charset="utf-8">


특수기호 입력 방법

pic1



텍스트를 묶어주는 태그

<hn>태그 - 제목 표시

  • 기본형 <hn> 제목 </hn>
  • 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그
  • h1 > h2 > h3 > h4 > h5 > h6

<p> 태그 - 텍스트 단락

  • 기본형 : <p> 텍스트 </p>
  • 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐

<br> 태그 - 줄바꾸기

  • 기본형 : <br>
  • 줄을 바꿀 위치에 <br> 태그를 사용. 닫는 태그가 없음

<blockquote> 태그 - 인용문 넣기

  • 기본형 : <blockquote> 인용 내용 </blockquote>
  • 다른 텍스트보다 안으로 들여 써짐.

<hr> 태그 - 분위기 전환

  • 기본형 : <hr>
  • 주제가 바뀔 때 분위기 전환. 수평 줄 생김. 닫는 태그 X

<pre> 태그 - 입력한 그대로 표시

  • 기본형 : <pre> 텍스트 </pre>
  • 소스에 표시한 공백이 그대로 표시됨.
  • 프로그램 소스를 표시할 때 유용함.
<body>
    <h1>제주 이색 여행지</h1>
    <h2>야외 텐트를 닮은 건축물 "테쉬폰"</h2>
    <p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.</p>
    <p>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데, <br> 국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.</p>
    <hr>
    <blockquote>
      성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로 1961년 11월 말 제주시 한림읍 금악리에 세워 양돈 사업을 실시하였으며 면양을 사육하였던 것으로 알려져 있다. 이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토문화전자대전)
    </blockquote>
</body>

image



텍스트를 한 줄로 표시하는 태그

<strong>, <b> - 굵게 표시

  • <strong> - 중요한 내용이라서 강조해야 할 때
  • <b> - 단순히 굵게 표시할 때

<em>, <i> – 이탤릭체로 표시하기

  • <em> - 흐름상 특정 부분을 강조하고 싶을 때
  • <i> - 단순히 이탤릭체로 표시할 때

<q> 태그 - 인용 표시

  • 줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시
  • 인용 내용 앞뒤에 따옴표(“ “) 추가됨

<mark> – 형광펜 효과

  • <mark> 태그로 묶은 부분의 배경색이 노랑으로 표시됨.

<span>, <div> – 영역 묶기

  • <span> - 줄 안에서 (인라인) 묶기
  • <div> - 줄 바꿔 (블록) 단락으로 묶기

<ruby> - 동아시아 글자에 주석 표시

  • <ruby> 태그 안에 <rt> 태그를 사용해 주석 표시



목록을 만드는 태그

<ul>, <li> - 순서 없는 목록

  • 각 항목 앞에 불릿이 붙여짐
  • CSS의 list-style-type 속성으로 불릿 수정

<ol>, <li> - 순서 목록

  • 각 항목 앞에 숫자가 붙여짐
  • <ol> 태그의 속성
    • type 속성 : 불릿 앞의 숫자 조정
    • start 속성 : 중간 번호부터 수정
    • reserved 속성 : 역순으로 표시
<ul>
  <li>1일차
    <ol type="a">
      <li>해녀박물관</li>
      <li>낚시체험</li>
    </ol>
  </li>
  <li>2일차
    <ol type="a" start ="3">
      <li>용눈이오름</li>
      <li>만장굴</li>
      <li>카약체험</li>
    </ol start>
  </li>
</ul>

image



표를 만드는 태그

<table> ~ </table> : 표 전체

<tr> ~ </tr> : 행

<td> ~ </td> : 셀, <th> ~ </th> 제목 셀

<table>
    <tr>
      <th>1행 1열(제목)</th>
      <td>1행 2열</td>
      <td>1행 3열</td>
    </tr>
    <tr>
      <th>2행 1열(제목)</th>
      <td>2행 2열</td>
      <td>2행 3열</td>
    </tr>
  </table>

image

태그:

카테고리:

업데이트:

댓글남기기

참고