---
title: "HTML 정리 02"
date: "2019-01-24"
tags: ["HTML"]
status: archived
verified: false
---

---


## 문자 태그

* **속성이 있는 태그**
     * **태그에 개발자가 속성 값을 입력하여 다양한 형태로 사용할 때 사용**
     * 속성을 **정의하는 순서는 없다.**
     * 속성은 여러개를 사용할 수 있다.
     * 한 속성이 여러 태그에서 사용되면 **Global 속성**이라고 한다.
       * "title" 같은 속성
* **일반적으로 큰 따옴표(")로 속성값을 감싼다.**
     * 작은 따옴표도 사용 가능하나 큰 따옴표 권장
     * "나 '나 값이 공백을 가질 수 있다.
          * 따옴표를 사용하지 않으면 값이 공백을 가질 수 없다.

```
<태그명 속성명="값" 속성명="값" .. ></태그명>
```


## Font 태그 (HTML5에서 지원하지 않음)

* **크기(size)**는 1~7을 줄 수 있다
     * default는 3
* **색(color)**은 영어 또는 RGB값을 줄 수 있다.
     * white, black.. 
     * RGB값은 16진수, #으로 시작한다.
          * #000000
          * 0~FF(255)까지
          * 자바에서 16진수는 0x로 시작
* **글꼴(face)**은 저작권이 있기 때문에 조심해서 사용해야 한다.
     * 글꼴은 서버에 설치되어있는 모든 글꼴을 사용가능
     * 서버에만 글꼴이 존재하면 접속자 브라우저의 기본 설정 글꼴로 보여진다.
     * @이 붙은 글꼴을 쓰면 글자가 누워서 표기됨(쓰면 안된다)

```html
<font size="크기" color="색" face="글꼴">내용</font>
```

## h 태그

* **목차(heading)를 만들 때 사용**
  * **h1~h6**까지 존재
     * 1이 제일 크고 6이 제일 작게 나온다.
     * h7같이 DTD에 없는 태그를 사용하면 error도 없고 동작도 하지 않는다.
* h 태그 사용하면 자동으로 줄이 바뀐다.

```html
<h1>h1 입니다.</h1> <!-- 가장 크다. -->
<h2>h2 입니다.</h2>
<h3>h3 입니다.</h3>
<h4>h4 입니다.</h4>
<h5>h5 입니다.</h5>
<h6>h6 입니다.</h6> <!--  가장 작다. -->
```

![01](/md/legacy-assets/Web/HTML/02/01.webp)


## Anchor Tag

* **Hyper Text를 이어주는 태그, 현재 페이지에서 위치를 이동할 때 사용**

```html
<a href="연결할페이지경로" target="HTML을 보여줄 위치">클릭할 내용</a>
```

* **href에 입력가능한 값**
     * **URL(Uniform Resource Locator, 파일식별자)**
          * 프로토콜부터 다 써주는 것
          * **link를 가진 HTML파일이 이동을 하더라도 코드 수정없이 연결이 가능(권장)**
               * 단점은 코드가 길어진다.
     * **상대경로**
          * 서비스되는 파일의 위치가 중요
               * 단점은 **파일의 경로 변경 시 모두 수정해야 된다.**
          * **../** - 현재 파일이 서비스되는 위치에서 경로 하나 올라갈 때
          * **./** - 현재 경로(보통 생략)
          * **/** - 최상위 경로
     * **절대경로**
          * 클라이언트가 서버에 있는 html을 받아가서 실행하는 것
          * **웹에서는 절대경로를 절대 사용하지 않는다.**
            * 서버 경로에 존재하는 파일이 클라이언트의 경로엔 존재하지 않기 때문
* **target은 연결할 HTML을 보여줄 위치**
     * target="프레임의 이름" **프레임의 이름이 없다면 새창이 뜨게 된다.**

```html
<strong>URL 사용</strong> <!-- 코드가 길어진다 -->
<a  href="http://localhost:8080/html_prj/date190124/font.html">url이용 font.html</a>
<a  href="http://localhost:8080/html_prj/date190124/link_a/a.html">url이용 a.html</a>
<a  href="http://localhost:8080/html_prj/date190123/link_b/b.html">url이용 b.html</a>

<strong>상대경로 사용</strong>
<a href="/html_prj/date190124/link_a/a.html">상대경로 이용  a.html</a>
<a href="./link_a/a.html">상대경로 이용 a.html</a>
<a href="link_a/a.html">상대경로 이용 a.html</a>
<a href="../date190123/link_b/b.html">상대경로 이용 b.html</a>
```

![02](/md/legacy-assets/Web/HTML/02/02.webp)

```html
<strong>새창으로 띄우기</strong>
<a href="http://daum.net" target="_blank">다음</a>

<strong>현재창에 띄우기</strong>
<a href="http://daum.net">다음</a>
```

![03](/md/legacy-assets/Web/HTML/02/03.webp)

* 한페이지에서 위치를 이동할 때 name 속성을 사용
  * **HTML5에서 지원안함, 대신 id 속성을 사용**

```html
<a name="이름"></a> <!-- name 대신 id를 사용할 것 -->

...

<!-- "클릭할내용"을 클릭하면 위에 <a>태그 위치로 이동 -->
<a href="#이름">클릭할내용</a>
```

## hr 태그

* hr태그를 사용하면 줄이 자동으로 변경된다.
* 주로 화면에 가로줄을 그리기보단 **소스코드를 나누는 용도로 사용**
     * CSS로 숨긴다.
* **width** 속성
     * **숫자를 입력**하면 픽셀길이로 **고정길이**
     * **%**를 사용하여 **가변길이**를 줄 수 있다.

```html
<hr width="넓이" size="높이" color="선색"> 
```

## img 태그

* **src**값으로는 url, 상대경로가 들어갈 수 있다.
* **이미지의 크기를 직접 조작하는 것보다 디자이너가 조절한 이미지를 사용하는게 더 올바른 방법**
* **alt는** 이미지가 없을 때 나오는 메시지
* **title은** 풍선도움말
* **border** 속성이 있지만 CSS에서 처리한다.

```html
<img src="이미지경로" width="넓이" height="높이" alt="엑박 시 보여줄 메시지" title="풍선도움말" border="테두리 선의 두께"/>
```

```html
<a href="http://google.com" target="_blank"><img  src="images/google.png" alt="google" title="google"/></a>
<a href="http://daum.net" target="_blank"><img  src="images/daum.png" alt="daum" title="daum"/></a>
<a href="http://naver.com" target="_blank"><img  src="images/naver.png" alt="naver" title="naver"/></a>
<a href="http://sist.co.kr" target="_blank"><img  src="images/sist_logo.jpg" alt="sist" title="sist"/></a>
```

![04](/md/legacy-assets/Web/HTML/02/04.webp)

## iframe 태그

* frame태그는 하나의 브라우저(탭)에서 여러개의 HTML을 동시에 보여줄 때 사용
  * 페이지 디자인할때 사용되었으나 느려서 HTML5에서는 div 태그를 사용
* **iframe 태그는 inner frame의 약자로 하나의 브라우저(탭)에서 여러개의 HTML을 동시에 보여줄 때 사용**
     * anchor tag를 클릭했을 때 해당 target(iframe)에서 링크가 뜨게 됨
* 모든 페이지가 iframe으로 나올 수 있는건 아님
     * 네이버, 구글같은 사이트는 iframe에 나오지 않는다.
* **속성**
     * **name**
       * target속성에서 사용할 이름
     * **src**
       * 보여줄 페이지 링크
     * **width**
       * 넓이
     * **height**
       * 높이
     * **scrolling**
       * HTML보다 iframe이 작으면 scrollbar를 보여줄것인지에 대한 설정
       * yes / no / auto
       * HTML5에서 지원X
     * **frameborder**
       * 테두리선의 두께를 조절가능하나 CSS로 처리
       * HTML5에서 지원X

```html
<iframe name="" src="" width="" height="" scrolling="" frameborder=""/>
```

## 목록 태그

* **순서 목록, 도형 목록, 설명 목록, 3가지**를 지원
* li(list item)마다 줄이 변경된다.
* **순서목록(Ordered List)**
     * type - 사용할 목록
          * 1, a, A, i, I

```html
<ol type="">
    <li>내용</li>
    <li>내용</li>
</ol>
```

* 중간부터 순서를 바꾸고 싶으면 **value속성**으로 바꿔준다.

```html
<li value="100">내용</li>
```


* **도형목록(Unordered List)**
     * type - 사용할 도형 (HTML5에서 지원X)
          * circle - 하얀 원
          * disc - 검은 원
          * square - 네모

```html
<ul type="">
    <li>내용</li>
    <li>내용</li>
</ul>
```

* **설명목록(Description List)**
     * 잘 안쓴다..

```html
<dl>
    <dt>제목</dt>
    <dd>설명</dd>
    <dt>제목</dt>
    <dd>설명</dd>
    ..
</dl>
```