글자와 상자 ( inline / block / inline-block )

요소가 화면에 출력되는 특성

• inline(글자) : 글자를 만들기 위한 요소들

• 컨텐츠의 크기만큼 범위가 줄어듬
• 옆으로 누적
• 가로, 세로 사이즈를 가질 수 없음 ( margin, padding 설정시엔 위 / 아래만 적용 )
• 자식요소로 block 요소를 사용할 수 없음

<span> 대표적인 인라인 요소. 구분을 위해 사용
줄바꿈시 띄어쓰기 적용</span>

<img> 이미지를 삽입

<a href > 다른 페이지로 이동하는 요소
  타겟을 입력해 새로운 페이지를 띄우는 위치 변경가능
  ex: target : "_blank" -> 새탭에 띄움
  
<br> 줄바꿈

 

 

• block(상자) : 상자를 만들기 위한 요소들

• 아래로 누적
• 가로 : 부모 요소의 크기만큼 늘어남
• 세로 : 컨텐츠의 크기만큼 줄어듬 

<div> 대표적인 블럭 요소. 특별한 의미없이 구분을 위한 요소 </div>

<h1> 제목 </h1>
  h1 ~ h6 까지 크기가 다름
  
<p> 문장 </p>

<ul> Unordered Lists 순서가 필요없는 리스트
  <li> 리스트 내 항목 </li>
  <li> 리스트 내 항목 </li>
  <li> 리스트 내 항목 </li>
</ul>
   순서가 필요한 리스트 <ol></ol> Ordered Lists 도 있음
   사용빈도가 낮으나, 마찬가지로 <li> 자식요소를 갖음

 

 

• inline-block (인라인블록) : 두 가지의 특성을 갖고 있음

• 가로, 세로 여백 지정이 가능, 수평(옆)으로 누적

<label> 라벨 가능한 요소의 제목 (여러 요소를 묶어줌)
  <input> 사용자가 데이터를 입력하는 요소 </input>
</label>

 

 

• table (테이블_ 표) : 행(row)과 열(column)의 집합

<table> : 표 생성
  <tr>
    <td>1-1</td>
    <td>1-2</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
  </tr>  
</table>