HTML 테그들 정리

HTML 테그들 정리

---

<h>테그

글씨의 사이즈 조절
속성값 :

<h1>안녕하세요</h1>= 글씨가 h1 의 크기만큼 나온다
<h2>안녕하세요</h2>= 글씨가 h2 의 크기만큼 나온다
숫자가 낮을수록 글씨가 커짐

<p>테그

문장의 묶음을 표현한다
속성값 :

<p>안녕하세요 반갑습니다!!</p>= 글씨가 굵게 나오며 두줄을 개행한다 .

<q>테그

글씨의 더블쿼테이션을 (“”) 표현한다
속성값 :

<q>안녕하세요 반갑습니다</q>= "안녕하세요 반갑습니다"<- 이렇게 뜸 더블쿼테이션 마크

<blockquote>테그

문장의 들여쓰기를 관장한다
속성값 :

<blockquote>안녕하세요
반갑습니다
</blockquote>
* 들여쓰기가 된다

<br>테그

문장의 한줄 개행을 한다
속성값 :

 안녕하세요<br>반갑습니다<br>
* 문장의 개행(라인브레이크)을 추가한다 . 콘텐츠를 가지고 있지 않다 . 끝 테그가 존재않함.

<li>테그

문장의 리스트를 작성한다 .
속성값 :

<li>안녕하세요</li><li>반갑습니다</li>
* 문장의 순서를 정한다 각각의<li>테그는 리스트에서 하나의 항목이 된다 .

<ol>테그

문장의 리스트를 작성한다 .
속성값 :

<ol><li>안녕하세요</li><li>반갑습니다</li></ol>
* 문장의 순서를 정한다<ol>로<li>테그를 덮으면 정렬된 리스트처럼 보인다

<ul>테그

문장의 리스트를 작성한다
속성값 :

<ul><li>안녕하세요</li><li>반갑습니다</li></ul>
* 문장의 순서를 정한다<ul>로<li>테그를 덮으면 콤마로 정렬된 리스트처럼 보인다

<dl>테그 ,<dt>or<dd>문장의 들여쓰기를 관장한다

속성값 :

<dl><dt>들여쓰기의 제목입니다.</dt><dd>안녕하세요
반갑습니다</dd></dl>
*문장의 들여쓰기를 정한다<dl>로 하나의 문장을 감싸고<dt>로 제목을 정한후에<dd>로 들여쓰기 한다

<strong>,<em>테그

문장의 강조를 관장한다.
속성값 :

<strong>안녕하세요</strong>
```html
<em>안녕하세요</em>
* 문장을 강조한다

<img>테그

화면의 이미지를 관장한다

• 특징 : 인라인 엘리먼트이기 때문에 앞뒤로 라인브레이크를 삽입하지 않는다 .
• 속성 :
  src 속성 : 웹페이지를 보여주는데 포함되는 이미지 파일의 위치를 명시한다 .
  alt 속성 : src속성의 주소에 이미지가 없을때에 간단한 설명글을 명시한다.
  width 속성 : 이미지의 좌우폭 픽셀단위로 관장
  height 속성 : 이미지의 상하폭 픽셀단위로 관장

  <img src = "이미지가 있는 주소 기재" alt = "이미지의 주소에 이미지가 없을시 메세지 등록"
  width = "이미지의 좌우폭" height = "이미지의 상하폭">

<meta>테그

컨텐트 타입을 명시한다(char set의 옵션관장)
특징 : 인라인 엘리먼트 이면서 언어의 컨텐트와 타입의 옵션을 정해줄수 있다 속성 :
meta 속성 : 이 페이지에 관한 무엇인가를 브라우저에세 말해준다는 의미
http-equiv=”Content-Type” : 페이지의 컨텐트 타입에 관한것을 좀 더 말해주려고 하는것
content=”Text/html” : 콘텐트 속성을 사용해서 컨텐트 타입을 명시

 첫번째로 이것이 html파일이라고
알려주는부분
charset="ISO-8859-1" : 문자 인코딩을 설정 ISO-8859-1이라는 인코딩 사용 한국은 UTF-8을 많이사용
```html
<meta http-equive="Content-Type" content="text/html"; charset=UTF-8">

<link>테그

외부의 정보와 링크로 연결하기 위해 link 엘리먼트를 사용
특징 : 인라인 엘리먼트 이면서 css 나 javascript를 링크로 연결하여 사용하게 한다 속성 :
type 속성 : 정보의 유형을 기록한다
rel 속성 : XHTML 파일과 사용자가 연결하려고 하는 것 사이의 관계를 명시
href : 링크의 주소값 명시

<link type="text/css" rel="stylesheet" href="lounge.css" />

<div>테그

하나의 엘리먼트 묶음을 위해 div엘리먼트 사용
특징 : 하나의 묶음을 위해 사용한다 다른 테그들의 폴더역할 하나로 묶어 관리한다 속성 :
id 속성 : 스타일시트와 연동하기 위해 id를 부여 해당아이디의 스타일을 바꾼다 .
class 속성 : 스타일시트와 연동하기 위해 id를 부여 해당class 의 스타일을 바꾼다 .

<div id="cat">~<테그들>~</div>