[HTML] HTML 태그 정리 - 1

제목 태그 : h1~h6

• h1~h6: HTML문서 본문 내 제목을 표현한다. 1~6까지 순서대로 크기가 줄어든다.

 

문단 태그 : p, br, hr

• p: 본문 글자 태그, 본문의 내용을 단락으로 표현할 때 사용하는 태그. <p> 본문 <p>
• br : 줄바꿈(개행) 태그. <br>
• hr : 단락 간의 구분을 위해 사용하는 태그<hr>, 수평 줄 태그

 

글자 태그 : b, strong, i, em

• b : 굵은 글자, 다른 텍스트와 구별할 때 사용하는 태그
• strong : 중요한 문구를 강조하는 태그
• i : 텍스트를 기울여 다른 글자와 구분하기 위한 태그
• em : 중요한 문구를 기울여서 강조하는 태그

예제 1 

See the Pen 제목, 문단, 글자 태그 by 정혜선 (@Diligent-milk) on CodePen.

 

 

이미지 태그 : img

• img : 웹 페이지에 이미지를 보여주는 태그
• 아래는 img태그의 속성들을 설명하겠다. 
  
  • src : 이미지의 경로 지정(파일 경로나 URL)
  • alt : 이미지에 대한 설명(경로가 잘못되었을 경우)
  • align : 이미지 정렬 방식(left, right, top, middle, bottom)
  • border : 이미지 주위의 테두리 
  • height : 이미지의 높이
  • hspace : 좌우 여백
  • vspace : 상하 여백

 

절대 경로

• 어떤 페이지나 파일이 가진 고유한 경로
• 외부 웹페이지로 연결할때 사용한다.
• ex1 내부 절대 경로) <img src="C:\Users\Desktop">
• ex2 외부 절대 경로) <img src="http://www.naver.com">

 

상대 경로

• 특정 위치를 기준으로 파일을 찾는 경로
• 내부 자료 연결할때 사용
• ex1 상위 기준) <img src="../img/BMO.jpg"> 처럼 ..을 쓰면 상위 폴더로 올라간다.
• ex2 현재 기준) <img src="./img/BMO.jpg"> 처럼 .을 쓰면 현재 폴더다. 이때 .은 생략 가능하다.
• ex3 루트 기준) <img src="/img/BMO.jpg"> 처럼 /을 쓰면 최상위 폴더로 간다.

 

앵커 태그 : a

• 하이퍼링크를 만들 때 사용하는 태그
• <a href="url"> 텍스트 </a>
• 아래는 a(앵커)태그의 속성을 설명
  • href : hreftext reterenece로 연결할 주소 지정
  • name : 문서 내 특정 위치로 이동
  • target : 링크된 내용이 열릴 대상
    • _blank : 링크 클릭시 새 창 설정
    • _parent : 현재 브라우저의 부모 브라우저 창 설정
    • _self : 현재와 동일한 브라우저 창 설정
    • _top : 최상위 브라우저 창 설정
• iframe태그에 name속성값을 지정하여 링크연결 가능

 

예제2

See the Pen a태그 by 정혜선 (@Diligent-milk) on CodePen.

 

 

See the Pen a태그2 by 정혜선 (@Diligent-milk) on CodePen.

 

목록 태그

• 텍스트나 이미지 등을 목록화하여 표현하는 태그
• 아래는 목록 태그들의 종류를 설명 하겠다.
  • 구분 / 태그 / 설명
  • 기본 / <ul> / 번호없는 목록
  • 기본 / <ol> / 번호있는 목록
  • 기본 / <li> / ul태그와 ol태그 내에서 공통적으로 사용되는 태그
  • 정의 / <dl> / 정의 목록
  • 정의 / <dt> / 정의 용어
  • 정의 / <dd> / 정의 용어에 대한 설명

예제3

 

See the Pen 목록태그 by 정혜선 (@Diligent-milk) on CodePen.

 

테이블 태그

• <table>
• 표(테이블)을 만들 때 사용하는 태그
• 아래는 table 태그의 속성을 설명 하겠다.
  • align : 표의 정렬 방식을 지정 (left, center, right)
  • bgcolor : 표의 배경색을 지정
  • border : 표의 테두리 두께를 지정
  • bordercolor : 표의 테두리 색을 지정
  • width : 표의 너비를 지정
  • height : 표의 높이를 지정
• caption: 표의 제목을 나타내는 태그 <caption> 표제목 </caption>
• tr: 표의 행을 만들때 사용 <tr>태그</tr>
  
  • align : 행 정렬 방식을 지정 (left, center, right)
  • bgcolor : 행 배경색을 지정
  • height : 행 높이를 지정
• th: 행의 head역할을 하는 태그 <th>텍스트</th>
• td: 표의 열을 나타내는 태그 <td>텍스트</td>
  • th & td 태그 속성
  • align : 셀 정렬 방식을 지정 (left, center, right)
  • bgcolor : 셀배경색을 지정
  • colspan : 셀 병합
  • rowspan : 행 병합
  • width : 표의 너비를 지정
  • height : 표의 높이를 지정

 

예제4

 

See the Pen 테이블 태그 by 정혜선 (@Diligent-milk) on CodePen.