<div>, <span>, <img>

*본 글은 명품 웹 프로그래밍 책을 참조하였습니다.

블록 태그&인라인 태그

HTML 태그들은 크게 두 종류로 블록 태그와 인라인 태그로 나뉜다.

차이점은 차지하는 공간의 크기다.

블록 태그는 내용의 크기와 상관없이 양 옆 전체를 차지하는 태그

인라인 태그는 내용의 크기만큼만 차지하는 태그

 

예시로 <div> 태그와 <span> 태그가 있다.

<div>div태그</div>

<span>span태그</span><span>span태그</span><span>span태그</span>

div태그

span태그 span태그 span태그

<div> 태그와 <span> 태그는 특별한 의미는 없고, 단순히 하나의 공간을 묶을 때 사용한다.

태그별로 블록인지 인라인인지는 암기할 필요는 없다.

 

이미지

<img>를 이용하여 이미지를 삽입할 수 있다.

그냥은 삽입할 수 없고, 속성을 이용해야 한다.

 

속성이란?

- 시작 태그에 들어갈 수 있는 것으로 해당 태그에 대한 특징을 의미한다.

- 태그의 종류에 따라 들어갈 수 있는 속성이 다르다.

<img src="이미지의 디렉터리 경로 혹은 URL"
     alt="대체 텍스트"
     width="가로"
     height="세로">
     <!-- 이런 것들이 속성 -->
<!-- 예시 -->
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음" width="300>

 

<img> 태그로 다음 이미지를 불러왔다.

width와 height속성 중 하나만 사용한다면 그에 맞게 비율로 정해진다.

alt속성은 이미지를 불러올 수 없을 때, 텍스트로 대체하는 기능이다.