12. span, div, tr, td 태그

1. <span>, <div>

사실상 아무런 기능이 없는 공간 주머니.
주머니의 모양과 차지하는 공간의 차이.

태그	설명
<span> </span>	인라인 요소로 주로 텍스트나 다른 인라인 요소 내에서 일부분을 감싸는데 사용. span은 자체적으로는 아무런 시각적 효과나 구조를 갖지 않지만, CSS와 함께 사용해 스타일링이나 자바스크립트와의 상호작용을 위한 특정 부분을 지정할 때 사용.
<div> </div>	블록 수준 요소로, 주로 웹페이지의 큰 구획을 만들거나 다른 블록 또는 인라인 요소들을 그룹화하는데 사용. div 태그 자체로는 효과가 없지만 CSS를 사용해 레이아웃이나 스타일링을 적용할 수 있다.
<TD></TD>	Table data의 약자로, HTML 테이블 내에서 셀을 의미. td는 tr (테이블 행) 내에 위치해야 한다.

1. span <예시>

  <p>이것은 
    <span style="color: red;">빨간색</span> 텍스트를 갖는 문장입니다.
  </p>

2. div <예시>

 

A. style="border:

<div style="border: 1px solid black; padding: 10px;">
    이것은 테두리가 있는 박스입니다.
</div>

B. style="display: inline-block // 너비(width)와 높이(height) 지정 가능. 미지정시 요소 내용에 맞게 적용.

인라인 요소처럼 동작하여, 다른 인라인 요소들과 같은 줄에 위치.

블록 수준 요소의 특성을 지니고, 너비(width)와 높이(height)를 명시적으로 지정 가능.

요소의 내용(content) 크기 만큼 박스가 형성되며, 추가적으로 padding, border, margin 설정 가능.

<div style="display: inline-block; border: 1px solid black; padding: 10px;">
  이것은 텍스트 크기만큼의 테두리를 갖는 박스입니다.
</div>

C. style="display: inline // 너비(width)와 높이(height) 직접 지정 X. 요소의 크기는 오직 내용에 따라 적용순수한 인라인 요소로 동작.너비(width)와 높이(height) 설정이 무시된다. 대신 내용의 길이에 따라 자동으로 크기가 조절된다.inline 요소에는 상/하 margin이 적용되지 않지만 좌/우 margin은 적용된다.

<div style="display: inline; border: 1px solid black; padding: 10px;">
  이것은 텍스트 크기만큼의 테두리를 갖는 박스입니다.
</div>

 

3. td 태그 <예시>

<table border="1">
    <tr>
        <td>행 1, 셀 1</td>
        <td>행 1, 셀 2</td>
    </tr>
    <tr>
        <td>행 2, 셀 1</td>
        <td>행 2, 셀 2</td>
    </tr>
</table>