html태그는 크게 인라인(in-line), 블록(block) 요소 두가지로 성질을 구분할 수 있다.

인라인 요소

컨텐츠 크기 만큼만 영역 차지
~~자동줄바꿈~~이 발생하지 않음
새 요소 추가시 가로로 나란히 배치됨
span a
img video audio em b strong …

블록 요소

컨텐츠 크기 상관없이 한 줄 차지
자동줄바꿈 발생
새 요소 추가시 다음줄에 세로로 배치됨
div p
h1 ~ h6 ul ol li
form header nav footer section
article aside table th td figure caption blockquote …

태그종류

- in line 태그 -

1. <span>

인라인 요소

2. <a>

:링크(anchor)

인라인 요소
href 속성을 추가해 주소를 링크함
href 속성에 이미지 링크를 넣으면, 이미지가 링크됨 (target=”photo”)
target="_blank" 속성을 추가해 연결된 링크가 새 탭에서 열리게 하는 옵션
```
   <a href="https://www.naver.com" target="_blank">  네이버링크 </a>
```

3. <br/>

:한 줄 띄우기

인라인 요소
inline 요소들 사이 한 줄을 띄우고 싶을 때 끼워서 사용함

- block 태그 -

1. <div>

:구분(division)

블록요소
요소들을 큰 덩어리로 구분하는데 유용하게 쓰임

2. <p>

:문단

블록요소

3. <h>

:제목(heading)

블록 요소
h1 ~ h6 까지 사용할 수 있다.
- h1이 가장 큰 숫자 제목
- 숫자가 커질수록 작은제목

4. <ul>

:리스트(unordered list)

블록 요소
번호 없는, 글머리(●)를 사용한 리스트

내부에 <li> 태그를 포함해 리스트를 만든다.

  <ul> 
      <li>리스트1</li>
      <li>리스트2</li>
  </ul>

5. <ol>

:리스트(ordered list)

블록 요소
번호 있는, 글머리(1. 2. ..)를 사용한 리스트

내부에 <li> 태그를 포함해 리스트를 만든다.

  <ol> 
      <li>리스트1</li>
      <li>리스트2</li>
  </ol>

6. <form>

:양식(form)

회원가입 등 양식 같은 것을 작성하는데 쓰임
action 속성을 추가해 사용
method 속성을 추가해 get, post 등 메소드 사용 가능

input 태그를 콘텐츠에 포함시켜 주로 사용

  <form action="code.jsp" method="post">
      <input type="text" name="userID" placeholder="아이디를입력하세요">
      <button type="submit"></button>
  </form>

- inline - block 태그 -

1. <img>

:이미지(image)

src 속성 에 이미지 경로 삽입
alt 속성 에 이미지 표시할 수 없을 때, 대신할 대체텍스트를 입력한다.
```
  <img src="no_img.png" alt="이미지자리" width="100" height="50">
```

2. <input>

:입력창

type 속성을 추가해 사용 (type으로 입력받을 형태 지정)
type 속성으로 text, checkbox, radio 등등 사용가능
placeholder 속성은 input 창에 미리 적혀있을 내용 표시해줌
```
  <input type="text" placeholder="id를 입력하세요"/>
```

3. <select>

:선택

<option> 태그를 자식으로 가짐

  <select name="메뉴">
      <option>옵션1</option>.
      <option>옵션2</option2>
  </select>

0.4 HTML(2) - 인라인, 블록 요소